最近開發(fā)項目的時候逐漸采用vue.js+mint-ui的技術(shù)棧，但是昨天開始配置開發(fā)環(huán)境的時候，遇到了各種報錯，即使是按照兩家的官方文檔配置，也還是會報錯，晚上下班后回去配置了一晚上，才終于把它配置好，所以就記錄下來，以防后面再次踩坑。。

vue.js介紹

Vue.js 是一個用于創(chuàng)建 web 交互界面的。其特點是

1. 簡潔 HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個 Vue 實例，就這么簡單。
2. 數(shù)據(jù)驅(qū)動 自動追蹤依賴的模板表達(dá)式和計算屬性。
3. 組件化 用解耦、可復(fù)用的組件來構(gòu)造界面。
4. 輕量 ~24kb min+gzip，無依賴。
5. 快速 精確有效的異步批量 DOM 更新。
6. 模塊友好 通過 NPM 或 Bower 安裝，無縫融入你的工作流。

vue.js中文官網(wǎng)

mint-ui介紹

Mint UI是餓了么前端團(tuán)隊開源的基于 Vue.js 的移動端組件庫

特點是：

1. Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。通過它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。
2. 真正意義上的按需加載組件?？梢灾患虞d聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。
3. 考慮到移動端的性能門檻，Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。
4. 依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。

Mint UI中文官網(wǎng)

創(chuàng)建Vue.js項目

首先根據(jù)vue官網(wǎng)給出的方法在本地創(chuàng)建一個vue項目

# 全局安裝 vue-cli$ npm install --global vue-cli# 創(chuàng)建一個基于 webpack 模板的新項目$ vue init webpack my-project# 安裝依賴，走你$ cd my-project$ npm install$ npm run dev

配置Mint UI 環(huán)境

接著根據(jù)Mint UI的官網(wǎng)在項目中引入Mint UI的環(huán)境

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)

好了根據(jù)官網(wǎng)所說的，以上代碼便完成了 Mint UI 的引入。

運(yùn)行項目

最后根據(jù)官網(wǎng)的內(nèi)容在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>

好了，環(huán)境搭建完成，我們來運(yùn)行項目吧

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  } ]]]}

最后運(yùn)行

環(huán)境配置好后，我們最后再運(yùn)行一下。

npm run dev

終于可以了，就此，環(huán)境配置完成。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。