参考

https://cli.vuejs.org/zh/

概述

Vue.js 开发的标准工具

起步

安装、检查版本、升级全局@vue/cli，升级项目中的 Vue CLI 相关模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 检查版本
vue --version

# 升级
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

# 升级项目插件
vue upgrade @vue/cli-plugin-eslint
用法： upgrade [options] [plugin-name]
options 选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

创建一个项目

1
2
3
vue create my-project
# OR
vue ui

在项目中安装插件

1
2
3
4
5
6
7
vue add eslint
vue add @vue/eslint

# vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。
# 这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器
# 等价于
vue add cli-plugin-eslint

CLI 服务

参考：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令

默认 preset 的项目的 package.json：

1
2
3
4
5
6
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

你可以通过 npm 或 Yarn 调用这些 script：

1
2
3
4
5
npm run serve
# OR
yarn serve
# OR
npx vue-cli-service serve

配置参考

vue.config.js

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
devServer: {  
		// 开发环境跨域情况的代理配置
          proxy: {
            // 【必要】访问自己搭建的后端服务器
            '/api': {
              target: url,
                changOrigin: true,
                  ws: true,
                    secure: false,
                      pathRewrite: {
                        '^/api': '/'
                      }
            },
            // 【范例】访问百度地图的API
            // vue文件中使用方法  this.$http.get("/baiduMapAPI/place/v2/search"
            // 最终实际访问的接口为  http://api.map.baidu.com/place/v2/search
            // 遇到以/baiduMapAPI开头的接口便使用此代理
            '/baiduMapAPI': {
                // 实际访问的服务器地址
                target: 'http://api.map.baidu.com',
                //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端和服务端进行数据的交互就不会有跨域问题
                changOrigin: true,
                ws: true,  // 是否启用websockets
                secure: false, // 使用的是http协议则设置为false，https协议则设置为true
                // 将接口中的/baiduMapAPI去掉（必要）
                pathRewrite: {
                    '^/baiduMapAPI': ''
                }
            },
        }
    }