Element UI 基于vue pc端的UI框架 https://github.com/ElemeFE/mint-ui
MintUI 基于vue 移动端的UI框架 https://github.com/ElemeFE/element
(github中可搜索资料)
MintUI的使用:
1.找官网
2.安装 npm install mint-ui -save
3.main.js引入mint UI的css和插件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint);
4.看文档直接使用
若看不到文档,到github中搜索mint-ui,下载看example中别人怎么用的
Element UI的使用:
1.找官网 https://element.eleme.cn/#/zh-CN/component/installation
2.安装 cnpm install element-ui -S
3.main.js中引入element UI的css和插件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
4.webpack.config.js文件中配置file_loader
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader:'file-loader'
}
5.看文档直接使用
按需引入
方法一:
1、首先,安装 babel-plugin-component
cnpm install babel-plugin-component -D
2、找到 .babelrc 配置文件
将
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
改为
{
"presets": [["env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
方法二:
1、引入
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
2、引入对应的css
import 'element-ui/lib/theme-chalk/index.css'
3、如果报错,webpack.config.js文件中配置file_loader
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader:'file-loader'
}