vue-cli3.x项目搭建(vue-cli2.x升级为vue-cli3.x后构建项目)

一、vue-cli2.x.x 版本卸载。

npm uninstall -g vue-cli

二、vue-cli3.x.x 版本安装。

npm install -g @vue/cli

注意：3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
三、检测vue版本。

vue -V

四、创建项目

// project-name为项目名称
vue create project-name

五、按下enter键之后对应的详细内容
1、

001.png

2、当选择后对应的配置后会按下回车键会出现如下图所示的内容:

002.png

Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，目前较少人再用
Progressive Web App (PWA) Support 渐进式Web应用程序
Router vue-router（vue路由）
Vuex vuex（vue的状态管理模式）
CSS Pre-processors CSS 预处理器（如：less、sass）
Linter / Formatter 代码风格检查和格式化（如：ESlint） (注意：若不选择该项可省略以下的第5步和第6步，建议不选该项，不然运行过程中命令窗口会一直进行代码检查)
Unit Testing 单元测试（unit tests）
E2E Testing e2e（end to end） 测试

注：这里可以选择用那些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步

3、这里我选择了常用到几个选项：Babel、Router、Vuex、CSS Pre-processors。（注：绿色图标是代表被选中的选项*）如下：

003.png

4、按下enter键之后，因为我选择添加了 Router 所以这里会问我需不需要使用history模式，如果需要选择Y然后进行下一步：

004.png

5、按下enter键之后，是你安装哪一种 CSS 预处理语言，可以根据自己的习惯选择，我选择的是scss。

005.png

6、按下enter键之后，询问你选择哪个自动化代码格式化检测，我选择的是ESLint + Prettier。

006.png

7、按下enter键之后，询问你选择哪个语法检查方式，第一个选项是保存就检测；第二个是fi on commit的时候检测；这里我选择的是第一个选项 Lint on save。

007.png

8、按下enter键之后，下面这两个选项是问像 babel、postcss、eslint这些配置文件放哪？第一个选项是：放独立文件放置，第二个选项是：放package.json里，这里推荐放独立文件中。

008.png

9、按下enter键之后，询问你是否将以上这些配置保存为未来项目的预配置？这里我选择了y.

009.png

10、按下enter键之后，就到了最后一个，最后一个是描述项目，你可以选择对应的项目描述，也可以不选择描述。

010.png

11、按下enter键之后，等待下载：

// 下载完成之后 -- 进入到项目根目录
cd project-name 

// 进入到对应的目录，启动项目 -- 注意：和 vue-cli2.X 的启动命令不同啦
npm run serve

12、完成以上步骤之后，就已经可以开发 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 => {}
  },
}