最新版Vue-cli4.x建立项目

本文章针对新手的小伙伴们 , 怎么用最新版脚手架建立项目以及掌握项目结构和配置等等.

关于旧版本

Vue CLI 的包名称由 vue-cli 改为了 @vue/cli。 若是你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你须要先经过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 4.x 须要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装

npm install -g @vue/cli
# 或者
yarn global add @vue/cli
复制代码

使用 vue --version 查看vue脚手架版本并确认是否安装成功。

vue --version
复制代码

配置

运行如下命令来建立一个新项目

vue create 项目名称
复制代码

输入项目名字,进行项目配置

? Please pick a preset: (Use arrow keys)
  20190907 ([Vue 2] router, less, babel, eslint) // 之前保存的自定义配置项
  Default ([Vue 2] babel, eslint)  // 默认建立Vue2项目
  Default (Vue 3) ([Vue 3] babel, eslint) // 默认建立Vue3项目
❯ Manually select features // 自意义配置项
复制代码

若是选择default则会直接建立项目，建立项目包括babel\eslin这些工具，好比Router/Vuex等其余依赖须要本身手动安装。

若是选择Manually select features(手动安装)则会进入下一步选项：（这里推荐你们进行手动配置）

? Check the features needed for your project: 
 ◉ Choose Vue version 	// 选择Vue版本
 ◉ Babel 	// vue项目中广泛使用es6语法，但有时咱们的项目须要兼容低版本浏览器，这时就须要引入babel插件，将es6转成es5
 ◉ TypeScript 	// typeScript经过添加类型来扩展JavaScript。
 ◯ Progressive Web App (PWA) Support 	// 渐进式Web应用程序（PWA）支持
 ◯ Router 	// 是否使用路由
 ◯ Vuex 	// 是否使用Vuex
 ◯ CSS Pre-processors 	// 是否使用CSS预处理器,好比:less、sass等
❯◉ Linter / Formatter 	// 格式化程序
 ◯ Unit Testing 	// 单元测试
 ◯ E2E Testing	// 端到端
复制代码

如今项目开发若是用到TypeScript须要选择以上4个

选择版本:

? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x 
复制代码

是否使用class风格的组件语法，若是在项目中想要保持使用TypeScript的Class风格的话，能够选择y。

Use class-style component syntax? (y/N) 复制代码

使用Babel与TypeScript一块儿用于自动检测的填充:

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpili
ng JSX)? (Y/n) 
复制代码

ESlint的配置:

Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only     // 只进行报错提醒
  ESLint + Airbnb config                // 不严谨模式
❯ ESLint + Standard config              // 正常模式
  ESLint + Prettier                     // 严格模式
  TSLint (deprecated)                   // TypeScript格式验证工具
复制代码

校验时机:

​ 通常都会选择保存时校验，好及时作出调整，若是代码风格和ESLint校验风格差很少的话，或者比较自信比较帅的状况下，能够考虑选择提交时校验。惟惟诺诺的我，选择了第一项。

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
❯◉ Lint on save // 保存时检测
 ◯ Lint and fix on commit // 修复和提交时检测
复制代码

额外选项:

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files // 存放在专用配置文件中
  In package.json // 存放在package.json中
复制代码

是否保存当前配置项:

Save this as a preset for future projects? (y/N) 
复制代码

目录

|-- node_modules	// 项目须要的依赖包
|-- public              // 静态资源存储目录
|   |-- index.html	// 项目主容器文件
|   |-- favicon.ico	// 项目默认索引图片
|-- src
|   |-- assets		// 放置一些静态资源文件，例如图片、图标、字体 
|   |-- components	// 公共组件目录
|   |-- views	// 业务组件目录
|   |-- App.vue		// 顶层根基路由组件
|   |-- main.js		// 主入口文件
|   |-- router.js	// 路由配置文件
|-- .editorconfig	// 代码规范配置文件
|-- .eslintrc.js	// eslint代码规范检查配置文件
|-- .gitignore		// git上传须要忽略的文件格式
|-- babel.config.js	// babel配置文件
|-- package-lock.json	// 依赖包版本锁定文件
|-- package.json	// 项目基本信息配置文件
|-- postcss.config.js	// css预处理器配置文件
|-- vue.config.js	// webpack 配置文件(与webpack.config.js做用一致)
复制代码

打包相关参数

在package.json中直接配置便可

实时打包运行

npm run serve
复制代码

物理打包

npm run build
复制代码

打包同时生成分析报告

./node_modules/.bin/vue-cli-service build --report
复制代码

浏览器相关参数

在vue.config.js中直接配置，例如

module.exports = {
  lintOnSave: true,	// 在保存代码的时候开启eslint代码检查机制
  devServer: {		// 实时保存、编译的配置段
    open:true,		// 自动开启浏览器
    port: 12306		// 服务运行端口 
  }
}
复制代码