1、使用vue-cli創(chuàng)建項目
vue init webpack my-mint
2主之、進(jìn)入my-mint項目逐哈,安裝依賴
cd my-mint
npm install
3侮腹、安裝mint-ui組件
官網(wǎng)地址:http://mint-ui.github.io/#!/zh-cn
github地址:https://github.com/ElemeFE/mint-ui
// 安裝
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
4又厉、全局引入mint-ui
// 引入全部組件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
5九府、按需引入mint-ui
首先安裝插件:
npm install babel-plugin-component -D
編輯 .babelrc文件:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
在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)
/* or
* Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
components: { App }
})
6、啟動項目
npm run serve
好啦覆致,以上就是mint-ui在Vue項目中的快速引入方法侄旬,接下來就是頁面開發(fā)啦!