官網地址：http://mint-ui.github.io/#!/zh-cn
中文文檔：http://mint-ui.github.io/docs/#/zh-cn2
示例展示：http://elemefe.github.io/mint-ui/#/
如何引入vue2項目：
在public的index.html頁面，用CDN的形式引入，這樣可以減少vendor包的體積，當然如果不介意可以安裝在本地
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <!-- MintUI --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> </head> <style> *{ list-style: none; margin:0; padding:0; text-decoration: none; } p{ margin:0; } </style> <body> <noscript> <strong>We're sorry but officialwebsite doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- vue --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <!-- axios --> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <!-- vuex --> <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script> <!-- vue-router --> <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script> <!-- MintUI --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> <!-- jquery --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </body> </html>
然后再vue.config.js中配置中修改如下：
externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'mint-ui': 'MINT', 'Axios':'axios' }
修改main.js (注釋)
修改store.js (注釋)
// import Vue from "vue"; // import Vuex from "vuex"; // Vue.use(Vuex);
修改router.js (注釋)
// import Vue from "vue"; import Router from "vue-router"; // Vue.use(Router);
如果之前安裝了vue、vuex等上面通過cdn引入的文件，現在再package.json中刪除對應字段，重新npm insatll安裝一下，這樣可以批量去掉不需要的依賴包。
之后運行一下，看看項目是否正常，看看MintUI是否成功引入
運行后顯示的頁面：
ok，到此vue項目中引入MintUI完畢！！如果只是引入MintUI只需要對應的把MintUI相關的做一下調整就可！！！
看了看style.css中字體圖標，只有以下7種：
.mintui {
font-family:"mintui" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.mintui-search:before { content: "\E604"; }
.mintui-more:before { content: "\E601"; }
.mintui-back:before { content: "\E600"; }
.mintui-field-error:before { content: "\E605"; }
.mintui-field-warning:before { content: "\E608"; }
.mintui-success:before { content: "\E602"; }
.mintui-field-success:before { content: "\E609"; }
很顯然，對於項目開發來說不夠。
那么接下來，我們學習以下如何引入iconfont（阿里圖庫中的字體圖標）
首先選擇一個圖標，假如購物車
然后點擊購物車，添加至項目（沒有項目可以創建項目）
然后，進入項目頁中，選擇Font class模式，生成鏈接，然后復制到自己做的項目中引入：
在vue的index.html引入以下樣式：
<!-- icon font --> <link rel="stylesheet" href="http://at.alicdn.com/t/font_1554067_8odm51jt7so.css">
至此，圖標引入項目，再來看看如何使用：
<span class="iconfont icon-Connectorright-px"></span> <span class="iconfont icon-noodle_px"></span>
這樣，我們在項目中就成功的額引入了iconfont圖標了。
但是，mintUI中大多都是指定了icon，只能取那幾個值，來看看mintUI自帶的icon是怎么加上的：
而我們引入的iconfont圖標，font-family是“iconfont”，前綴是“icon-”，所以不能做為mint-ui里的icon屬性值。
這是可以改的，在iconfont官網你的項目中，點擊【更多操作】—【編輯項目】
保存后，注意觀察，剛才我們的iconfont圖標已從默認的“icon-”前綴變成“mintui-”前綴了，但修改項目后的樣式鏈接已經失效，需要重新生成鏈接，重新引入我們的項目中。
之后，可以在icon屬性中使用我們引入的圖標了，這意味着我們擴充了mint-ui里的圖標，不再局限在那7個圖標了.
然后我們的引入方式就變成了：
<span class="mintui mintui-Connectorright-px"></span> <span class="mintui mintui-noodle_px"></span>
想使用更多的圖標，就添加到項目，然后生成鏈接，引入項目，就可以使用了！
完。