一、Vue-cli脚手架工具
Vue-cli是Vue的脚手架工具，是官方命令行工具 (CLI)，脚手架即编写好基础的代码，包括目录结构、本地调试、代码部署、热加载、单元测试。
- $ npm install -g vue-cli // 安装操作
- $ vue -V // 查看版本，检查是否安装成功
- $ vue list // 查看可以使用哪些模版
- $ vue init <template-name> <project-name>
例如 $ vue init webpack my-project // 官方模版，也可以使用自定义等模版
// 基本项目设置
$ vue init webpack sell
? Project name sell # => 项目名称
? Project description 饿了吗项目 # => 项目描述
? Author EndEvent <xxxx@qq.com> # => 作者
? Vue build standalone # => 是否支持单文件组件
? Install vue-router? No # => 是否安装路由
? Use ESLint to lint your code? No # => 是否支持ESLint代码校验
? Pick an ESLint preset Standard # => 校验的标准是什么？
? Setup unit tests with Karma + Mocha? No # => 是否使用单元测试
? Setup e2e tests with Nightwatch? No # => 是否使用e2e测试
vue-cli · Generated "sell".
To get started:
cd sell
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
// 之后再按照上面提示执行对应命令即可
$ cd sell
$ npm install
$ npm run dev // 开启服务器运行代码，之后提示例如打开http://localhost:8080页面，如果可以打开说明配置完成
二、项目文件介绍
-
项目总体文件
项目文件介绍 package.json文件
scripts中配置一些脚本，例如在上面使用到的npm run dev；
dependencies生产环境的项目依赖；"vue": "^2.3.3"其^表示安装的最低版本是2.3.3；
devDependencies编译项目时需要的一些依赖(项目打包之后是不会存在的);
运行命令
三、webpack打包 【运行时】
webpack是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能。
项目文件开始时$ npm run dev
浏览器可以打开对应页面，在networking中，会看到请求的文件，其中例如app.js在项目src资源中是不存在的，它就是通过webpack打包工具生成的；
-
$ npm run dev执行的脚本是package.json中"dev": "node build/dev-server.js"对应的就是dev-server.js -
dev-server.js文件中，var webpackConfig = require('./webpack.dev.conf')导入对应开发环境的配置文件webpack.dev.conf.js -
webpack.dev.conf.js文件中，var baseWebpackConfig = require('./webpack.base.conf')开发环境和生成环境都是导入基础模块，对应webpack.base.conf.js文件 -
webpack.base.conf.js文件中，entry: { app: './src/main.js'},指定了webpack编译的入口文件，output: { filename: '[name].js' }编译生成的文件名称，对应组件生成对应js文件 -
webpack.dev.conf.js文件，module.exports = merge(baseWebpackConfig, { plugins: [new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html',inject: true }),] })这也就是生成对应的入口文件index.html
