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