关于前端:这款优秀的VueElementUI桌面端一站式框架爱了

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