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