vue项目构建——使用 vue-cli 3.X 搭建项目

Vue Cli 3 官方文档：介绍 | Vue CLI

一、安装 @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一定要是大写的）

二、创建项目的三种方式

1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目      vue init webpack project-name

3.x的创建项目：
①、vue init webpack project-name
②、图形化方式：   运行vue ui（然后浏览器会打开一个页面，可以按照页面将的引导创建项目）
③、vue create project-name

三、create方式创建项目参数详解

提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd'你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。直接使用windows的cmd黑窗口不需要这么设置。

    1、选择模块

如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）
如果选择第二项 Manually select features，需要然后根据自己的需求，使用空格键选择具体的模块

勾选之后，使用回车键进入下一步

    2、选择路由模式，yes 是 history 模式，no 是 hash 模式

    3、选择css的预编译工具      

    接下来需要选择 ESLint 的校验规则，格式化的时机，和各个插件的配置项的位置，不熟悉的话就选默认

    接下来就生成项目的过程了，最后你可以选择将已选项保存为一个将来可复用的 preset

运行  npm run serve  启动项目

四、对于项目中的个性化需求，可以手动创建一个 vue.config.js，进行具体的配置
官网配置文档配置参考 | Vue CLI

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

五、环境变量配置，直接在根目录下创建以 .env 为前缀的文件 

 其中 .env 文件保存的是公用参数，可以在所有模式中获取到。而其他文件中的参数，只能在对应模式中获取到。
然后在文件内添加对应的键值对。

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

然后就能在项目中获取到对应模式下的值   eg: console.log(process.env.AUTHOR)。

详细内容参考官网：模式和环境变量 | Vue CLI

原文章地址：Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目 - Wise.Wrong - 博客园