Vue2.0配置mint-ui踩過的那些坑

最近開發項目的時候逐漸採用vue.js+mint-ui的技術棧，可是昨天開始配置開發環境的時候，遇到了各類報錯，即便是按照兩家的官方文檔配置，也仍是會報錯，晚上下班後回去配置了一夜，才終於把它配置好，因此就記錄下來，以防後面再次踩坑。。

vue.js介紹

Vue.js 是一個用於建立 web 交互界面的。其特色是

1. 簡潔 HTML 模板 + JSON 數據，再建立一個 Vue 實例，就這麼簡單。
2. 數據驅動 自動追蹤依賴的模板表達式和計算屬性。
3. 組件化 用解耦、可複用的組件來構造界面。
4. 輕量 ~24kb min+gzip，無依賴。
5. 快速 精確有效的異步批量 DOM 更新。
6. 模塊友好 經過 NPM 或 Bower 安裝，無縫融入你的工做流。

vue.js中文官網

mint-ui介紹

Mint UI是餓了麼前端團隊開源的基於 Vue.js 的移動端組件庫 特色是：

1. Mint UI 包含豐富的 CSS 和 JS 組件，可以知足平常的移動端開發須要。經過它，能夠快速構建出風格統一的頁面，提高開發效率。
2. 真正意義上的按需加載組件。能夠只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。
3. 考慮到移動端的性能門檻，Mint UI 採用 CSS3 處理各類動效，避免瀏覽器進行沒必要要的重繪和重排，從而使用戶得到流暢順滑的體驗。
4. 依託 Vue.js 高效的組件化方案，Mint UI 作到了輕量化。即便所有引入，壓縮後的文件體積也僅有 ~30kb (JS + CSS) gzip。

Mint UI中文官網

建立Vue.js項目

首先根據vue官網給出的方法在本地建立一個vue項目

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
複製代碼

配置Mint UI 環境

接着根據Mint UI的官網在項目中引入Mint UI的環境

npm i mint-ui -S
複製代碼

而後在項目中的main.js文件引入全部組件

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

Vue.use(MintUI)

複製代碼

好了根據官網所說的，以上代碼便完成了 Mint UI 的引入。

運行項目

最後根據官網的內容在APP.vue裏面寫一個button組件看看

<template>
  <div id="app">
  <mt-button @click.native="handleClick">按鈕</mt-button>
</div>
</template>

<script>
export default{
  el: '#app',
  methods: {
    handleClick: function() {
      this.$toast('Hello world!');
    }
  }
}
</script>

<style>
</style>

複製代碼

好了，環境搭建完成，咱們來運行項目吧

npm run dev
複製代碼

而後就啪啪啪各類報錯

解決錯誤

首先你須要在本地項目中安裝CSS解釋器

npm i css-loader style-loader -D

而後在build文件夾下面的webpack.base.conf.js文件裏面配置以下代碼

{
        test: /\.css$/,
        include: [
          /src/,
          '/node_modules/mint-ui/lib/'   
        ],
        use:[
          {loader:"style-loader"},
          {loader:"css-loader"},
        ]
        
      }
複製代碼

若是你報es2015之類的錯誤，則須要將.babelrc文件修改成：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}
複製代碼

最後運行

環境配置好後，咱們最後再運行一下。

npm run dev

終於能夠了，就此，環境配置完成。