MyUI是美亚柏科旗下新德汇出品的Web前端我的项目工程框架。基于 Vue + ElementUI ,专一于中台零碎疾速搭建,框架已在多个我的项目实战测验。

特色

  • 搭载代码生成器,可生成底层api调用、vuex治理、模仿数据代码;
  • 内置罕用超过150个根底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 node-sass sass-loader --save-dev

2、配置 babel.config.js

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

module.exports = {  presets: [    '@vue/cli-plugin-babel/preset'  ],  plugins: [    ...require('@xdh/my/core/babel.plugins')  ]}

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>

三、演示截图

结尾

本期就分享到这里,我是小编南风吹,专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源!
心愿能与大家独特学习交换,欢送关注我的公众号【Github导航站】

往期举荐

太漂亮了!有了3款开源图标库,不必再去求设计师了

10个相见恨晚的vue.js库!用好了,事倍功半!

太及时了!13个Spring Boot练手我的项目,用好了,升职涨薪不必愁

程序员接私活必备后盾框架,不必反复造轮子,网友:太好用了!

还在从头到尾撸我的项目?这6个SpringBoot我的项目用好了,事倍功半!

「00后缩写黑话翻译器」登上GitHub热榜,中年网民终于能看懂年轻人的awsl