Mint UI 快速上手教程-Quick

本節(jié)將介紹如何在項(xiàng)目中使用 Mint UI。

使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

引入 Mint UI

你可以引入整個(gè) ?Mint UI?，或是根據(jù)需要僅引入部分組件。我們先介紹如何引入完整的? Mint UI?。

完整引入

在 main.js 中寫入以下內(nèi)容：

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 的引入。需要注意的是，樣式文件需要單獨(dú)引入。

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。

首先，安裝 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 中寫入以下內(nèi)容：

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)
/* 或?qū)憺? * Vue.use(Button)
 * Vue.use(Cell)
 */

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

開始使用

至此，一個(gè)基于 Vue 和 Mint UI 的開發(fā)環(huán)境已經(jīng)搭建完畢，現(xiàn)在就可以編寫代碼了。啟動(dòng)開發(fā)模式：

npm run dev

編譯：

npm run build

各個(gè)組件的使用方法請(qǐng)參閱它們各自的文檔。