搭建vue-cli4.0项目

 

　①

　　Vue CLI的包名称由 vue-cli 改成了 @vue/cli。

　　如果已经全局安装了旧版本的 vue-cli(1.x或2.x)，

　　你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli卸载

　②

　　安装新的vue-cli包

　　npm install -g @vue/cli

　　或

　　yarn global add @vue/cli

　③

　　安装之后，可以在命令行中访问 vue 命令。可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。还可以用 vue -V 这个命令来检查其版本是否正确

　④

　　在创建的项目目录执行　vue create my-project

　⑤

　　选择如下内容

　　　　　　

　　　　　　

? Check the features needed for your project:
>(*) Choose Vue version                         //选择vue的脚手架版本
 (*) Bable                                      //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript                                 // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
 ( ) 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） 测试

　⑥

　　　　

　⑦

　　　　

　⑧

　　　　

css预处理器：

　SCSS/SASS

//Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）

//node-sass是用node(调用cpp编写的libsass)来编译sass

//dart-sass是用dart VM 来编译sass

//如果用sass dart-sass性能更好（也是sass官方使用的），而且node-sass因为国情问题经常装不上

LESS     

//Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助Node.js)

Stylus    

//Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。

注意：更新node版本之后vue项目运行报错，如下图

 

　　

 

分析：这个错又是node又是node-sass还有对应版本的，不难猜出是node和node-sass版本冲突了，

原因：node-sass是一个库，是用 node(调用 cpp 编写的 libsass)来编译 sass，node-sass是在node环境里的，他把Node.js绑定到LibSass上，（流行样式表预处理器Sass的C版本），所以会版本冲突

解决办法：当然就是更新node-sass了：npm install node-sass --unsafe-perm=true --allow-root

 

⑨

　　

　　Eslint 检验代码格式工具

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

　⑩

　　　

　⑪

　　　　

　　需要的Babel,ESlint,etc.配置存放的位置

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

　⑫

　　　　

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

　　　　选择n之后则会直接开始创建项目了，选择y之后则会输入一个存储当前配置项的名称:

? Save preset as: 配置项名称

下次再创建项目的时候就会看到，自己所存储的这个名字啦。

 

-- 分 割 线 --

---

 

vue-cli插件安装，使用 $ vue add 命令去执行下载插件包，并且调用插件包去修改 Webpack 配置并执行一些 command 命令。

add 行为可以拆开为两部 —— 安装和调用，以 @vue/cli-plugin-eslint 为例：

npm install @vue/cli-plugin-eslint --save-dev 
vue invoke @vue/eslint

注意安装插件是有简写的，到安装的时候会补全插件名称。简写方式如下：

# 简写 
vue add @vue/eslint 
# 全名 
vue add @vue/cli-plugin-eslint 

# 简写 
vue add apollo 
# 全名 
vue add vue-cli-plugin-apollo

而 router 和 vuex 插件比较特殊，它没有相应的插件，所以使用 add 的形式有所不同。

vue add router 
vue add vuex

以上两个命令会为项目安装 vue-router 和 vuex，并且改变项目目录结构以便更快的进行路由和状态管理的开发操作。

 

 

　　vue cli 搭建的项目中如何配置 sass、stylus传送门

　　关于vue.config.js配置

　　Vuex白话教程传送

　　Vuex使用