前言
最近開(kāi)發(fā)項(xiàng)目的時(shí)候逐漸采用vue.js+mint-ui的技術(shù)棧尊浓，但是昨天開(kāi)始配置開(kāi)發(fā)環(huán)境的時(shí)候过吻，遇到了各種報(bào)錯(cuò)电抚，即使是按照兩家的官方文檔配置惕稻，也還是會(huì)報(bào)錯(cuò)，晚上下班后回去配置了一晚上喻频，才終于把它配置好缩宜，所以就記錄下來(lái)，以防后面再次踩坑甥温。锻煌。
vue.js介紹
Vue.js 是一個(gè)用于創(chuàng)建 web 交互界面的。其特點(diǎn)是
- 簡(jiǎn)潔 HTML 模板 + JSON 數(shù)據(jù)姻蚓，再創(chuàng)建一個(gè) Vue 實(shí)例宋梧，就這么簡(jiǎn)單。
- 數(shù)據(jù)驅(qū)動(dòng) 自動(dòng)追蹤依賴(lài)的模板表達(dá)式和計(jì)算屬性狰挡。
- 組件化 用解耦捂龄、可復(fù)用的組件來(lái)構(gòu)造界面释涛。
- 輕量 ~24kb min+gzip，無(wú)依賴(lài)倦沧。
- 快速 精確有效的異步批量 DOM 更新唇撬。
- 模塊友好 通過(guò) NPM 或 Bower 安裝，無(wú)縫融入你的工作流展融。
mint-ui介紹
Mint UI是餓了么前端團(tuán)隊(duì)開(kāi)源的基于 Vue.js 的移動(dòng)端組件庫(kù)
特點(diǎn)是：
- Mint UI 包含豐富的 CSS 和 JS 組件窖认，能夠滿(mǎn)足日常的移動(dòng)端開(kāi)發(fā)需要。通過(guò)它告希，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁(yè)面扑浸，提升開(kāi)發(fā)效率。
- 真正意義上的按需加載組件燕偶『仍耄可以只加載聲明過(guò)的組件及其樣式文件，無(wú)需再糾結(jié)文件體積過(guò)大指么。
- 考慮到移動(dòng)端的性能門(mén)檻酝惧，Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排涧尿，從而使用戶(hù)獲得流暢順滑的體驗(yàn)系奉。
- 依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化姑廉。即使全部引入缺亮，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。
創(chuàng)建Vue.js項(xiàng)目
首先根據(jù)vue官網(wǎng)給出的方法在本地創(chuàng)建一個(gè)vue項(xiàng)目
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴(lài)桥言，走你
$ cd my-project
$ npm install
$ npm run dev
配置Mint UI 環(huán)境
接著根據(jù)Mint UI的官網(wǎng)在項(xiàng)目中引入Mint UI的環(huán)境
npm i mint-ui -S
然后在項(xiàng)目中的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)所說(shuō)的萌踱，以上代碼便完成了 Mint UI 的引入。
運(yùn)行項(xiàng)目
最后根據(jù)官網(wǎng)的內(nèi)容在APP.vue里面寫(xiě)一個(gè)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)境搭建完成并鸵，我們來(lái)運(yùn)行項(xiàng)目吧
npm run dev
然后就啪啪啪各種報(bào)錯(cuò)
解決錯(cuò)誤
首先你需要在本地項(xiàng)目中安裝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"},
]
}
如果你報(bào)es2015之類(lèi)的錯(cuò)誤，則需要將.babelrc文件修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
最后運(yùn)行
環(huán)境配置好后扔涧，我們最后再運(yùn)行一下园担。
npm run dev
終于可以了，就此枯夜，環(huán)境配置完成弯汰。
