1. 前言

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。

• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

• 一个运行时依赖 ( @vue/cli-service )，该依赖：

  • 可升级；

  • 基于 webpack 构建，并带有合理的默认配置；

  • 可以通过项目内的配置文件进行配置；

  • 可以通过插件进行扩展。

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

        Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

在使用Vue-CLI之前，请确认你的电脑已经安装了 node。

2. 安装淘宝镜像

安装cnpm的原因：npm的服务器是外国的，所以有时候我们安装“模块“有时会很慢，还可能会安装失败。

安装方法:

 # -g 全局配置
 # 解决npm速度慢 
 npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm的作用：淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间。 安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突 。

安装完cnpm可以使用cnpm -v查看版本。

cnpm -v

3. 安装vue-cli脚手架

3.1 全局安装 Vue-CLI

输入命令行：

 cnpm install vue-cli -g 

安装完成之后，输入命令行 vue -V 查看版本号，出现相应得到版本号即为成功。

3.2 创建 Vue-CLI 项目

接下来初始化 Vue 项目(哪个文件位置都行)

我们用 vue init 命令来初始化项目，具体看一下这条命令的使用方法。

 vue init <template-name> <project-name>

<template-name>：表示模板名称，Vue-CLI 官方为我们提供了5种模板

• webpack：一个全面的 webpack+vue-loader 的模板，功能包括热加载，linting,检测和CSS扩展。

• webpack-simple：一个简单 webpack+vue-loader 的模板，不包含其他功能，让你快速的搭建vue的开发环境。

• browserify：一个全面的 Browserify+vueify 的模板，功能包括热加载，linting, 单元检测。

• browserify-simple：一个简单 Browserify+vueify 的模板，不包含其他功能，让你快速的搭建vue的开发环境。

• simple：一个最简单的单页应用模板。

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。

在实际开发中，一般我们都会使用 webpack 这个模板，那我们这里也安装这个模板，在命令行输入以下命令：

 vue init webpack myblog(项目名)        #注：项目名不能大写，不能使用中文 

 此命令表示基于 webpack 初始化一个项目此文件生成你当前文件目录。

初始化 Vue 项目时会出现几个提示，分别是输入项目名称、描述、作者等，按实际情况选择即可。

 ？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
 ？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
 ？Author ---- 作者；
 ？Vue build ---- 构建模式，一般默认第一个；
 ？Install vue-router? ---- 是否安装vue-router；
 ？Use ESLint to lint yout code? ---- 格式校验，按需；
 ？Set up unit tests ---- 测试相关，按需；
 ？Setup e2e tests with Nightwatch? ---- 测试相关，按需；
 ？Should we run ‘npm install’ for you after the project has been created? ---- 按需；

项目初始化完成之后会出现以下信息，表示操作成功。

 3.3 安装项目依赖

进入你安装的项目

 cd myblog

安装项目依赖（类似java中的maven依赖）

 npm install

在项目初始化的时候，已经存在了 package.json 文件，直接使用 npm install 安装项目所需要的依赖，否则项目不能正确运行

4. 运行项目

 npm run dev

 浏览器访问：

 http://localhost:8080/

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他 Vue 项目运行的时候，可以使用 ctrl+C 来中断运行。

出现这个页面，说明我们的初始化已经成功

 5. 使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

 vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

 6. 项目打包

如何把写好的Vue网页放到服务器上，这里主要的命令就是要用到npm run build 命令。我们在命令行中输入npm run build命令后，vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出，你执行的npm run build命令就相对执行的 node build/build.js 。

package.json的scripts 字段：

 "scripts": {
   "dev": "node build/dev-server.js",
   "start": "npm run dev",
   "unit": "jest --config test/unit/jest.conf.js --coverage",
   "e2e": "node test/e2e/runner.js",
   "test": "npm run unit && npm run e2e",
   "build": "node build/build.js"
 }

在执行完npm run build命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。

dist文件夹下目录包括：

• index.html主页文件:因为我们开发的是单页web应用，所以说一般只有一个html文件。

• static 静态资源文件夹：里边JS、CSS和一些图片。

7、项目结构

vue-cli脚手架工具搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。

Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。

 |-- build // 项目构建(webpack)相关代码
 |-- config // 项目开发环境配置
 |-- node_modules // npm依赖包
 |-- src // 源码目录
 |-- static // 静态文件，比如一些图片，json数据等
 |-- .babelrc // ES6语法编译配置
 |-- .editorconfig // 定义代码格式
 |-- .gitignore // git上传需要忽略的文件格式
 |-- .poscssrc.js // 转化css的工具
 |-- index.html // 主页
 |-- package.json // 项目基本信息（在创建vue-cli项目后自动生成）
 |-- README.md // 项目说明

7.1 build——[webpack配置]

build 文件主要是 webpack 的配置，主要启动文件是 dev-server.js，当我们输入 npm run dev 首先启动的就是dev-server.js，它会去检查 node 及 npm 版本，加载配置文件，启动服务。

 |-- build // 项目构建(webpack)相关代码
 | |-- build.js // 生产环境构建代码
 | |-- check-version.js // 检查node、npm等版本
 | |-- dev-client.js // 热重载相关
 | |-- dev-server.js // 构建本地服务器
 | |-- utils.js // 构建工具相关
 | |-- webpack.base.conf.js // webpack基础配置
 | |-- webpack.dev.conf.js // webpack开发环境配置
 | |-- webpack.prod.conf.js // webpack生产环境配置

7.1.1 dev-server.js

当我们在运行 npm run dev 就相当于执行了node build/dev-server.js,说明这个文件相当重要，先来熟悉一下它。 我贴出代码并给出重要的解释。

 // 检查 Node 和 npm 版本
 require('./check-versions')()
 ​
 // 获取 config/index.js 的默认配置
 var config = require('../config')
 ​
 // 如果 Node 的环境无法判断当前是 dev / product 环境
 // 使用 config.dev.env.NODE_ENV 作为当前的环境
 ​
 if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 ​
 // 使用 NodeJS 自带的文件路径工具
 var path = require('path')
 ​
 // 使用 express
 var express = require('express')
 ​
 // 使用 webpack
 var webpack = require('webpack')
 ​
 // 一个可以强制打开浏览器并跳转到指定 url 的插件
 var opn = require('opn')
 ​
 // 使用 proxyTable
 var proxyMiddleware = require('http-proxy-middleware')
 ​
 // 使用 dev 环境的 webpack 配置
 var webpackConfig = require('./webpack.dev.conf')
 ​
 // default port where dev server listens for incoming traffic
 ​
 // 如果没有指定运行端口，使用 config.dev.port 作为运行端口
 var port = process.env.PORT || config.dev.port
 ​
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
 ​
 // 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置
 var proxyTable = config.dev.proxyTable
 ​
 // 使用 express 启动一个服务
 var app = express()
 ​
 // 启动 webpack 进行编译
 var compiler = webpack(webpackConfig)
 ​
 // 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
   stats: {
     colors: true,
     chunks: false
   }
 })
 ​
 // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
 var hotMiddleware = require('webpack-hot-middleware')(compiler)
 // force page reload when html-webpack-plugin template changes
 compiler.plugin('compilation', function (compilation) {
   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
     hotMiddleware.publish({ action: 'reload' })
     cb()
   })
 })
 ​
 // proxy api requests
 // 将 proxyTable 中的请求配置挂在到启动的 express 服务上
 Object.keys(proxyTable).forEach(function (context) {
   var options = proxyTable[context]
   if (typeof options === 'string') {
     options = { target: options }
   }
   app.use(proxyMiddleware(context, options))
 })
 ​
 // handle fallback for HTML5 history API
 // 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址
 app.use(require('connect-history-api-fallback')())
 ​
 // serve webpack bundle output
 // 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上
 app.use(devMiddleware)
 ​
 // enable hot-reload and state-preserving
 // compilation error display
 // 将 Hot-reload 挂在到 express 服务上
 app.use(hotMiddleware)
 ​
 // serve pure static assets
 // 拼接 static 文件夹的静态资源路径
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 // 为静态资源提供响应服务
 app.use(staticPath, express.static('./static'))
 ​
 // 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露
 module.exports = app.listen(port, function (err) {
   if (err) {
     console.log(err)
     return
   }
   var uri = 'http://localhost:' + port
   console.log('Listening at ' + uri + '\n')
 ​
   // when env is testing, don't need open it
   // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址
   if (process.env.NODE_ENV !== 'testing') {
     opn(uri)
   }
 })

7.1.2 webpack.base.confg.js

webpack的基础配置文件：

...
 ...
 module.export = {
   // 编译入口文件
   entry: {},
   // 编译输出路径
   output: {},
   // 一些解决方案配置
   resolve: {},
   resolveLoader: {},
   module: {
     // 各种不同类型文件加载器配置
     loaders: {
       ...
 ...
       // js文件用babel转码
       {
         test: /\.js$/,
         loader: 'babel',
         include: projectRoot,
         // 哪些文件不需要转码
         exclude: /node_modules/
       },
       ...
 ...
 }
   },
   // vue文件一些相关配置
   vue: {}
 }

7.2 config——[vue项目配置]

config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等。

 |-- config // 项目开发环境配置
 | |-- dev.env.js // 开发环境变量
 | |-- index.js // 项目一些配置变量
 | |-- prod.env.js // 生产环境变量
 | |-- test.env.js // 测试环境变量

7.3 node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入 npm install [依赖包名称] , 回车。

在两种情况下我们会自己去安装依赖：

（1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等

安装方法示例：npm install css-loader

（2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件)

注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息

如安装11.1.4版本的 vue-loader，输入 npm install vue-loader@11.1.4

7.4 src——[项目核心文件]

src 的目录结构：

 |-- src // 源码目录
 | |-- assets // 静态文件，比如一些图片，json数据等
 | |-- components // vue公共组件
 | |-- router // 配置路由
 | |-- App.vue // 页面入口文件
 | |-- main.js // 程序入口文件，加载各种公共组件

7.4.1 static和assets文件夹的区别

首先，static 文件夹和 src 目录下 assets 文件夹在 vue-cli 生成的项目中，都是用来存放静态资源的。

• assets 目录中的文件会被 webpack 处理解析为模块依赖，只支持相对路径形式。build 的时候由 Webpack 解析为模块依赖。

• static/ 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 项目 /config/index.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]，所以如果需要引用static目录下的图片及其他资源，应该使用绝对路径。

7.4.2 components/HelloWorld.vue

这个文件就是我们在第一次运行项目时看到的页面文件了。也是分为<template><script><style>三个部分，以后我们大部分的工作都是写这些 .vue 结尾的文件。现在我们可以试着改一些内容，然后预览一下。

<template>
   <div class="hello">
     <h1>{{ msg }}</h1>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'HelloWorld',
   data() {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
   }
 }
 </script>
 ​
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     
 </style>

7.4.3 router/index.js

引文在 app.vue 中我们看到了路由文件，虽然 router 的内容比较多，但是我们先简单的看一下。

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 ​
 Vue.use(Router)
 ​
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
     }
   ]
 })

我们可以看到 import HelloWorld from ‘@/components/HelloWorld’ 这句话， 文件引入了/components/HelloWorld.vue 文件。这个文件里就配置了一个路由，就是当我们访问网站时给我们显示HelloWorld.vue的内容。

7.4.4 App.vue

<template>
   <div id="app">
     <img src="./assets/logo.png">
       <router-view></router-view>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'App'
 }
 </script>
 ​
 <style scoped>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>

App.vue文件可以分成三部分：

• <template></template>标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和<router-view></router-view>标签，<router-view>标签说明使用了路由机制。

• <script></script>标签包括的js内容：你可以在这里些一些页面的动态效果和Vue的逻辑代码。

• <style></style>标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，需要特别说明的是你可以用<style scoped></style>来声明这些css样式只在本模板中起作用。

7.4.5 main.js

main.js 是整个项目的入口文件,在 src 文件夹下：

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 ​
 Vue.config.productionTip = false //生产环境提示，这里设置成了false
 ​
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })

通过代码可以看出这里引进了 App 的组件和的模板，它是通过 import App from ‘./App’ 这句代码引入的。 我们可以找到 App.vue 文件，打开进行查看。

7.5 package.json

package.json 文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。它是个标准的json格式文件，编写时要注意格式。 npm install 命令会根据这个文件下载所有依赖模块。

 {
   "name": "myblog",
   "version": "1.0.0",
   "description": "使用vue框架写的个人博客项目。",
   "author": "Drimbin<2740574644@qq.com>",
   "private": true,
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js"
   },
   "dependencies": {
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "babel-loader": "^7.1.1",
     "css-loader": "^0.28.0"
   },
   "engines": {
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ]
 }

package.json 里的 scripts 字段，这个字段定义了你可以用 npm 运行的命令。在开发环境下，在命令行工具中运行 npm run dev 就相当于执行 node build/dev-server.js 。由此可以看出 script 字段是用来指定 npm 相关命令的缩写。

 "scripts": {
   "dev": "node build/dev-server.js",
   "build": "node build/build.js"
 }

dependencies 字段和 devDependencies 字段

• dependencies字段指项目运行时所依赖的模块；

• devDependencies字段指定了项目开发时所依赖的模块；

在命令行中运行 npm install 命令，会自动安装 dependencies 和 devDempendencies 字段中的模块。

package.json还有很多相关配置，如果你想全面了解，可以参考下面的表格：

7.6 .babelrc

.babelr 是 Babel 解释器的配置文件，存放在根目录下。Babel 是一个转码器，项目里需要用它将ES6代码转为ES5代码。如果你想了解更多，可以查看 Babel 的知识。

{
   //转码用的插件
   "presets": [
     ["env", {
       "modules": false,
       "targets": {
         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
       }
     }],
     "stage-2"
   ],
   //转码用的插件
   "plugins": ["transform-vue-jsx", "transform-runtime"],
   //对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作
   "env": {
     "test": {
       "presets": ["env", "stage-2"],
       "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
     }
   }
 }

7.7 .editorconfig

.editorconfig 文件定义项目的编码规范，编译器的行为会与 .editorconfig 文件中定义的一致，并且其优先级比编译器自身的设置要高，这在多人合作开发项目时十分有用而且必要。

 root = true
   
 [*] // 对所有文件应用下面的规则
 charset = utf-8 // 编码规则用utf-8
 indent_style = space // 缩进用空格
 indent_size = 2 // 缩进数量为2个空格
 end_of_line = lf // 换行符格式
 insert_final_newline = true // 是否在文件的最后插入一个空行
 trim_trailing_whitespace = true // 是否删除行尾的空格

7.8 vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件可以导出一个包含了下列某些选项的对象：

下面是个比较完整点的配置实例：

 // Vue.config.js 配置选项
 module.exports = {
   // 选项
   //  基本路径
   publicPath: "./",
   //  构建时的输出目录
   outputDir: "dist",
   //  放置静态资源的目录
   assetsDir: "static",
   //  html 的输出路径
   indexPath: "index.html",
   //文件名哈希
   filenameHashing: true,
   //用于多页配置，默认是 undefined
   pages: {
     index: {
       // page 的入口文件
       entry: 'src/index/main.js',
       // 模板文件
       template: 'public/index.html',
       // 在 dist/index.html 的输出文件
       filename: 'index.html',
       // 当使用页面 title 选项时，
       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
       title: 'Index Page',
       // 在这个页面中包含的块，默认情况下会包含
       // 提取出来的通用 chunk 和 vendor chunk。
       chunks: ['chunk-vendors', 'chunk-common', 'index']
     },
     // 当使用只有入口的字符串格式时，
     // 模板文件默认是 `public/subpage.html`
     // 如果不存在，就回退到 `public/index.html`。
     // 输出文件默认是 `subpage.html`。
     subpage: 'src/subpage/main.js'
   },
   //  是否在保存的时候使用 `eslint-loader` 进行检查。
   lintOnSave: true,
   //  是否使用带有浏览器内编译器的完整构建版本
   runtimeCompiler: false,
   //  babel-loader 默认会跳过 node_modules 依赖。
   //  兼容ie
   transpileDependencies: [ /* string or regex */],
   //  是否为生产环境构建生成 source map？
   productionSourceMap: true,
   //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
   crossorigin: "",
   //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
   integrity: false,
   //  调整内部的 webpack 配置
   configureWebpack: () => { }, //(Object | Function)
   chainWebpack: () => { },
   // 配置 webpack-dev-server 行为。
   devServer: {
     open: process.platform === 'darwin',
     host: '0.0.0.0',
     port: 8080,
     https: false,
     hotOnly: false,
     //  配置服务器代理
     proxy: {
       '/api': {
         //  需要代理的域名
         target: "http://api.example.com",
         //  开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求
         changeOrigin: true,
         //  是否开启websockets
         ws: false,
         secure: false,
         //  重写匹配的字段，如果不需要在请求路径上，重写为""
         pathRewrite: {
           "^/api": ""
         }
       },
       '/foo': {
         target: '<other_url>'
       }
     }, // string | Object
     before: app => { }
   },
   // CSS 相关选项
   css: {
     // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
     // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
     extract: true,
     // 是否开启 CSS source map？
     sourceMap: false,
     // 为预处理器的 loader 传递自定义选项。比如传递给
     // Css-loader 时，使用 `{ Css: { ... } }`。
     loaderOptions: {
       css: {
         // 这里的选项会传递给 css-loader
       },
       postcss: {
         // 这里的选项会传递给 postcss-loader
       }
     },
     // 为所有的 CSS 及其预处理文件开启 CSS Modules。
     // 这个选项不会影响 `*.vue` 文件。
     modules: false
   },
   // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
   // 在多核机器下会默认开启。
   parallel: require('os').cpus().length > 1,
   // PWA 插件的选项。
   // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
   pwa: {},
   // 三方插件的选项
   pluginOptions: {
     // ...
   }
 }

8. 多环境配置

日常项目中我们可能有多个环境，常见的开发、测试和生产，它们的接口地址和执行操作也是不一样的，所以我们需要配置不同的环境，就拿基本的开发、测试、生产三个环境来说。

首先在根目录下新建.env.dev、.env.test、.env.prod文件(开发、测试、生产)

 内容待续。。。