初始化项目

图形化界面创建项目

图形化界面创建项目，命令行运行：
```
vue ui
```
在弹出页面中，进行项目创建相关配置：

插件安装

Element-UI

在项目管理中心选定进行管理的项目
选择导航中的“插件”，进入插件管理
在插件管理页面中点击“添加插件”，进入添加页面
搜索插件：vue-cli-plugin-element，选择后点击“安装插件”
插件安装完成，配置插件：将“全导入 fully import”改为“按需导入 import on demand”，再点击“完成安装”

依赖安装

运行依赖

在项目管理中心选定进行管理的项目
选择导航中的“依赖”，点击进入依赖管理
在依赖管理页面中点击“安装依赖”，进入添加页面
弹出框中选择“运行依赖”

Axios

用于发起请求

搜索依赖：axios，选择后点击“安装”

使用方法：

1）在 main.js 文件中导入 axios 包并配置

// 导入 axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:3000/api/v1'
// Vue 挂载 axios，使用 this.$http 可使用
Vue.prototype.$http = axios

2）在 vue 文件中调用：例 login.vue 中登录发起 this.$http.post 请求

/**
* 登录
*/
login: function () {
    this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
        	return;
        }
        // 验证成功，发起登录 post 请求
        // 该 post 请求返回是一个 Promise，可使用async-await进行简化
        // 将返回结果中的 data 属性重命为 res
        const { data: res } = await this.$http.post('/user/login', this.loginForm);
        if (res.meta.status !== 200) {
            // 登录失败
        	...
        } else {
            // 登录成功
            ...
        }
    });
},

nprogress

用于页面加载时显示进度条

搜索依赖：nprogress，安装

使用方法：

在 main.js 中导入 nprogress 包对应的JS和CSS文件

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

在 axios 的 request 拦截器中展示进度条：

axios.interceptors.request.use(config => {
  // config 为请求对象
  // 展示进度条
  NProgress.start()
  // 预处理 config
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem('token');
  // 在最后必须
  return config;
})

在 axios 的 response 拦截器中隐藏进度条：

axios.interceptors.response.use(config => {
    // 隐藏进度条
    NProgress.done()
    // 在最后必须
    return config;
})

开发依赖

在项目管理中心选定进行管理的项目
选择导航中的“依赖”，点击进入依赖管理
在依赖管理页面中点击“安装依赖”，进入添加页面
弹出框中选择“开发依赖”

Font Awesome

npm安装免费版本：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
 @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome --save

在 main.js 中引入组件：

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
// 如果确实需要下面的图标就把注释取消
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'

// library.add与import对应
library.add(fas)
// library.add(far)
// library.add(fab)

import {
    FontAwesomeIcon,
    // FontAwesomeLayers,
    // FontAwesomeLayersText
} from '@fortawesome/vue-fontawesome'

Vue.component('font-awesome-icon', FontAwesomeIcon)
// Vue.component('font-awesome-layers', FontAwesomeLayers)
// Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

使用：在vue组件或html文件中需要使用图标的位置使用下面的方式将图标插入到文档中

<!--
icon属性设置动态绑定（不带冒号）时，属性值就是图标名称，默认使用fas库
-->
<font-awesome-icon icon="spinner" />
<!--
icon属性设置动态绑定（带冒号）时，属性值为数组，
数组第2个元素是图标库，如fas、far、fab等
数组第2个元素是图标名称
-->
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
<!--
fixed-width属性用于让图标统一宽度
-->
<font-awesome-icon :icon="['fas', 'angle-double-right']" fixed-width />
<!--
通过size属性设置图标大小
-->
<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />
<!--
通过rotation属性控制图标的呈现角度
-->
<font-awesome-icon icon="spinner" rotation="270" />
<!--
通过flip属性控制控制图标翻转
-->
<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />
<!--
通过spin和pulse属性让图标旋转、跳动
-->
<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />
<!-- ……不一一列举了，更多的花样就参考官方文档好了 -->

Less-Loader

用于样式表达式less语法

搜索依赖：less，安装less和less-loader
若出现报错：this.getOptions is not a function at Object.lessLoader

原因：大概率为webpack和less-loader版本兼容问题导致的

解决：将现有的less和less-loader卸载，重新在Terminal中安装指定版本的less和less-loader
```
npm install less@3.9.0  less-loader@5.0.0 -s
```

babel-plugin-transform-remove-console

用于移除项目中的console命令行

搜索安装

使用方法：

在 babel.config.js 中，根据当前运行模式进行插件的添加

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
    // 产品处于发布模式
    prodPlugins.push('transform-remove-console')
}
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ],
        // 发布阶段时的插件数组 ... 用于展开数组
        ...prodPlugins
    ]
}

项目优化

1. 生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成方式2种：

通过命令行参数的形式生成报告：

// 通过 vue-cli 的命令选项可以生成打包报告

// --report 选项可以生成 report.html 以帮助分析包内容

vue-cli-service buid --report

通过可视化的UI面板直接查看报告（推荐）：

在可视化的UI面板中，通过仪表盘和分析面板，可以方便地看到项目中所存在的问题

2. 通过 vue.config.js 修改 webpack 的默认配置

如果要修改 webpack 默认配置，可以在项目根目录中，按需创建 vue.config.js 配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考 cli.vuejs.org/zh/config/#…

// vue.config.js
// 在这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
	// 选项...
}

3. 为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，可以为两种模式各自指定打包的入口文件，即：

开发模式的入口文件为：src/main-dev.js
发布模式的入口文件为：src/main-prod.js

4. configureWebpack 和 chainWebpack

在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来定义 webpack 的打包配置。

chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置

configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置

4.1 通过 chainWebpack 自定义打包入口

module.exports = {
	chainWebpack: config => {
        // 产品发布模式，使用 src/main-prod.js 做入口文件
		config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
        })

        // 产品开发模式，使用 src/main-dev.js 做入口文件
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
	}
}

5. 通过externals加载外部CDN资源

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大。

为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。

vue.config.js 中，在产品发布模式里，具体配置代码如下：

module.exports = {
	chainWebpack: config => {
        // 发布模式
		config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
			// 使用 externals 节点
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
        })
	}
}

在 public/index.html 文件的头部，添加 external 节点中的依赖项的 CDN 资源引用，注意版本号

<!-- nprogress 样式表 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css">
<!-- 富文本 样式表 -->
<!-- 查看引用的 quill 组件的css样式版本后，获取对应CDN的资源 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css">

在 public/index.html 文件的头部，添加 external 节点中的依赖项的 CDN 的JS，注意版本号

<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的js -->
<script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>

删除原 ./src/main-prod.js 中第三方依赖的样式表引用，重新运行 build 命令进行打包

6. 通过CDN优化 ElementUI 打包

操作流程：

在 ./src/main-prod.js 中，注释掉 element-ui 按需加载的代码
```
// import './plugins/element.js'
```

在 ./public/index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

<!-- element-ui -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css">
<script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>

重新运行 build 命令进行打包

7. 首页内容定制

不同的打包环境下，首页内容可能会有所不同。可以通过插件的方式进行定制，配置如下：

在 vue.config.js 中配置打包项：

module.exports = {
	chainWebpack: config => {
        // 发布模式
		config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')

            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
            
            // 1. 查找 html 插件
            // 2. 通过 tap 链式操作找到 args 参数，并为其添加属性 isProd = true
            // 3. 返回 args 参数
            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })
        })

        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')

            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        })
	}
}

在 ./public/index.html 中，可以根据 isProd 的值，来决定如何渲染页面结构：

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %><%= htmlWebpackPlugin.options.title %></title>
<!-- isProde==true，为发布模式，此时依赖项由index.html中进行导入 -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css">
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>
<% } %>

8. 路由懒加载

打包构建项目时，JavaScript 包会变得非常大，影响页面加载。

若我们能将不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，就会更加高效了。

路由懒加载详细文档：router.vuejs.org/zh/guide/ad…

操作步骤：

在开发依赖中安装 @babel/plugin-syntax-dynamic-import 包

在 babel.config.js 配置文件中声明该插件

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ],
        ...prodPlugins,
        
        // 声明该依赖插件
        "@babel/plugin-syntax-dynamic-import"
    ]
}

将路由改为按需加载的形式，示例如下：

// Foo 为组件名
// /* webpackChunkName:"group-foo" */ 为路由分组
// 即Foo和Bar为同一分组group-foo，请求Foo的同时会一起返回Bar。而Test在group-test分组中，不会被返回
// ‘./Foo.vue’ 为组件路径
const Foo = () => import(/* webpackChunkName:"group-foo" */ './Foo.Vue')
const Bar = () => import(/* webpackChunkName:"group-foo" */ './Bar.Vue')
const Test = () => import(/* webpackChunkName:"group-test" */ './Test.Vue')

实际使用 ./src/router.js ：

/*
// 原导入组件方式
import Login from './views/Login.vue';
import Home from './views/Home.vue';
import Welcome from './views/Welcome.vue';
*/

// 路由懒加载方式
// 将Login、Home、Welcome三个组件分在login_home_welcome分组中
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './views/Login.vue');
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './views/Home.vue');
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ './views/Welcome.vue');

重新 build

项目上线

1. 项目上线相关配置

1.1 通过 node 创建 web 服务器

创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹托管为静态资源即可，关键代码如下：在 app.js中

const express = require('express')
// 创建web服务器
const app = express()
// 托管静态资源
app.use(express.static('./dist'))
// 启动web服务器
app.listen(80, () => {
    console.log('web server running at http://127.0.0.1')
})

1.2 开启 gzip 配置

使用 gzip 可以减小文件体积，使传输速度更快。

可以通过服务器端使用 Express 做 gzip 压缩，配置如下：

安装相应包：
```
npm install compression -S
```

在 app.js 中导入包，并启用中间件：

// 导入包
const compression = require('compression');
// 启用中间件
// 一定要放在 静态资源托管 之前
app.use(compression());
app.use(express.static('./dist')); // 静态资源托管

1.3 配置 HTTPS 服务

申请 SSL 证书：

进入 freessl.cn/ 官网，输入要申请的域名并选择品牌
输入自己的邮箱并选择相关选项
验证 DNS（在域名管理后台添加TXT记录）
验证通过后，下载 SSL 证书（full_chain.pem 公钥；private.key 私钥）

在后台项目添加 SSL 证书文件，在 app.js 中导入证书：

const https = require('https');
const fs = require('fs');
const options = {
	cert: fs.readFileSync('./full_chain.pem'),
    key: fs.readFileSync('./private.key')
};
https.createServer(options, app).listen(443);

1.4 使用 pm2 管理应用

在服务器中全局安装pm2：
```
npm install pm2 -g
```

启动项目：

pm2 start 启动脚本（入口文件） --name 自定义网站名称

例：运行 D:\Study\Vue\Lesson5\vue_shop_server项目：

D:\Study\Vue\Lesson5>cd vue_shop_server
D:\Study\Vue\Lesson5\vue_shop_server>pm2 start .\app.js --name web_vueShop

查看运行项目：
```
pm2 ls
```

重启项目：

pm2 restart 自定义网站名称（或pm2中该网站的id）

停止项目：

pm2 stop 自定义网站名称（或pm2中该网站的id）

删除项目：

pm2 delete 自定义网站名称（或pm2中该网站的id）

VSCode 使用注意项

1. 格式化代码

在项目中创建 .prettierrc 文件，内容如下：

{
  "tabWidth": 4,       // 每个tab所使用的空格数
  "semi": true,        // 结尾使用";"
  "singleQuote": true, // 双引号变为单引号
  "printWidth": 200    // 每行的字节长度
}

修改 .eslintrc.js 文件，内容如下：

rules: {
	......
    'semi': 'off', // 结尾符号
    'comma-dangle': 'off',
    'indent': ['error', 4, {"SwitchCase": 1}], // 每个tab使用4个空格
    'space-before-function-paren': 'off',
}

代码中鼠标右键选择 Format Document，或键盘快捷键 Shift+Alt+F，格式化代码

vue-cli使用

初始化项目

图形化界面创建项目

插件安装

Element-UI

依赖安装

运行依赖

Axios

nprogress

开发依赖

Font Awesome

Less-Loader

babel-plugin-transform-remove-console

项目优化

1. 生成打包报告

2. 通过 vue.config.js 修改 webpack 的默认配置

3. 为开发模式与发布模式指定不同的打包入口

4. configureWebpack 和 chainWebpack

4.1 通过 chainWebpack 自定义打包入口

5. 通过externals加载外部CDN资源

6. 通过CDN优化 ElementUI 打包

7. 首页内容定制

8. 路由懒加载

项目上线

1. 项目上线相关配置

1.1 通过 node 创建 web 服务器

1.2 开启 gzip 配置

1.3 配置 HTTPS 服务

1.4 使用 pm2 管理应用

VSCode 使用注意项

1. 格式化代码