新建一個基於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