Mint组件快速搭建移动端项目

1、使用vue-cli创建项目

vue init webpack my-mint

2、进入my-mint项目，安装依赖

cd my-mint

npm install

3、安装mint-ui组件

官网地址：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项目中的快速引入方法，接下来就是页面开发啦！