18_尚硅谷_Vue_使用vue-cli创建项目&&19_尚硅谷_Vue_基于脚手架编写项目

1、使用vue-cli创建项目
参考：
https://www.npmjs.com/package/vue-cli

https://github.com/vuejs/vue-cli/tree/master

https://www.jianshu.com/p/1626b8643676

https://segmentfault.com/a/1190000011275993

步骤：
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
图示1：

C:\workspace\webstorm2017-3.2\myvue>npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\libingshen\AppData\Roaming\npm\vue -> C:\Users\libingshen\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\libingshen\AppData\Roaming\npm\vue-list -> C:\Users\libingshen\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\libingshen\AppData\Roaming\npm\vue-init -> C:\Users\libingshen\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 236 packages in 74.142s

C:\workspace\webstorm2017-3.2\myvue>vue
Usage: vue <command> [options]

Options:

  -V, --version  output the version number
  -h, --help     output usage information

Commands:

  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

C:\workspace\webstorm2017-3.2\myvue>vue init webpack vue_demo

? Project name vue_demo
? Project description A Vue.js project
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "vue_demo".

# Project initialization finished!
# ========================

To get started:

  cd vue_demo
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack



C:\workspace\webstorm2017-3.2\myvue>cd vue_demo

C:\workspace\webstorm2017-3.2\myvue\vue_demo>npm install
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN notice [SECURITY] mime has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\workspace\webstorm2017-3.2\myvue\vue_demo\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1240 packages in 131.222s

C:\workspace\webstorm2017-3.2\myvue\vue_demo>npm run lint -- --fix

> vue_demo@1.0.0 lint C:\workspace\webstorm2017-3.2\myvue\vue_demo
> eslint --ext .js,.vue src "--fix"


C:\workspace\webstorm2017-3.2\myvue\vue_demo> npm run dev

> vue_demo@1.0.0 dev C:\workspace\webstorm2017-3.2\myvue\vue_demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 4389ms                                                                          19:49:59
 I  Your application is running here: http://localhost:8080                                                终止批处理操作吗(Y/N)? y

C:\workspace\webstorm2017-3.2\myvue\vue_demo>

2、模板项目结构

图2：

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件