Mango UI

快速开始 0.0.13+

说明下如何使用
还是比较顺滑的

安装

npm install mango-ui-vue # yarn add mango-ui-vue
1

引入

全部引入

在入口文件，即main.js中引入

import mangoui from 'mango-ui-vue'
import "mango-ui-vue/packages/mangoui.css"

createApp(App).use(mangoui).mount('#app')

// ↑ 上面这句代码也可以换成这样写
const app = createApp(App)
app.use(mangoui)
app.mount('#app')
1
2
3
4
5
6
7
8
9

即可在全局使用Mango组件

部分引入

注意！

这种引入方式，在项目打包过程中，依然会打包全量的Mangoui！
若需要真正的实现按需打包，请移步到下一部分 (提前抱歉~)open in new window

// 同样需要引入样式文件
import "mango-ui-vue/packages/mangoui.css"

// 通过解构赋值引入相应的组件
import { MgButton, MgSwitch } from 'mango-ui-vue'

createApp(App).use(MgButton).use(MgSwitch).mount('#app')

// ↑ 同理，上面这句代码也可以换成这样写
const app = createApp(App)
app.use(MgButton)
app.use(MgSwitch)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

按需引入

em...上一小节的方法没有做到按需打包，其原因就是还需要额外的实现一个 babel-pluginopen in new window
本人因为时间原因，暂时搁置了这个任务...so sorry
因此，真正的按需加载可能需要像下面这样引用

import MgButton from 'mango-ui-vue/packages/button'

createApp(App).use(MgButton).mount('#app')
1
2
3

这样在打包时，项目将只打包进 button 组件的代码

等有时间我尽量补上 plugin 🔨

接下来，就是具体组件的使用方法了，详情请查看相关组件文档.