新建一个基于vue.js+Mint UI的项目

上篇文章里面讲到如何新建一个基于vue,js的项目（详细文章请戳用Vue创建一个新的项目）。

该项目如果需要组件等都需要自己去写，今天就学习一下如何新建一个基于vue.js+Mint UI的项目，直接使用比较热门的一个基于 Vue.js 的移动端组件库，那就是MintUI。

使用 vue-cli

首先需要使用vue-cli，因为上一篇文章里已经说过如何安装，这里就不细说，跟之前一样。cmd里输入命令行。

npm install -g vue-cli
vue init webpack projectname

npm run dev之前需要安装一下mintUI

npm i mint-ui -S
# for Vue 1.x
npm i mint-ui@1 -S

然后npm run dev

启动完毕，直接访问http://localhost:8080

引入 Mint UI

你可以因为整个MintUI,或者是根据需要仅引入部分组件。

完整引入

在main.js中写入下面内容

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

Vue.config.productionTip = false

Vue.use(MintUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这时候就完成了Mint UI的引入。需要注意的是，样式文件需要单独引入。（）

按需引入

借助 babel-plugin-component ,我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装babel-plugin-component :

先ctrl+c暂停服务及热更新。输入以下命令：

npm install babel-plugin-component -D

这时候本人的cmd中报了一个错，

Error: Couldn't find preset "es2015" relative to directory

是因为目录里没有找到预设的ES2015

这时候需要安装一下

npm install --save-dev babel-preset-es2015

安装完毕，再一次npm run dev