element-ui+less+jq在Vue里面的安装配置

一，element-ui的安装使用

1. 先用vue搭建环境之后，在安装 element-ui

npm install element-ui --save

2. 在 main.js(也就是主入口) 中写入

import ElementUI from 'element-ui'

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

Vue.use(ElementUI) 这时候你就可以在页面里面使用element-ui组件的代码了。

二，less的安装使用

1- 安装 less 和 less-loader

npm install less less-loader --save-dev

2- 安装成功后

打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：

{

        test: /\.less$/, 

        loader: "style-loader!css-loader!less-loader", 

}

3- 在代码中的 style 标签中 加上 lang="less" 属性即可（防止样式冲突）

三，jq的安装使用

4,首先在package.json里的dependencies加入"jquery" : "^2.2.3"

然后npm install

2- 在webpack.base.conf.js里加入

 var webpack = require("webpack")

3- 然后在module.exports方法里面加入

plugins: [

    new webpack.optimize.CommonsChunkPlugin('common.js'),

    new webpack.ProvidePlugin({

        jQuery: "jquery",

        $: "jquery"

    })

]