css预编译方式 vue cli 选不选_手把手教大家搭建一个vue-cli3 的项目

首先准备条件: 下载安装 node 和 npm (Vue CLI需要Node.js 8.9或更高版本，官方推荐8.11.0+版本)

去官网下载: 傻瓜式安装 (一路回车),好了之后,我们打开cmd 检查一下我们是否安装成功, node -v

如果出现v+数字的形式,说明安装成功 就是v** ,代表的是什么版本,我这个是8.11.3的版本

第二步,全局安装 vue/cli $ npm install @vue/cli -g

同样的, 我们还是检验一下是否安装成功, vue -V

然后第三步就是创建我们的项目 $ vue create my-project

这时候会提示,让你选择 default 还是 Manually select features (可以通过上下按键进行选择)

default : 是默认的意思, 就是默认配置vue/cli 提供的配置 的配置 只有bable 和 eslint

Manually select features: 手动配置 手动配置可以根据个人的喜好来进行配置

(vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项,也可以直接按数字键1,2,3,4进行选择,)

Babel：将ES6编译成ES5

TypeScript：JS超集，主要是类型检查

Progressive Web App（PWA）Support：渐进式WEB应用支持

Router：路由

Vuex：状态管理

Linter/ Formatter：代码检查工具

CSS Pre-processors：css预编译 (稍后会对这里进行配置)

Unit Testing：单元测试，开发过程中前端对代码进行自运行测试

E2E Testing: 端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

接下来会提示:

Use class-style component syntax? (Y/n) y

是否使用Class风格装饰器？

即原本是：home = new Vue()创建vue实例

使用装饰器后：class home extends Vue{}

如果选择了TypeScript 会有这样的提示:

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

使用Babel与TypeScript一起用于自动检测的填充? yes

还会有这样的提示:

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

然后会让你选择 什么css预编译器？

有scss less 和 stylus ,这里选择的是stylus

然后还有代码检查工具

tslint: typescript格式验证工具（如果前面选择了TypeScript会有这一项）

eslint w...: 只进行报错提醒；（如果还没熟悉eslint,推荐使用此模式）

eslint + A...: 不严谨模式；

eslint + S...: 正常模式

eslint + P...: 严格模式；

然后就是,选择语法检查方式:

第一个是保存检测，第二个是fix和commit的时候检测,当然是保存的时候检查啦!

然后就是让你选择单元测试;

同样的我这里选择了 Mocha ,

最后就是配置文件存放地方

第一个是独立文件夹位置，第二个是在package.json文件里

到了这里会提示你,是否在以后的项目中使用以上配置？

Save this as a preset for future projects? (y/N)

想就yes 不想就 no

最后回车等待安装

安装成功,进入项目 cd my-project

npm run serve

大功告成!