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