最近開發專案的時候逐漸採用vue.js+mint-ui的技術棧，但是昨天開始配置開發環境的時候，遇到了各種報錯，即使是按照兩家的官方文件配置，也還是會報錯，晚上下班後回去配置了一晚上，才終於把它配置好，所以就記錄下來，以防後面再次踩坑。。
vue.js介紹
Vue.js 是一個用於建立 web 互動介面的。其特點是
- 簡潔 HTML 模板 + JSON 資料，再建立一個 Vue 例項，就這麼簡單。
- 資料驅動 自動追蹤依賴的模板表示式和計算屬性。
- 元件化 用解耦、可複用的元件來構造介面。
- 輕量 ~24kb min+gzip，無依賴。
- 快速 精確有效的非同步批量 DOM 更新。
- 模組友好 通過 NPM 或 Bower 安裝，無縫融入你的工作流。
mint-ui介紹
Mint UI是餓了麼前端團隊開源的基於 Vue.js 的移動端元件庫 特點是：
- Mint UI 包含豐富的 CSS 和 JS 元件，能夠滿足日常的移動端開發需要。通過它，可以快速構建出風格統一的頁面，提升開發效率。
- 真正意義上的按需載入元件。可以只載入宣告過的元件及其樣式檔案，無需再糾結檔案體積過大。
- 考慮到移動端的效能門檻，Mint UI 採用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使使用者獲得流暢順滑的體驗。
- 依託 Vue.js 高效的元件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮後的檔案體積也僅有 ~30kb (JS + CSS) gzip。
建立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
終於可以了，就此，環境配置完成。
