0.0.6 • Published 7 years ago
gm-ui v0.0.6
gm-ui
一个vue的UI组件
出发点
我们的技术栈是vue,市场上vue的UI组件虽然很多,但应对公司的项目来说,用起来很不方便
后台系统业务繁多,适合公司项目的UI组件需求迫切
烦透了直接复制粘贴别人组件,看组件使用文档的过程
于私来说,进一步熟悉vue的常用操作
如何使用
1 开始vue项目
通过vue-cli脚手架构建项目
如果没有安装vue-cli的同学,要先全局安装vue-cli
npm install -g vue-cli
或者
// i 是install的简写(啰嗦给新手的同学)
npm i -g vue-cli
vue-cli装完后可以开始下一步的操作
vue init webpack projectName
cd projectName
npm install
# 安装我们的主角gm-ui
npm install gm-ui -D
这样整个工程就搭建完了,可以开始我们的项目了
2 使用gm-ui
全局使用
(1) 在主入口main.js中全局引入 例如我们的入口文件main.js是这样的
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueResource from 'vue-resource'
// 全局引入gm-ui
import { gmInstall } from 'gm-ui'
// 注册gm-ui
Vue.use(gmInstall)
import router from './router/index'
Vue.use(VueResource)
Vue.config.devtools = true
import App from './App'
Vue.http.options.emulateJSON = true
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
(2) 全局引入后,如何在组件中使用
<template lang="html">
<div>
<side-menu :menus="menus"></side-menu>
</div>
</template>
<script>
export default {
data () {
return {
menus: [{
showChild: true,
title: 'gm-ui',
subTitle: '',
group: true,
subMenu: [{
title: '',
group: [{
link: '',
title: '前端',
subTitle: ''
}, {
link: '',
title: 'Android',
subTitle: ''
}, {
link: '',
title: 'iOS',
subTitle: ''
}, {
link: '后台',
title: '',
subTitle: ''
}, {
link: '产品',
title: '',
subTitle: ''
}, {
link: '设计',
title: '',
subTitle: ''
}]
}]
}]
}
}
}
</script>
<style lang="less">
</style>
在组件间接使用
<template lang="html">
<div>
<side-menu :menus="menus"></side-menu>
</div>
</template>
<script>
import { Menu } from "gm-ui"
export default {
data () {
return {
menus: [{
showChild: true,
title: 'gm-ui',
subTitle: '',
group: true,
subMenu: [{
title: '',
group: [{
link: '',
title: '前端',
subTitle: ''
}, {
link: '',
title: 'Android',
subTitle: ''
}, {
link: '',
title: 'iOS',
subTitle: ''
}, {
link: '后台',
title: '',
subTitle: ''
}, {
link: '产品',
title: '',
subTitle: ''
}, {
link: '设计',
title: '',
subTitle: ''
}]
}]
}]
}
},
components: {
Menu
}
}
</script>
<style lang="less">
</style>
目前组件如下:
menu
dropdown
scrollBar
参考资料
bootstrap,
material-ui,
elemental-ui,
Semantic-UI,
ant design,
react-weui
Radon UI