一、Vue Cli安装

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

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

管理员方式打开cmd进行安装,安装命令:

npm i -g @vue/cli

查看版本

C:\Windows\system32>vue -V
@vue/cli 4.5.13

二、node-sass安装

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

1、先查看自己的镜像源:

npm config get registry

2、安装时指定镜像源,切换到国内的,提高下载速度:

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

也可以更改镜像源为淘宝的

npm config set sass_binary_site=https://npmmirror.com/mirrors/node-sass/ 

3、特殊情况处理:内网中无法下载时,可以先下载node-sass文件到本地,再安装

如果不想直接通过cnpm i直接从镜像源下载再安装,可以先跳过node-sass的安装,命令如下:

cnpm i --ignore-scripts

然后手动下载binding.node到本地后,再重新安装:

npm rebuild node-sass --save-dev

注意:生产中如果镜像仓库中没有某个版本的node-sass,则需要先node-sass文件(如:linux-x64-72_binding.node)下载到本地,然后再安装

4、如果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

 

posted on 2021-10-06 15:51  周文豪  阅读(2067)  评论(0编辑  收藏  举报