Vue – VueCLI 脚手架使用教程

简介

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的 Vue 项目的过程。 引用自 vue-cli 官网上的一句话：

程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。

中文官网：https://cli.vuejs.org/zh/

使用方法

安装 vue/cli

安装node.js包后，在CMD中运行 npm 安装命令

npm i @vue/cli -g

-g 表示全局安装，非安装在某个目录里，如果是只对某个项目增加库，可使用 -D  指令

安装完成后，可在 CMD 中执行 vue -V  查询版本号。

创建 Vue 应用项目

在 CMD 中运行 vue create 项目名 ，项目名称尽量不在使用中文和中文路径，会出现选项

选择预设项

Default 默认提供 Vue 2 , babel 打包插件，ESLine 语法检查

选择后直接创建项目

Default 默认提供 Vue 3 , babel 打包插件，ESLine 语法检查

选择后直接创建项目

Manually select features 手动选择需要的套件

需要用户选择在项目中安装那点功能：

Choose Vue version 选择 Vue 版本

Babel ES6编译打包器

TypeScript 选择TS语言包

Progressice Web App Support 渐进式Web框架

Router Vue路由模块

VueX Vue数据仓库模块

CSS Pre-processors CSS样式预处理器

Linter / Formatter 语法标准化规范（开发环境不建议安装）

Unit Testing 单元测试模块

E2E Testing E2E测试模块

选择Vue版本

2.x

3.x

选择 CSS 解析器

Sass/SCSS (With dart-sass)

Sass/SCSS (With dart-sass)

Less

Stylus

像 Babel，ESLint 之类的三方插件的配置文件，要独立配置文件，还是放到package.json 文件中

In deicated config files 独立放置配置文件（推荐，每个插件的配置文件应单独存在）

In package.json 都存放到package.json文件中（不推荐）

选择 ESLint 语法规范

ESLint with error prevention only  仅对语法错误做提示
ESLint + Airbnb config  使用 Airbnb 风格语法
ESLint + Standard config  使用 标准 风格语法 (推荐)
ESLint + Prettier  使用 Prettier  风格语法

Lint on save 保存时进行语法检查

Lint and fix on commit  提交代码时进行语法检查

是否把刚才选择的选项作为一个预设，方便你以后一键选择。