Vue.js之UI組件elementUI——MintUI

標籤：開源   import   jquery   css   自動   cli   管理器   port   依賴   

目的:
為了提高開發效率
功能

原則: 拿過來直接使用

vue-cli  ->  vue-loader

 

bower 前端包管理器 jquery#1.11.1
　　自動解決依賴
npmnode包管理器 [email protected]

 

餓了麼團隊開源一個基於vue 組件庫

elementUI:
如何使用

官網:http://element.eleme.io/
使用:
1. 安裝 element-ui
npm i element-ui -D

npm install element-ui --save-dev

// i-> install
// D -> --save-dev
// S-> --save
2. 引入 main.js入口檔案
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-default/index.css‘

全部引入
3. 使用組件
Vue.use(ElementUI)

css-loader 引入css
字型表徵圖file-loader

less:
less
less-loader

按需載入相應組件: √
就需要 按鈕
1. babel-plugin-component
cnpm install babel-plugin-component -D
2. .babelrc檔案裡面新增一個配置
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3. 想用哪個組件就用哪個
引入:
import {Button,Radio} from ‘element-ui‘
使用:
a). Vue.component(Button.name, Button); 個人不太喜歡
b). Vue.use(Button); √

 

發送請求:
vue-resourse互動

axios

 

mint-ui
移動端 ui庫

http://mint-ui.github.io/

1. 下載
npm install mint-ui -S

-S
--save
2. 引入
import Vue from ‘vue‘;
import Mint from ‘mint-ui‘;
import ‘mint-ui/lib/style.css‘
Vue.use(Mint);

按需引入:
import { Cell, Checklist } from ‘minu-ui‘;
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

http://mint-ui.github.io/docs/#!/zh-cn2

Vue.js之UI組件elementUI——MintUI