vue hello world

1. 依賴環境

Node.js 8.9+

npm (安裝nodejs的時候自動安裝了npm)

2. 官網文檔

​​https://cn.vuejs.org/v2/guide/​​

2.1 Vue.component 缺點

全局定義：強制要求每個component 中的命名不能重複

字元串模闆：缺乏文法高亮，在HTML有多行的時候，需要用醜陋的\

3. Vue Cli 腳手架的使用

1. npm install -g @vue/cli  # 全局安裝腳手架
2. vue create hello-world   # 建立hello world的項目
3. cd  hello-world          # 進入hello world 
4. mpn run serve            # 運作vue      

3.1 單檔案元件優勢

1. 完整的文法高亮
2. CommonsJS子產品
3. 元件作用于的CSS      

3.2 安裝vue的過程

D:\vue_demo>npm install -g @vue/cli
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: this
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
C:\Users\AppData\Roaming\npm\vue -> C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

> [email protected] postinstall C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\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!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> @apollo/[email protected] postinstall C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall


> [email protected] postinstall C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> [email protected] postinstall C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN @vue/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/[email protected]
added 1316 packages from 701 contributors in 148.469s

D:\vue_demo>vue create hello-world


Vue CLI v4.5.6
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v4.5.6
✨  Creating project in D:\vue_demo\hello-world.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> [email protected] install D:\vue_demo\hello-world\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> [email protected] postinstall D:\vue_demo\hello-world\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> [email protected] postinstall D:\vue_demo\hello-world\node_modules\ejs
> node ./postinstall.js

added 1249 packages from 918 contributors in 56.613s

53 packages are looking for funding
  run `npm fund` for details

�  Invoking generators...
�  Installing additional dependencies...

added 53 packages from 36 contributors in 13.797s

57 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project hello-world.
�  Get started with the following commands:

 $ cd hello-world
 $ npm