有关vue的UI组件之VUX，mint-UI，element—UI库，

---

VUX（推荐）

官网：https://doc.vux.li/zh-CN/install/npm.html

---

1、安装完vue-cli后，安装vux：

npm install vux --save；//检查package-json里是否存在。

2、vux使用less编译源码，所以项目里必须要有less-loader。

	npm install less less-loader --save-dev；//检查package-json里是否存在。

3、安装vux-loader并配置vuxLoader：

	npm install less vux-loader --save-dev；

你可以不安装不配置vux-loader，不配置的话引入组件是这样的：

	import AlertPlugin from 'vux/src/plugins/Alert'；
	import ToastPlugin from 'vux/src/plugins/Toast'；
***配置之后就可以这样引入组件了：（比较方便，一次可以引入多个组件）***
import { AlertPlugin, ToastPlugin } from 'vux'；

4、在mian.js里面引入：

	import VueRouter from 'vue-router'；
	Vue.use(VueRouter)；

5、在webpack.base.config.js中修改如下：

	const vuxLoader = require('vux-loader')
	const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量webpackConfig 
	module.exports = vuxLoader.merge(webpackConfig, {
	  plugins: ['vux-ui']
	})

6、最后，不忘在webpack.base.config.js中的

resolve: {
extensions: [’.js’, ‘.vue’, ‘.json’,’.less’]
}//里加入.less。

mint-Ui

1、安装完vue-cli后，安装mint-UI

命令行：npm install mint-ui -S
相当于  npm install mint-ui --save

//   i -> install       D  -> --save-dev       S -> --save   都是缩写

2、在mian.js 里面引入它的js和css：

import Mint from ‘mint-ui‘       //固定路径，类似vuerouter

import ‘mint-ui/lib/style.css‘      //固定路径

注意！
vue-cli默认情况下没有配置css-loader style-loader和file-loader，需要自己手动去配置，查看package.json文件，如果有就不需要下载，只需要在webpack.config.js文件中配置。
{ test: /\.css$/,  loader: ‘style!css‘ },
{ test: /\.(eot|svg|ttf|woff|woff2)$/ , loader: ‘file‘ },

3、在babel-plugin-component的帮助下，我们可以导入我们实际需要的组件，使项目比其他方式更小。

首先安装babel-plugin-component： npm install babel-plugin-component -D
4、然后编辑.babelrc：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

5、最后想用哪个组件就引入哪个组件就可以开始飞速敲代码节奏~~~~~

element—UI

1、安装完vue-cli后，再安装 element-ui：

命令行：npm i element-ui -D

相当于  npm install element-ui --save-dev

2、在main.js入口文件中引入它的js和css：

import ElementUI from ‘element-ui‘          //固定路径，类似vuerouter

import ‘element-ui/lib/theme-default/index.css‘      //固定路径

3、使用组件在main.js入口文件中声明使用：

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