vue-cli 3.x搭建项目

一、安装 @vue/cli

更新到3.x之后，vue-cli的包名从vue-cli改成了@vue/cli

如果之前全局安装了旧版本的vue-cli（1.x或2.x），首先需要使用一下命令卸载掉

//如果没有安装就版本的vue-cli可以跳过卸载直接安装
npm uninstall vue-cli -g

然后重新安装新版本的@vue/cli

npm install -g @vue/cli

安装完成后，可以使用vue -V（这个V是大写的）查看版本号

二、创建项目

vue create project-name

这里的project-name是自定义的项目名称，命令执行之后，会生成对应文件夹

三、参数详解

使用create命令创建项目的时候，有很多配置项需要选择

首先需要选择模块

第一个是我之前配置过的

第二个是默认选项

第三个就是根据自己需求来选择

这里我们选择第三个：

按空格键选择后，回车进入下一步

这里需要选择路由模式，y是history模式，n是hash模式，项目通常用history模式

 

然后选择一个合适css的预编译工具，这里选择了第二个

选择ESLint的检验规则，格式化的时机，和各个插件的配置项，这里选择了标准的ESLint + Standard config

 

选择校验的时候，这里默认选第一个，保存的时候校验

配置文件是单独存还是写在package.json，这里选择第一个，单独存

是否将这些配置保存在以后项目的预设，就是我们刚开始看到的那个配置，这里输入N

完了之后就开始安装了。。。

项目生成之后，就可以直接启动项目了：

四、vue.config.js

完成上面步骤之后，就可以开发vue项目了，有时候没有办法满足定制化的开发需求，这个时候就需要手动创建一个vue.config.js，，官网的配置文档可以参考一下，这里贴一个网上找来的

// vue.config.js
module.exports = {
  baseUrl: '/',
  outputDir: 'dist', // 打包的目录
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  devServer: {
    open: true, // 启动服务后是否打开浏览器
    host: '0.0.0.0',
    port: 8088, // 服务端口
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },
}

vue.config.js还有很多牛逼的配置项，可以根据需求研究一下官方文档

五、环境变量

有时候我们的项目要有几种模式：

开发模式：development、测试模式test、生产模式production

而开发中通常会根据环境变量NODE_ENV来进行区分这三种开发模式

然后进行判断

而3.x的项目中就不需要这样写了，直接在根目录下创建以.env为前缀的文件

然后再文件内添加对应的键值对（这里的命名需要注意，要用VUE_APP_开头才有效果）

然后在package.json的scripts命令中添加对应的mode

//serve、bulid都有默认的模式，但最好是将模式显示的展现在配置项中