# microapp-vue3-ui

**Repository Path**: cxysl/microapp-vue3-ui

## Basic Information

- **Project Name**: microapp-vue3-ui
- **Description**: qiankun微应用-vue3项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-09
- **Last Updated**: 2023-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# microapp-vue3-ui2

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## 项目说明

**本项目为 vue3 版的 qiankun 子项目 Demo** ； 

项目用到的主要技术栈： vue3 + @vue/cli4 + webpack4 + vuex + vue-router + elementPlus+ qiankun 的各生命周期逻辑 (qiankun资源子应用没有安装，主应用安装就行了)

项目复用了之前的layout布局框架，且保持了原来项目代码层级结构，因此使用时你会很熟悉；

由于layout布局模块复用的以前的，因此里面的还是vue2的编码风格，还存在一些不影响主流程的兼容性bug未处理完；

关于子应用的权限控制，子应用有权限的资源主应用都下发了，存到了子应用vuex里面： global.btnCodeList; 现在子应用对按钮做权限控制（是否显示）可使用如下方法：

```html
<!-- 
	具体参考 src\views\demo-page\index.vue
	注意： 	1、入参是一个数组；
		2、传的的是资源的code，且code去掉了系统编码，即传的code是页面+api两级就可（一般一个资源code由 系统编码+页面编码+资源编码 三级组成）
 -->
      <el-button 
        v-if="$checkPermission([`DemoPage.add`])"
        @click="addOneOrg"
      >
        新增
      </el-button>
```

## 官方文档

qiankun:  [https://qiankun.umijs.org/zh/api](https://qiankun.umijs.org/zh/api)

vue3:  [https://cn.vuejs.org/guide/introduction.html](https://cn.vuejs.org/guide/introduction.html)

elementPlus: [https://element-plus.org/zh-CN/component/button.html](https://element-plus.org/zh-CN/component/button.html)

## 结语

后面系统要实现什么业务由你来书写：开始你的表演，请秀翻他/她们，Good Luck！