Vue-cli 脚手架安装sass_cli 添加sass

Vue Cli安装和node-sass、less-loader、sass-loader安装

一、Vue Cli安装

CLI全程是Command-Line Interface，命令行界面，俗称脚手架，可以帮我们快速的创建vue项

Vue Cli的使用必须依赖node环境和webpack

管理员方式打开cmd进行安装，安装命令：

npm i -g @vue/cli

查看版本

C:Windowssystem32>vue -V
@vue/cli 4.5.13

二、node-sass安装

vue项目如果没有采用vue-cli方式创建，那么在项目下载之后，需要安装node-sass，不然会报错。安装后再进行编译

npm install node-sass --registry=https://registry.npm.taobao.org
npm i

如果node-sass版本不对，可以使用如下命令：

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist 
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass

卸载node-sass命令

cnpm uninstall node-sass -g

安装指定版本的node-sass

npm i -D node-sass@4.12.0 

node-sass 与node版本对应

三、清除缓存

npm cache clean -f

四、less和less-loader安装

默认vue-cli创建的项目并没有安装less-loader，如果你想要使用less语法，必须先配置好less相关的loader。

安装less-loader，还要安装less，因为less-loader是依赖于less的。

npm install less less-loader --save-dev

 如果报错：Syntax Error: TypeError: this.getOptions is not a function，因为less-loader安装的版本过高

卸载less-loader

npm uninstall less-loader

安装less-loader

npm install less-loader@6.0.0

五、安装js-cookie

npm命令

npm install --save js-cookie

六、安装sass-loader

npm命令

npm install --save-dev sass-loader  

 卸载sass-loader

npm uninstall --save sass-loader

 指定版本

npm install sass-loader@7.3.1 --save-dev