vue 整合Mint UI组件
vue 2017-09-19 17:22:11

官网地址：http://mint-ui.github.io/#!/zh-cn

mint-ui的demo参照：https://github.com/ElemeFE/mint-ui/tree/master/example/pages 

 

完全安装：

JavaScript Code复制内容到剪贴板
  1. // 安装  
  2. # Vue 1.x  
  3. $ npm install mint-ui@1 -S  
  4. # Vue 2.0  
  5. $ npm install mint-ui -S  

 

main.js添加：

JavaScript Code复制内容到剪贴板
  1. import Vue from 'vue'  
  2. import MintUI from 'mint-ui'  
  3. import 'mint-ui/lib/style.css'  
  4. import App from './App.vue'  
  5.   
  6. Vue.use(MintUI)  
  7.   
  8. new Vue({  
  9.   el: '#app',  
  10.   components: { App }  
  11. })  

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。

 

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

JavaScript Code复制内容到剪贴板
  1. $ npm install babel-plugin-component -D  

 

然后，将 .babelrc 修改为：

JavaScript Code复制内容到剪贴板
  1. {  
  2.   "presets": [  
  3.     ["es2015", { "modules": false }]  
  4.   ],  
  5.   "plugins": [["component", [  
  6.     {  
  7.       "libraryName": "mint-ui",  
  8.       "style": true  
  9.     }  
  10.   ]]]  
  11. }  

 

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

PHP Code复制内容到剪贴板
  1. import Vue from 'vue'  
  2. import { Button, Cell } from 'mint-ui'  
  3. import App from './App.vue'  
  4.   
  5. Vue.component(Button.name, Button)  
  6. Vue.component(Cell.name, Cell)  
  7. /* 或写为 
  8.  * Vue.use(Button) 
  9.  * Vue.use(Cell) 
  10.  */  
  11.   
  12. new Vue({  
  13.   el: '#app',  
  14.   components: { App }  
  15. })  

 

本文来自于：http://www.yoyo88.cn/study/vue/153.html

上一篇 components组件传自定义参数
下一篇 Vuex 初学笔记 / store
相关的文章
Powered by yoyo苏ICP备15045725号