Mar 21, 2020: Am going to attempt to convert the mdb_demo (MobilityDB) from React to Vue.
https://vuejsdevelopers.com/2017/05/28/switch-from-react-to-vue-js/
Vue JS hooks and React JS Hooks at a glance (hint: it's not that complex)
https://medium.com/@shuvohabib/vue-js-hooks-and-react-js-hooks-at-a-glance-fe5623e9ac52
This is the old version: https://github.com/yyx990803/vue-hooks says: POC for using React Hooks in Vue. Totally experimental, don't use this in production. and code is all 17 months old !!! :-(
And there's this: https://css-tricks.com/what-hooks-mean-for-vue/
Warning: this this seems to be DIFFERENT hooks, not the ones we want: : https://github.com/u3u/vue-hooks
and there's this: Frustrations with React Hooks https://blog.logrocket.com/frustrations-with-react-hooks/
continuing: Hooks are coming to Vue.js version 3.0
A: what version of npm is on webfactions?:
19:22:11 npm_build $ node -v
v10.13.0
$ mkdir vue_demo
$ cd vue_demo/
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (vue_demo)
version: (1.0.0)
description: my first
entry point: (index.js)
test command:
git repository:
keywords: vue hooks
author: wendell
license: (ISC)
About to write to /home/wendell/webapps/cherry/vue_demo/package.json:
{
"name": "vue_demo",
"version": "1.0.0",
"description": "my first",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"vue",
"hooks"
],
"author": "wendell",
"license": "ISC"
}
Is this OK? (yes)
Hmm... SHOULD HAVE done this later...
$ node --max-old-space-size=460 `which npm` install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue_demo@1.0.0 No repository field.
up to date in 0.825s
found 0 vulnerabilities
directions say to uninst the old and inst the latest...
$ npm uninstall -g vue-cli
up to date in 0.065s
$ npm install -g @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/home/wendell/bin/node-v10.13.0-linux-x64/bin/vue -> /home/wendell/bin/node-v10.13.0-linux-x64/lib/node_modules/@vue/cli/bin/vue.js
> @apollo/protobufjs@1.0.3 postinstall /home/wendell/bin/node-v10.13.0-linux-x64/lib/node_modules/@vue/cli/node_modules/@apollo/protobufjs
> node scripts/postinstall
> core-js@2.6.11 postinstall /home/wendell/bin/node-v10.13.0-linux-x64/lib/node_modules/@vue/cli/node_modules/babel-polyfill/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
<lots>
+ @vue/cli@4.2.3
added 494 packages from 227 contributors, removed 43 packages and updated 206 packages in 69.334s
looks ok...
$ mkdir example
$ cd example/
$ git clone https://github.com/viclotana/vue-canvas.git
$ cd vue-canvas/
is this the right place to set size and do the install???
$ node --max-old-space-size=460 `which npm` install
> yorkie@2.0.0 install /home/wendell/webapps/cherry/vue_demo/example/vue-canvas/node_modules/yorkie
> node bin/install.js
setting up Git hooks
done
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: idb-connector@1.1.8 (node_modules/idb-connector):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for idb-connector@1.1.8: wanted {"os":"aix","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 1146 packages from 611 contributors and audited 23834 packages in 28.085s
found 1205 vulnerabilities (716 low, 26 moderate, 462 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
and to compile:
$ npm run-script build
DONE Compiled successfully in 8737ms 10:08:38 PM
File Size Gzipped
dist/js/chunk-vendors.50e9f258.js 82.33 KiB 29.85 KiB
dist/js/app.565a6d2e.js 2.46 KiB 1.18 KiB
dist/css/app.4598f104.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
and copy files over to staticserver area:
$ cp -R dist ~/webapps/staticserver/vuetest
$ cp -r dist/js ~/webapps/staticserver/
$ cp -r dist/css ~/webapps/staticserver/
$ cp -r dist/img ~/webapps/staticserver/
Yipee! page displays a large Vue logo !! (but page doesn't have any hooks)
not sure about these, but firefox is about to die:
https://github.com/egoist/react-to-vue
Switching From React To Vue.js https://vuejsdevelopers.com/2017/05/28/switch-from-react-to-vue-js/
I created the exact same app in React and Vue. Here are the differences.
https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd
back to instructions at: https://blog.logrocket.com/hooks-are-coming-to-vue/ WARNING: these are WRONG.
same instructions diff format: https://www.ma-no.org/en/programming/javascript/vue-js-3-0-what-are-hooks-and-how-they-work
startup vue app git repo: https://github.com/viclotana/vue-canvas
Demo A: Vue mixins
correct page is: https://tiles.ilikecarrots.com/vuetest/dist/index.html
Demo B: Vue Hooks
$ npm install vue-Hooks
npm ERR! code E404
npm ERR! 404 Not Found: vue-Hooks@latest
2 info using npm@6.4.1
3 info using node@v10.13.0
4 verbose npm-session 0728ac3758676a2b
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 404 https://registry.npmjs.org/vue-Hooks 204ms
8 silly fetchPackageMetaData error for vue-Hooks@latest 404 Not Found: vue-Hooks@latest
npm ERR! A complete log of this run can be found in:
npm ERR! /home/wendell/.npm/_logs/2020-03-22T14_33_08_045Z-debug.log
just a guess:
https://stackoverflow.com/questions/53538116/vue-cli-servicelatest-not-found
$ npm install @vue/cli-service
> yorkie@2.0.0 uninstall /home/wendell/webapps/cherry/vue_demo/example/vue-canvas/node_modules/yorkie
> node bin/uninstall.js
husky
uninstalling Git hooks
done
> ejs@2.7.4 postinstall /home/wendell/webapps/cherry/vue_demo/example/vue-canvas/node_modules/ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ @vue/cli-service@3.12.1
added 195 packages from 424 contributors, removed 29 packages, updated 131 packages, moved 1 package and audited 24028 packages in 38.533s
found 1183 vulnerabilities (714 low, 16 moderate, 452 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
did that help?
$ npm install vue-Hooks
npm ERR! code E404
npm ERR! 404 Not Found: vue-Hooks@latest
npm ERR! A complete log of this run can be found in:
npm ERR! /home/wendell/.npm/_logs/2020-03-22T15_04_39_005Z-debug.log
Nope. IT IS LOWER CASE!:
$ npm install vue-hooks
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ vue-hooks@0.3.2
added 1 package from 1 contributor and audited 24029 packages in 14.374s
found 1183 vulnerabilities (714 low, 16 moderate, 452 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
ERRORS in instructions:
npm install vue-Hooks s.b. npm install vue-hooks./components/Modal.vue or ./components/modal.vue ???import { hooks } from 'vue-hooks';import Modal from './components/Modal.vue'ANALYSIS: https://blog.logrocket.com/hooks-are-coming-to-vue/ IS ABBIE-NORMAL UP; do not use this brain!
Author is Evan Yu (author of View itself???) https://codesandbox.io/u/yyx990803
https://codesandbox.io/s/jpqo566289
Q: how to initiate an npm/node thing???
A: will try this first:
$ node --max-old-space-size=460 `which npm` install
$ npm run-script build
$ cp dist/* /home/wendell/webapps/staticserver/yyx990803/
$ cp dist/src.c0628303.js* /home/wendell/webapps/staticserver/
then: https://tiles.ilikecarrots.com/yyx990803/index.html
Yipee!! this one (with actual hooks) works!
https://www.npmjs.com/package/vue-hooks
Warning: these examples' package.json state earlier version than blog ???
1) React-style Hooks
$ vim src/index.js
<insert code from web page>
$ cp ../codesandbox/index.html .
$ cp ../codesandbox/index.html .
21:09:23 react-style-hooks $ cp ../codesandbox/package.json .
$ node --max-old-space-size=460 `which npm` install
$ npm run-script build
$ mkdir /home/wendell/webapps/staticserver/react_style
$ cp dist/* /home/wendell/webapps/staticserver/react_style/
$ cp dist/src.aaf6925e.js* /home/wendell/webapps/staticserver/
and then: https://tiles.ilikecarrots.com/react_style/index.html
Yipee!!
2) Vue-style Hooks
$ mkdir vue-style-hooks
$ cd vue-style-hooks/
$ cp ../codesandbox/index.html .
$ cp ../codesandbox/package.json .
$ mkdir src
$ vim src/index.js
$ node --max-old-space-size=460 `which npm` install
$ npm run-script build
$ mkdir /home/wendell/webapps/staticserver/vue_style
$ cp dist/* /home/wendell/webapps/staticserver/vue_style/
$ cp dist/src.c0c82486.js* /home/wendell/webapps/staticserver/
and then: https://tiles.ilikecarrots.com/vue_style/index.html
Nope: Blank page.
3) Normal Vue
$ mkdir normal_vue
$ cd normal_vue/
$ mkdir src
$ vim src/index.js
$ cp ../codesandbox/index.html .
$ cp ../codesandbox/package.json .
$ node --max-old-space-size=460 `which npm` install
$ npm run-script build
$ mkdir /home/wendell/webapps/staticserver/normal_vue
$ cp dist/* /home/wendell/webapps/staticserver/normal_vue/
$ cp dist/src.f8b9b438.js* /home/wendell/webapps/staticserver/
and then: https://tiles.ilikecarrots.com/normal_vue/index.html
Nope: Reference error: Vue is not defined.
Typeerror: t is undefined.
OK, the heck with is:
THEREFORE, will start with "React-style Hooks", which is closest to what I'm starting with anyway.
WAIT, found yet another alledged vue+hook app: https://github.com/sdras/vue-hooks-foodapp
Seems to be the same author as the css-tricks page at: https://css-tricks.com/what-hooks-mean-for-vue/
$ mkdir foodapp
$ cd foodapp/
$ git clone https://github.com/sdras/vue-hooks-foodapp.git
$ cd foodapp
$ node --max-old-space-size=460 `which npm` install
$ npm run-script build
$ mkdir /home/wendell/webapps/staticserver/foodapp
$ cp dist/* /home/wendell/webapps/staticserver/foodapp/
$ cp -R dist/js /home/wendell/webapps/staticserver/
$ cp -R dist/css /home/wendell/webapps/staticserver/
and then: https://tiles.ilikecarrots.com/foodapp/index.html
It runs, and looks nice, but not sure what it is doing.
Golden Ratio. Bring Balance in UI Design. https://uxplanet.org/golden-ratio-bring-balance-in-ui-design-765c954f0ff9
copy over the (working) react-style demo
$ cp -R vue_demo/example/react-style-hooks vue_mdb
$ npm run-script build
edit site.py for DNS name: for now, use devel.ilc for the Vue version...
PROBLEM: don't know how to specify location for static js files, FOR NOW will put them in the /cherry/ dir; FIX THIS!
possible github repo: https://github.com/websemantics/awesome-ant-design
Vue.js
Projects that are built with Vue.js and Ant Design.
ant-design-vue - Ant Design of Vue.js 2.5.0+.
https://github.com/vueComponent/ant-design-vue
large, interesting; little chinese
Vue.js Beauty - Beautiful UI components build with Vue.js and Ant Design.
https://github.com/FE-Driver/vue-beauty
mostly chinese
Vue.js Ant UI - Ant Design UI components built in Vue.js.
https://github.com/kokoroX/vue-ant-ui
mostly chinese
Ant Design Vue - Vue.js version of Ant Design.
https://github.com/lileilei/Ant-design-vue
only in chinese
antue - A set of enterprise-class Vue UI components, following the Ant Design specification completely.
https://github.com/zzuu666/antue
only chinese
vue-antd-admin - Ant Design Pro's implementation with Vue
https://github.com/iczer/vue-antd-admin
only chinese
Not necessarily And-Design, but seems to be the official site:
https://awesome-vue.js.org/
https://awesome-vue.js.org/components-and-libraries/ui-components.html
following along from: https://vue2-leaflet.netlify.com/quickstart/#installation
npm install leaflet vue2-leaflet --save
19:27:39 vue_mdb $ npm update vue-template-compiler
19:31:25 vue_mdb $ npm uninstall vue-loader 19:31:41 vue_mdb $ npm install vue-loader
19:32:21 vue_mdb $ npm uninstall vue 19:32:55 vue_mdb $ npm install vue
$ node --max-old-space-size=460 `which npm` install
$ npm run-script build
$ mkdir /home/wendell/webapps/staticserver/erik
$ cp dist/* /home/wendell/webapps/staticserver/erik/
note: different:
$ cp dist/js/* /home/wendell/webapps/staticserver/js/
https://tiles.ilikecarrots.com/erik/index.html
Yipee! it works!
BUT, don't know how to add useState, so will restart with react-style
https://tiles.ilikecarrots.com/react2/index.html
update package.json to indicate latest vue, then:
$ npm install vue
$ npm install @vue/cli-service
01:59:33 my-react-style $ npm update vue-template-compiler
02:01:19 my-react-style $ npm uninstall vue-loader 02:01:50 my-react-style $ npm install vue-loader
02:06:05 my-react-style $ npm uninstall vue-template-compiler
02:06:05 my-react-style $ npm install vue-template-compiler@2.6.6