Vue引入elementUI和less

vue新手入门学习，经常会看到别人代码中用到的控件，但是前端后端和移动端的都不太一样，就算是知道一点在如此告诉发展框架的时候也是一头雾水啊，对于我刚入门vue来说，今天突然看到github上有大神的代码使用了element-ui,其实一开始我还以为模板里的全都是html控件的。

于是就新建一个工程，然后开始使用这玩意，但是在webstore一直没有提示还带有警告。好尴尬，折腾了好久才知道需要安装element模块

1、在工程下的package.json中查看，直接搜素element会看到是否安装该模块。

2、没有安装在项目中打开命令行输入回车：

npm install element-ui --save

3、下载完模块以后我们需要引入到我们的项目中，切换到src下的main.js引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

4、在webstore上的helloworld.vue的template模板下试试，是不是提示了呢？

上面的问题解决以后，突然发现停留在大学的html+css写东西已经不适合现在了，应该说满足不了我们了，对于前端来说有时候控件的渲染靠css，但是假设两个控件是差不多但又不一样，在传统的css要写两遍甚至更多次，css-loader能帮我解决这样问题。

1、打开命令行输入

npm install --save-dev css-loader

2、在src下新建一个style文件夹新建一个test.less文件，在内部书写随便书写一段代码，测试,假设我这边去处理宽高。

//宽高
.wh(@width, @height){
  width: @width;
  height: @height;
}

3、在helloworld.vue的style中引入

<style lang="less" scoped>
  @import "../style/test";
  .login_page{
      .wh(320px, 210px);
  }
</style>

是不是觉得方便了很多，写一行代码就搞定了，以前宽高的写两行。好了完工，收工。。。新手记录求大神指导