vue-cli3.0 创建项目流程

最近刚好在做vue相关项目，于是想试一下vue-cli3.0，下面是使用后的一些记录，方便以后查看

安装vue-cli3.0

vue-cli3.0 的包名称由 vue-cli 改成了 @vue/cli。 如果之前有全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。这里我用的是yarn。卸载完后用下面的命令全局安装

yarn global add @vue/cli

创建项目

vue create project-name

输入命令后要让你选择创建方式，default是默认，manully是手动，第一次建议手动创建，可以根据自己的需要来创建，创建完后会让你选择是否此配置，前面那两个就是我之前创建时保存的，下次如果要用的话直接选择就行了。

image

目录结构

vue-cli3.0的目录结构相比之前的简洁了很多，去掉了build文件夹和config文件夹，多了public文件夹。

public文件夹里有一个index.html，这是模板文件，默认是index.html，如果你是开发多页面而且有不同模板文件的可以新建多个模板文件。

image

src里有components和assets文件夹，components是放自定义组件的，assets是放一些静态资源的，比如图片、样式、js等，你也可以在scr里新建文件夹来单独存放css或js，看你个人习惯。

App.vue和main.js就等于是一个页面了，main.js是入口文件，App.vue是页面文件，一个入口文件对应一个页面文件，如果你有多个页面，可以新建一个pages文件夹，比如下面这种，每一个文件夹对应一个页面，里面分别是入口文件和页面文件，但是要在 vue.config.js 里配置 pages

相关配置可以在 vue.config.js 中配置，具体配置请点击https://cli.vuejs.org/zh/config/，这里说下我用到的配置

vue.config.js的配置

在src同级目录下新建vue.config.js文件，内容如下

module.exports = {
  publicPath: "./",
  pages: {
    index: {
      // page 的入口
      entry: "src/pages/index/index.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 
      title: "页面标题1",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    index2: {
      entry: "src/pages/index2/index2.js",

      template: "public/index.html",

      filename: "index2.html",

      title: "页面标题2",

      chunks: ["chunk-vendors", "chunk-common", "index2"]
    }
  }
};

• publicPath
  publicPath定义相对路径，这样在打包后图片路径就不会报错了

• pages
  页面配置，图中是定义了两个页面共用一个index.html模板

环境变量与模式的使用

vue-cli 提供了三种模式，分别是

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

具体介绍请看这里

我在目录下分别创建了三个文件，如下图所示：

image

.env.development 的内容如下：

NODE_ENV = development
VUE_APP_NODE_ENV = development

.env.qa 的内容如下：

NODE_ENV = production
VUE_APP_NODE_ENV = qa
outputDir = 'dist/qa'

.env.production 的内容如下：

NODE_ENV = production
VUE_APP_NODE_ENV = production
outputDir = 'dist/production'

NODE_ENV 是环境变量，VUE_APP_NODE_ENV 是该环境下的模式名称，在项目里使用模式一定要加上 VUE_APP_ 前缀，然后在项目里就可以通过 process.env.VUE_APP_NODE_ENV获取到当前模式了。。

环境变量可以帮助我们在开发时期和正式上线时期使用根据环境不同使用不同的变量，比如在开发时期后端一般会提供测试接口，这时候我们就可以在开发时期根据环境变量使用测试接口，等到了正式上线了打包了使用的就是线上的接口了，当然要提前写好接口配置文件，然后在package.json里配置命令，如下图所示：

image

在命令后面加上 --mode 模式值 就能指定模式打包了

最后

以上就是 vue-cli3.0 项目基本内容了，还有其它更加高级的内容得多看看文档才行