# qiankun-frame

**Repository Path**: cli-templates/qiankun-frame

## Basic Information

- **Project Name**: qiankun-frame
- **Description**: qiankun主应用脚手架模版，基于vue3 + typescript。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-08
- **Last Updated**: 2023-09-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# qiankun-frame

#### 介绍
这是基于qiankun微前端的主应用脚手架，基于vue3 + typescript + element-plus。

#### 使用方式一

1. 拷贝工程到本地，全局替换

   {{projectName}}=项目名

   {{author}}=作者

2. yarn install 或 npm install

3. yarn dev

####使用方式二

1. 通过@lhy-assist/cli命令行生成

   lhy create qiankun-frame

2. yarn install 或 npm install

3. yarn dev

#### 简介

1. 样式

   qiankun-frame全局使用Element-plus的样式和设计。

   qiankun-frame通过package.json中的name作为命名空间进行css命名空间隔离，支持并推荐使用Element-plus提供的全局css变量以保持风格统一。

   自定义命名空间样式例子

   ```vue
   <template>
   	<div class="my-css" v-ns-class></div>
   	<!--
   		=> <div class="${cssNamespace}-my-css"></div>
   	-->
   </template>
   <style lang="scss">
       // .my-css => .${cssNamespace}-my-css
       .#{getNS('my-css')} {
           color: getElVar(color-primary);
       }
   </style>
   ```

   对比常规样式

   ```vue
   <template>
   	<div class="my-css"></div>
   </template>
   <style lang="scss">
       .my-css {
           color: getElVar(color-primary);
       }
   </style>
   ```

2. 微前端主应用

   qiankun-frame基于qiankun微前端框架搭建。

   qiankun-frame提供了以下定义作为子应用共享，均在src/qiankun目录下

   ​	frame-action	-- 供子应用调用的方法

   ​	frame-state	-- 供子应用使用的数据

   qiankun-frame需导出frame-lib供子应用作为类型定义使用，以保证主应用和子应用类型统一，相关导出定义在lib目录下