Vue UI框架 (Mint UI和Element UI)

Vue UI框架 (Mint UI和Element UI)

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'

}

相关推荐