vue-cli之Mint框架使用遇坑記
（會(huì)不定時(shí)更新）
Mint框架 --由餓了么技術(shù)團(tuán)隊(duì)研發(fā)為vue量身定做，主要適配移動(dòng)端（還有個(gè)好像element是PC端）
坑一：引入 Mint UI
官方介紹了2種方法：
方法一：完整引入
只需要在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 的引入驼仪。需要注意的是挖垛，樣式文件需要單獨(dú)引入版仔。
方法二：按需引入
借助babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。
首先挖息，安裝 babel-plugin-component：
`{
"presets": [ ["es2015", {"modules":false}] ],
"plugins": [
["component", [?
?{"libraryName":"mint-ui","style":true}?
?]]]
}`
狀態(tài)：還未去解決，表示使用方法二測(cè)試的時(shí)候會(huì)出現(xiàn)無法引用到的情況
坑二：Toast 提示框報(bào)錯(cuò)
我天真的以為只要按照方法一的全局引入就可以兽肤，歡快的去使用我們Mint的所有東西了套腹，BUT...BUT....BUT...
當(dāng)我調(diào)用Toast的時(shí)候?
經(jīng)過一系列的排除资铡、查看‘kengdie’文檔,終于發(fā)現(xiàn) 原因(源碼)：
`
Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
Vue.$toast = Vue.prototype.$toast = Toast;
Vue.$indicator = Vue.prototype.$indicator = Indicator;
`
Toast并不是全局變量电禀，所以在引用的時(shí)候 必須在需要引用的頁(yè)面 <script>下
1.import { Toast } from 'mint-ui';
2.如果不想import 可以直接使用this.$toast('msg')
親測(cè)都能成功
坑三：CSS樣式覆蓋
這個(gè)嚴(yán)格的來說不能算是Mint框架的坑，在使用Mint的框架的時(shí)候肯定不能完全采用原來的樣式的笤休，所以我們需要對(duì)應(yīng)修改的時(shí)候就會(huì)出現(xiàn)明明寫了樣式尖飞，但是卻沒有生效，目前的解決方式是 ：
1.<style>標(biāo)簽里面不加`scopped`;
2.使用less/sass等店雅，用一個(gè)組件最外層的class包裹在里面寫樣式
或者可以在style里面引用一個(gè)單獨(dú)寫好的CSS也可以覆蓋
坑四：axios POST請(qǐng)求跨域問題
在使用VUE的時(shí)候想到數(shù)據(jù)請(qǐng)求問題政基， 之前什么ajax用的太習(xí)慣，想到如果在VUE里面繼續(xù)用可能太不方便還得引入JQuery底洗，剛好vue除了axios插件專門針對(duì)vue項(xiàng)目需求腋么，妥妥的看了一遍文檔咕娄，直接上手去用亥揖，BUT ....然而。圣勒。费变。。我還是太天真
正打算美滋滋的看數(shù)據(jù)結(jié)構(gòu)呢圣贸，結(jié)果來了這么一下
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
what? 搞笑呢挚歧。。吁峻。
哎....開始各種查看文檔 測(cè)試
最后得到了解決辦法滑负，還是基于官方文檔在當(dāng)前頁(yè)面
`
import qs from 'qs'
`
然后使用qs庫(kù)去操作參數(shù)
最終我看到了久違了的 200
坑四：router-link使用區(qū)分
很多時(shí)候我們寫項(xiàng)目需要直接跳轉(zhuǎn)第三方的鏈接地址在张，比如https://baidu.com或者h(yuǎn)ttps://taobao.com等
這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)你去使用router-link愉快的寫鏈接地址時(shí)，出現(xiàn) 頁(yè)面打不開矮慕，查看代碼地址是對(duì)的啊為啥呢 帮匾，
一頓查看文檔后發(fā)現(xiàn)，router-link支持本地router的路由跳轉(zhuǎn)痴鳄，不支持第三方瘟斜，仔細(xì)看跳轉(zhuǎn)后的鏈接就發(fā)現(xiàn)，它是在本地或者線上域名的后面直接加上了跳轉(zhuǎn)地址痪寻，例如這樣：http://locallhost:8080/https：//www.baidu.com 這樣瀏覽器就無法解析當(dāng)前地址了螺句，導(dǎo)致報(bào)錯(cuò)，所以還是需要用a標(biāo)簽來進(jìn)行href的綁定
單純的來看橡类，單從這個(gè)標(biāo)簽的名稱來看router-link 這個(gè)標(biāo)簽的頭 router已經(jīng)說明了就是router路由的功能配合使用 哈哈?
