[vue]vue cli项目搭建详解vue cli 超详细教程，手把手教你看清vue cli，虽然vue-cli已经发布

一、安装nodejs

下载nodejs

官网进行nodejs下载，如下图所示，根据windows的版本选择32或64位的安装包下载，我是win10 所以我下载的是

下载好后，双击安装就可以了，我已经安装就不演示了。

检测nodejs安装

win+r打开运行，输入cmd后进入命令行界面。分别输入node -v和npm -v命令进行node的版本号和npm的版本号的查看。

npm -v
npm -v

出现下图，就安装好了。

二、安装vue-cli

vue-cli官网，可以去看看文档。

npm install -g @vue/cli

检查vue

安装好了之后输入 vue -V 查看版本

vue -V

三、搭建项目（重点）

1.进入一个目录，创建项目

vue create <Project Name> // 文件名不支持驼峰（含大写字母）

    vue create project-one

2.我们这里选择手动配置

按 ↓ 选择“Manually select features”，再按 Enter

3.选择你需要的配置项

通过↑ ↓ 箭头选择你要配置的项，按空格是选中，按 a 是全选，按 i 是反选

? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

( ) TypeScript//TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行

( ) Progressive Web App (PWA) Support//渐进式Web应用程序

( ) Router// vue-router(vue路由)

( ) Vuex//vuex(vue的状态管理模式)

( ) CSS Pre-processors //CSS 预处理器(如：less、sass)

( ) Linter/ Formatter //代码风格检查和格式化(如：ESlint)

( ) Unit Testing//单元测试(unit tests)

( ) E2E Testing// e2e(end to end) 测试

我的配置：（因为我们公司没有测试，所以我加了最后两个测试）

基本配置：

4.选择vue 的版本

我选的是3.x

5.是否使用class风格的组件语法

这里询问的是是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议大家选择y。

6.选择是否使用`Babel`与`TypeScript`一起用于自动检测的填充

这里一定要选择y

7.选择是否使用history router

其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置,但是我的项目路由不带# ，所以我选择Y。

8.css 预处理器

我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效, sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

9.Linter / Formatter 代码校验规则

选择语法检测规范,提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

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

10.选择保存时检查 / 提交时检查

(*) Lint on save // 保存就检查

( ) Lint and fix on commit //fix 或者 commit 的时候检查

建议第一个

11.Unit Testing 单元测试

? Pick a unit testing solution: (Use arrow keys)

Mocha + Chai

Jest

选择单元测试解决方案，普遍用到最多的时Mocha + chai，这里就不多说了。

12. E2E Testing E2E（End To End）端到端测试

? Pick a E2E testing solution: (Use arrow keys)

Cypress (Chrome only)

Nightwatch (WebDriver-based)

Cypress 我平时用的多，这里就不多说了。

13.配置文件存放

选择Babel,PostCSS, ESLint等自定义配置的存放位置。这里建议大家选择第一个，我习惯分开放，这样管理更清晰！

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

In dedicated config files // 存放在专用配置文件中

In package.json // 存放在package.json中

14.是否保存当前选择的配置项

是否保存当前选择的配置项，如果当前配置是经常用到的配置，建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了，根据自己情况而定啦。我这里就不保存了，原因是熟能生巧！哈哈哈

15.vue-cli安装！！

16.vue-cli安装完成！！

17. 打开项目

cd project-one
npm run serve

18.启动成功

浏览器打开http://localhost:8080/

[vue]vue cli项目搭建详解