0、前言

ElementUI 是一个主PC端应用的UI框架。
MintUI 则是主WAP端应用的UI框架。
两者都有基于Vue2开发的组件，使用起来非常方便。

1、安装ElementUI

linux下，在终端或者使用cmd命令行 进入项目目录下运行以下命令：
npm i element-ui -S
然后打开src目录下的 App.vue 文件 在template中 插入一个按钮

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <el-button type="primary">主要按钮</el-button> <!-- 新插入代码 -->
    <router-view/>
  </div>
</template>

然后打开 src 目录下的 main.js 文件 加入element-ui的引用如下代码

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'; //引用库
import 'element-ui/lib/theme-chalk/index.css'; //引用样式
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI) //使用库
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

重新运行 npm run dev
看到蓝色按钮 代表已经集成成功

3、安装MintUI

linux下，在终端或者使用cmd命令行 进入项目目录下运行以下命令：
npm install mint-ui -S
App.vue 中增加一个按钮

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <mt-button>按钮</mt-button>
    <router-view/>
  </div>
</template>

然后打开 src 目录下的 main.js 文件 加入element-ui的引用如下代码

import Vue from 'vue'
import App from './App'
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
import router from './router'
Vue.config.productionTip = false
Vue.use(MintUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

重新运行 npm run dev
看到蓝色按钮 代表已经集成成功

4、总结

两种框架的安装流程实际上是一样的，一般情况下我们只需要使用其中一个框架即可，切勿多个框架同时使用，这是非常低级的做法。