如何用 Vue CLI 4.X 手动创建一个项目

简介

Vue CLI 作为 Vue 的官方脚手架，降低了开发者对于 webpack 的配置成本，便于快速构建项目。

说明

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载后再安装。

安装

通过以下2种方式安装：

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

安装成功后，可以执行命令来查看版本是否正确：

`vue -V`

项目创建

创建项目前先配置git用户名和邮箱： 

git config --global user.name "username" git config --global user.email "email" （这里的username是你想要输入的用户名，email是你想要设定的邮箱）

执行创建指令，并填写项目名称：vue-demo

vue create vue-demo

是否使用淘宝镜像：Y/回车

Your connection to the default npm registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)        // 推荐国内开发者

选择配置类型：Manually select features

上下键移动、回车键确定
其中My First Preset 为之前保存过的配置方案

Vue CLI v4.5.15 ? Please pick a preset: (Use arrow keys)   Default ([Vue 2] babel, eslint)         // 默认 Vue 2.0 版本   Default (Vue 3) ([Vue 3] babel, eslint)         // 默认 Vue 3 版本   Manually select features        // 手动配置

选择项目中所需要的特性（依自身项目而定）：Babel, Router, Vuex, CSS Pre-processors, Linter

空格键选定、A键全选、I键反选

? Check the features needed for your project: >( ) Choose Vue version        // 选择 Vue 版本，默认 Vue 2  (*) Babel        // Babel 编译  ( ) TypeScript        // TypeScript 编译器  ( ) Progressive Web App (PWA) Support        // PWA 的支持  (*) Router        // vue 路由  (*) Vuex        // vue 状态管理器  (*) CSS Pre-processors        // CSS 预处理器  (*) Linter / Formatter        // 代码检测和格式化  ( ) Unit Testing        // 单元测试  ( ) E2E Testing        // 端对端测试

序号	选项	描述	选择
1	Choose Vue version	选择Vue版本
2	Babel	vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5	Y
3	TypeScript	TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源
4	Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持
5	Router	路由	Y
6	Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化	Y
7	CSS Pre-processors	CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。	Y
8	Linter / Formatter	格式化程序	Y
9	Unit Testing	单元测试
10	E2E Testing	端到端（end-to-end）

路由的配置选项：Y/回车

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)        // 是否使用 history 模式作为 Vue 的路由（n） 默认hash

选择 CSS 预处理器方案：Sass/SCSS (with dart-sass) 

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) > Sass/SCSS (with dart-sass)    Sass/SCSS (with node-sass)    Less    Stylus

选择代码检测和格式化方案：ESLint + Standard config

? Pick a linter / formatter config:   ESLint with error prevention only        // 只检测错误   ESLint + Airbnb config        // ESLint + Airbnb 规范风格 > ESLint + Standard config        // ESLint + standardJs 规范风格   ESLint + Prettier        // ESLint + Prettier 代码格式化工具

选择何时进行代码检测：Lint on save, Lint and fix on commit

? Pick additional lint features: >(*) Lint on save        // 保存时进行检测  (*) Lint and fix on commit        // fix 和 commit 时候检查

选择（Babel、PostCSS、ESLint）自定义配置的存放位置：

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? > In dedicated config files        // 单独保存各自配的置文件(推荐)   In package.json        // 放在 package.json 内

是否保存当前配置：Y/回车

? Save this as a preset for future projects? (y/N)  // 是否保存现在的配置，作为未来项目的预配置

输入保存的配置名称：MyPreset

保存配置之后，在以后执行创建指令时会多出此选项，选择该配置便能跳过配置直接安装。

? Save preset as: MyPreset  // 输入存档名称

开始项目初始化：

Vue CLI v4.5.15 ✨  Creating project in D:\Vue\vue-demo. 🗃  Initializing git repository... ⚙️  Installing CLI plugins. This might take a while... ... 🎉  Successfully created project edu-boss-fed. 👉  Get started with the following commands:  $ cd edu-boss-fed  $ npm run serve ... // 如果没有设置用户名和邮箱会警告  WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself.

初始化完毕后，可以通过命令启动项目：

$ cd edu-boss-fed $ npm run serve

此时查看根目录package.json文件，能够看到scripts配置中除了serve，还包含生产构建（build）、代码规范检测（ lint）这两个执行命令。

"scripts": {   "serve": "vue-cli-service serve",   "build": "vue-cli-service build",   "lint": "vue-cli-service lint" }

至此，一套基于Vue CLI 4.x构建的项目，雏形已完成。