### 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、总结
两种框架的安装流程实际上是一样的，一般情况下我们只需要使用其中一个框架即可，切勿多个框架同时使用，这是非常低级的做法。

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺