vue中使用less的基本步骤以及遇到的问题

最近在用vue做项目，于是想着搭配element和less来完成，这里记录一下详细的步骤，希望可以给大家提供一些参考价值。

首先是你得有一个vue项目，我是用vue-cli搭建的vue项目，这个步骤就不详细展开了，有需要的朋友可以去百度，参考资料很多。vue项目搭建完成以后可以执行npm run dev运行一下，看一下是否搭建成功。

进入正题，首先是安装element，我用的是yarn，没有用npm，因为国内npm是真的慢，当然使用cnpm换源淘宝镜像以后会好点，反正个人推荐yarn，是真的快。

1、执行指令yarn add element-ui，就会自动安装依赖包，此时等待安装完成就好
2、打开main.js引入element，第一步导入element并使用，代码为

import ElementUI from 'element-ui'
Vue.use(ElementUI);

但是这样还是不够的，然后是第二步引入css样式，代码为

import 'element-ui/lib/theme-chalk/index.css'

这样就大概完成了

然后是安装less，这里需要安装两个文件，一个是less，另一个是less-loader，yarn安装指令是yarn add less --dev和yarn add [email protected] --dev，注意这里几个比较重要的点，首先是为less-loader指定了5.0.0的版本，因为不指定的话使用会报错，哪怕你安装步骤没问题，依然报错，这是因为不指定会安装最新版本，会存在兼容问题，所以指定5.0.0，至于less则不需要指定版本，另外一个问题是后边加了--dev，意思是安装到了开发环境依赖中，以后安装依赖以前一定要确定，使用的依赖到底是dependencies中还是devDependencies中，之后是再main.js中引入并使用，代码如下

import less from 'less'
Vue.use(less);

这样就算安装引入完成，使用的时候在style标签中加入lang='less'即可，如果还是报错，重新启动下项目试试。