107 Unstar Star 317 Fork 104

新德汇 / xdh-web

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

【MY】前端项目快速成型工具

此仓库已停止更新,已迁移到:https://gitee.com/newgateway/my

cover

基于 Vue + ElementUI 的web项目工程框架。

专注于中台系统快速搭建,框架已在多个项目实战检验。 特色:

  • 搭载代码生成器,可生成底层api调用、vuex管理、模拟数据代码;
  • 内置常用超过80个基础UI组件;
  • 集成图表库、地图应用类库;
  • 支持子前端微服务子应用,可独立开发、运行、部署;
  • 自动生成路由;
  • 组件自动注册及按需加载;
  • 支持自定义主题,可以实现在线切换;
  • 支持静态配置。

开发指南

安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i @xdh/my --save

快速上手

可通过以下两种使用 My

一、采用项目工程模板创建项目【推荐】

官网提供的基于Vue项目的一站式解决方案。

git clone https://gitee.com/newgateway/my-web.git

只需把工程模板项目获取下来就可以使用,包括全部功能,开箱即用。

二、调用组件库功能

如只需用到 My 其中的某些组件,可以在已有的项目工程中安装,并完成配置。步骤:

1、安装组件库和相关插件

安装组件

npm i element-ui @xdh/my --save

安装项目依赖插件

npm i babel-plugin-component sass sass-loader --save-dev

2、配置 babel.config.js

组件采用了按需加载,需要 在babel.config.js 加上插件,如:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: `theme-chalk`
      }
    ],
    [
      'component',
      {
        libraryName: '$ui',
        libDir: 'components',
        styleLibraryName: `~node_modules/@xdh/my/ui/lib/styles`,
        ext: '.scss'
      },
      '$ui'
    ],
    [
      'component',
      {
        libraryName: '$ui/charts',
        libDir: 'packages',
        style: false
      },
      '$ui/charts'
    ],
    [
      'component',
      {
        libraryName: '$ui/map',
        libDir: 'packages',
        style: false
      },
      '$ui/map'
    ],
    [
      'component',
      {
        libraryName: '$ui/go',
        libDir: 'packages',
        style: false
      },
      '$ui/go'
    ]
  ]
}

3、配置 vue.config.js

需要在vue.config.js加上别名,如:

module.exports = {
  transpileDependencies: ['@xdh/my'],
  chainWebpack(chain) {
    chain.resolve.alias.set('$ui', '@xdh/my/ui/lib')
  }
}

4、引用组件

到此,你可以开始引入组件开始编码了,如:

<template>
  <div>
    <Button type="primary">Button</Button>
    <MyPanel title="Title">Content</MyPanel>
  </div>
</template>

<script>
  import {Button} from 'element-ui'
  import {MyPanel} from '$ui'
  export default {
    components: {
      Button,
      MyPanel
    }
  }
</script>

Comments ( 32 )

Sign in for post a comment

About

基于Vue + ElementUI 的web项目工程框架,专注于中台系统快速搭建,框架已在多个项目实战检验。 特色:搭配代码生成器,可生成api调用、vuex管理、模拟数据代码; 内置常用超过70个组件、扩展;子模块支持前端微服务,可以批量编译打包;独立开发、运行、部署;支持更新升级。 spread retract
Cancel

Releases (23)

All

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/newgateway/xdh-web.git
git@gitee.com:newgateway/xdh-web.git
newgateway
xdh-web
xdh-web
v3.x

Search

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542