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

雨纏禪發表於2018-03-09
VueUI

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

終於可以了，就此，環境配置完成。

相關文章