一、建立專案

　　用vue-cli腳手架建立一個新專案

二、確定好基於什麼樣ui去寫

　　這裡我選的是mint-ui，查了度娘，發現這個比較適合應用

三、開始引入mint-ui的樣式

　　官方文件教了兩種方式引入，一種全部引入，一種按需引入，全部引入當然沒問題，不過我做的這個專案想按需引入，這樣就不會使得檔案大小變大。

　　(1) 先安裝mint-ui npm i mint-ui -S

　　(2)藉助babel-plugin-component，我們可以只引入需要的元件，以達到減小專案體積的目的。npm install babel-plugin-component -D 然後在.babelrc 新增為：

["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
]]

完整的.babelrc檔案：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins"
 
: [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]
  ],
}

這樣就完成了按需引入需要的檔案了，

　　(3)接下來只要在main.js中引入需要的ui樣式即可

import {
  DatetimePicker,
  Picker,
  Popup,
  Header,
  Button
} from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)
Vue.component(Picker.name, Picker)
Vue.component(Popup.name, Popup);
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);
 

會有一種情況，就是引入提示框（Toast、Indicator ）和資訊框（MessageBox）的時候會報錯，一種需要在單個元件頁面引入，另一種可以直接在main.js全域性引用

全域性引入
window.Toast= Toast
window.Indicator= Indicator
單個元件頁面引用
import { Indicator } from 'mint-ui';
import { MessageBox } from 'mint-ui';

（目前只做到這裡，明天再更）