基于Vue的ui框架:
餓了么公司基于vue開發(fā)的vue的ui組件庫
Element Ui 基于vue pc端的UI框架。官網(wǎng)：http://element.eleme.io/
Mint? Ui基于vue移動端的UI框架。官網(wǎng)：https://mint-ui.github.io/docs/#/zh-cn2
其實分唾，框架的使用還是偏向于簡單的方向罐柳，看文檔后幾乎就懂得怎么使用赘被。首先介紹基于移動端的UI框架：
一魏蔗，Mint? Ui
1，mintui的使用：官網(wǎng)在可查
2蹂喻，安裝? npm/cnmp? install? mint-ui -S? -S表示--save
3，引入mint? Ui的css和插件（main.js上引入）
?????????? import Mint from 'mint-ui';
?????????? Vue.use(Mint);
?????????? import 'mint-ui/lib/style.css'
4捂寿，看文檔直接使用即可叉橱。
注：在mintUi組件上面執(zhí)行事件的寫法@click.native
對于文檔上不能直接引入到效果的，可以到github上下載他的源文件者蠕，源代碼可以直接觀察窃祝！----復(fù)制源代碼組件到項目進行修改！
二踱侣，Element Ui
1粪小，找官網(wǎng)? http://element.eleme.io/#/zh-CN/component/quickstart
2，安裝 cnpm? i? element-ui? -S? -S表示--save
3抡句，引入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? http://element.eleme.io/1.4/#/zh-CN/component/quickstart
{
?????? test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
?????? loader: 'file-loader'
?}
5,看文檔直接使用
三，element? Ui按需引入
element UI組件的單獨使用（第一種方法）：
1待榔、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、在要使用的vue文件中引入如下：
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
element UI組件的單獨使用（第二種方法）：
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
引入對應(yīng)的css
import 'element-ui/lib/theme-chalk/index.css';
如果報錯： webpack.config.js? 配置file_loader
? {
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
? }
