1.1.0 • Published 3 years ago
mite-element v1.1.0
基于Vue的UI组件库----Mite-Element
文档说明链接
安装
npm install mite-element -S
快速上手
1.导入全部的组件
import Vue from 'vue'
import App from './App.vue'
import MiteElement from 'MiteElement'
// 需要导入css文件
import 'mite-element/lib/main.css'
Vue.use(MiteElement)
new Vue({
el: '#app',
render: h => h(App)
})
2.按需导入组件
安装babel-plugin-component:npm i babel-plugin-component -D
在项目根目录下创建babel.config.js,使用如下内容
module.exports = {
plugins: [
[
// 配置按需加载
'component',
{
// 库名
libraryName: 'mite-element',
libDir: 'lib/packages',
camel2Dash: true // 驼峰转小横线
}
]
]
}
然后按需加载使用如下
import Vue from 'vue'
import App from './App.vue'
import { Button } from 'mite-element'
Vue.use(Button)
// 使用均以m-开头,使用如下
<m-button></m-button>
new Vue({
el: '#app',
render: h => h(App)
})
3.所有组件全部导入
import Vue from 'vue'
import {
Icon,
Radio,
RadioGroup,
CheckBox,
CheckBoxGroup,
Input,
InputNumber,
Form,
FormItem,
Message,
MessageBox,
Modal,
Tabs,
TabsItem,
Button
}
Vue.use(Button)
Vue.use(Icon)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(CheckBox)
Vue.use(CheckBoxGroup)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Message)
Vue.use(MessageBox)
Vue.use(Modal)
Vue.use(Tabs)
Vue.use(TabsItem)
4.关于Animate.css动画的单独说明(重要)
// 如果需要使用复杂弹框Modal的动画,请npm install animate.css -S
// 在main.js导入animated.css
import 'animate.css'
5.单独说明(重要)
个人PC端组件库项目项目,建议慎重使用到生产环境。
6.进度表
- 1.Affix固钉
- 2.Button 按钮
- 3.Cascader 级联选择器
- 4.Checkbox 复选框
- 5.Collapse 折叠面板
- 6.Dialog 对话框
- 7.Form 表单
- 8.InfiniteScroller 无限滚动
- 9.Input 输入框
- 10.InputNumber 计数器
- 11.Message 消息提示
- 12.MessageBox 消息盒子
- 13.Pagination 分页器
- 14.Popover 弹出框
- 15.Radio 单选框
- 16.Spread 卷轴
- 17.Swiper 轮播图
- 18.Switch 切换
- 19.Table 表格
- 20.Tabs切换栏
- 21.TimePIcker时间选择器
- 22.Tree 树形控件
- 23.Upload 文件上传
7.开发问题记录
- 在组件中使用的scss文件在vuepress中无法解析,解决办法如下:
// 在vuepress的config.js配置文件中加入如下内容进行scss的解析,前提是要按照sass-loader各node-sass
const path = require('path')
chainWebpack: (config, isServer) => {
config.resolveLoader
.modules
// 路径视具体的安装路径决定
.add(path.resolve(__dirname, '../../../node_modules'))
}