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