vue中使用mit-ui

轉載於:min-ui使用教程
Mint UI
Github 倉儲地址述
Mint-UI官方文檔
安裝

npm install mint-ui -S -S表示 --save

完整引入

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

以上代碼便完成了 Mint UI 的引入。需要注意的是，樣式文件需要單獨引入。
因爲引入的是全局組件，可以直接使用

按需引入
藉助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然後，將 .babelrc 修改爲：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

如果你只希望引入部分組件，比如 Button 和 Cell，那麼需要在 main.js 中寫入以下內容：

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)

/* 或寫爲

• Vue.use(Button)
• Vue.use(Cell)
  */

new Vue({
  el: '#app',
  components: { App }
})

Mui
官網
使用 MUI 代碼片段
注意： MUI 不同於 Mint-UI，MUI只是開發出來的一套好用的代碼片段，裏面提供了配套的樣式、配套的HTML代碼段，類似於 Bootstrap； 而 Mint-UI，是真正的組件庫，是使用 Vue 技術封裝出來的 成套的組件，可以無縫的和 VUE項目進行集成開發；
因此，從體驗上來說， Mint-UI體驗更好，因爲這是別人幫我們開發好的現成的Vue組件；
從體驗上來說， MUI和Bootstrap類似；
理論上，任何項目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只適用於Vue項目；

注意： MUI 並不能使用 npm 去下載，需要自己手動從 github 上，下載現成的包，自己解壓出來，然後手動拷貝到項目中使用；