03、Vue-cli构建项目

一、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