vue hello world

vue hello world

1. 依赖环境

Node.js 8.9+

npm (安装nodejs的时候自动安装了npm)

2. 官网文档

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

2.1 Vue.component 缺点

全局定义：强制要求每个component 中的命名不能重复

字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用丑陋的\

不支持CSS：意味着当HTML 和JavaScript 组件化时，css明显被遗漏

没有构建步骤：限制只能使用html和ES5 JavaScript，而不能使用预处理器，如Pug(formerly jade) 和Babel

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 request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this
npm WARN deprecated chokidar@2.1.8: 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

> core-js@3.6.5 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/protobufjs@1.0.5 postinstall C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall


> nodemon@1.19.4 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


> ejs@2.7.4 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/compiler-sfc@3.0.0 requires a peer of vue@3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/cli@4.5.6
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...


> yorkie@2.0.0 install D:\vue_demo\hello-world\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


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


> ejs@2.7.4 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 run serve