一、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