新建一个基于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