Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目

Vue Cli 3 官方文档：https://cli.vuejs.org/zh/guide/

 

1、安装 @vue/cli

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

若是以前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先须要使用如下命令卸载掉

// 若是没有安装旧版本的 vue-cli 能够跳过卸载直接安装

npm uninstall vue-cli -g # OR
yarn global remove vue-cli 

而后从新安装新版本的 @vue/cli

npm install -g @vue/cli
# OR yarn global add @vue/cli

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

 

 

2、建立项目的三种方式

1.x 和 2.x 的的 vue-cli 采用 init 命令建立项目

vue init webpack project-name

3.x 也支持这种方式，其运行结果和之前同样，详情能够参考《Vue 爬坑之路（一）》

 

但刚入行的前端萌新可能还不习惯命令行的构建方式

因而 vue/cli 3.x 新增了图形化的方式来建立项目

首先仍是得在指定目录下打开终端，而后运行：

vue ui

而后浏览器会打开一个页面，能够按照页面将的引导建立项目

 

不过我仍是建议使用命令行工具，这才符合一个程序员的身份嘛

vue create project-name

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

 

 

3、参数详解

使用 create 命令建立项目的时候，有不少配置项须要选择

若是对某项配置项不熟悉，能够直接选择第一个选项

 

首先须要选择模块

若是选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）

 

这里推荐选择第二项 Manually select features

而后根据本身的需求，使用空格键选择具体的模块

若是不熟悉上面的模块分别表明什么，能够先按照上图的示意勾选模块

这样就会建立一个包含 vue-router、vuex 和 postcss 的项目

关于 vue-router 和 vuex 能够参考我以前的博客：

《Vue 爬坑之路（三）—— 使用 vue-router 跳转页面》

《Vue 爬坑之路（四）—— 与 Vuex 的第一次接触》 

 

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

这里须要选择路由模式，yes 是 history 模式，no 是 hash 模式

萌新能够先从 hash 模式入手，不过实际项目一般采用 history 模式

 

而后选择一个合适 CSS 的预编译工具

 

都不熟悉的话就选 sass 或者 less，由于 stylus 不支持原生 CSS 写法

 

后面还须要选择 ESLint 的校验规则，格式化的时机，和各个插件的配置项的位置，不熟悉的话就选第一个

 

而后就有了这样的过程：

最后选择是否将配置项保存为预设，而后配置完成，开始生成项目

 

项目生成以后，已经自动安装了相关的依赖项，这时候能够直接启动项目：

npm run serve

 

 

4、vue.config.js

完成以上步骤以后，就已经能够开发 vue 项目了，但没法知足定制化的开发需求

这时候就须要手动建立一个 vue.config.js，官方的配置文档能够参考这里

这里我贴一个经常使用的 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: 8080, // 服务端口
    https: false, hotOnly: false, proxy: null, // 设置代理
    before: app => {} }, }

vue.config.js 还有不少很厉害的配置项

好比构建多页面应用的 pages、改造为 pwa 的配置项 pwa、高级 CSS 打包方案  css

这里就不细说了，若是有兴趣能够仔细研究官方文档

 

 

5、环境变量

有过必定开发经验的小伙伴都知道，一个项目一般有三种模式：

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

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

而后经过不少的 switch... case 来判断

 

而 3.x 的项目中就不须要写 switch...case 了

直接在根目录下建立以 .env 为前缀的文件

这里的 .env 文件保存的是公用参数，能够在全部模式中获取到

而其余文件中的参数，只能在对应模式中获取到

好比 .env.development 中的参数，就只有在 development 模式下生效

 

而后在文件内添加对应的键值对

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

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

 

而后就能在项目中获取到对应模式下的值

 关于环境变量和模式的详情，能够参考官方文档