# 新增子项目
# 复制现有vue子项目（添加一个links子项目为例）
1、复制/packages/article子项目重命名为/packages/links。
2、在/package.json中的scripts中添加以下命令：
"scripts": {
"serve:links": "pnpm run serve -C packages/links",
"build:links": "pnpm run build -C packages/links",
},
1
2
3
4
2
3
4
3、在/.env.developent、/.env.production中添加如下配置：
# 子项目 links
# 子项目目录名
MICRO_LINKS_ROOT_DIR=links
# 开发环境端口
MICRO_LINKS_PORT=8001
# 开发localhost或者ip
MICRO_LINKS_HOST=localhost
1
2
3
4
5
6
7
2
3
4
5
6
7
4、在/scripts/config/index.ts中添加如下配置:
// 在子框架配置childProjectConfig中追加
export const childProjectConfig: Record<string, ChildProjectConfigItem> = {
'links': {
rootDir: process.env.MICRO_LINKS_ROOT_DIR,
outputDir: 'dist',
host: process.env.MICRO_LINKS_HOST,
port: Number(process.env.MICRO_LINKS_PORT || 0),
serveRun: 'serve:links',
buildRun: 'build:links'
},
}
// 在主框架配置中，哪个主框架需要就在哪个主框架subproject下添加
export const mainProjectConfig: Record<string, MainProjectConfigItem> = {
'main': {
subproject: [
'links',
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
5、修改子项目vue配置：
/packages/links/vue.config.js中，把MICRO_ARTICLE_前缀替换成MICRO_LINKS_/packages/links/vue.config.js中，把article替换成links/packages/links/vue.config.js中，把8077端口号替换成新端口号如8001/packages/links/.env.**中，把VUE_APP_PORT端口号替换成新端口号如8001
至此基本完成，你可以在此项目下运行
pnpm install、pnpm run serve进行测试。
6、子项目删除不需要的页面和路由如add、edit等等，添加新的页面和路由（可以参照admin-element-vue文档 (opens new window)）。
7、在你需要的主框架中配置links子项目的路由，以主框架/main/src/layouts/QiankunLayout/routes.ts为例：
// 追加如下代码
const QiankunLayoutRoutes: Array<RoutesDataItem> = [
{
icon: 'menu-links',
title: 'qiankun-layout.menu.links',
path: '/links',
redirect: '/links/list',
roles: ['links'],
component: BlankLayout,
children: [
{
title: 'qiankun-layout.menu.links.list',
path: 'list',
roles: ['links-list'],
component: QianKunStartScreen
},
]
},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
8、运行框架进行测试pnpm run serve。