diff --git a/docs/zh/guide/builder.md b/docs/zh/guide/builder.md
index fbe9c1e9..a28e5e9a 100644
--- a/docs/zh/guide/builder.md
+++ b/docs/zh/guide/builder.md
@@ -19,17 +19,4 @@ Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看[配
### html 模版
-Webpack 对于 html 模版是没有什么限制的，而 Vite 推荐模版文件就放在项目根目录下。Webpack 有个非常强大的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)，Fes.js 引入了[vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 进行能力的对齐，如果开发者想要个性化定制模版，那么在配置上还是存在差异的。
-
-## 升级 2.1.x
-
-### 不变更构建方式
-
-直接添加 Webpack 构建依赖包即可： `npm i @fesjs/build-webpack -D`。
-
-### 换成 Vite
-
-1. 安装依赖包 `npm i @fesjs/build-vite`。
-2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config)。
-3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
-4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
+html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)，Vite 使用[vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 进行个性化配置。
diff --git a/docs/zh/guide/directory-structure.md b/docs/zh/guide/directory-structure.md
index dc28cf9f..605ea673 100644
--- a/docs/zh/guide/directory-structure.md
+++ b/docs/zh/guide/directory-structure.md
@@ -1,6 +1,7 @@
# 目录结构
在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的：
+
```
fes-template
├── package.json
@@ -8,9 +9,10 @@ fes-template
├── mock.js
├── .fes.js
├── .env
+├── index.html
├── dist
├── public
-│ └── index.html
+│ └── logo.png
└── src
├── .fes
└── pages
@@ -19,113 +21,108 @@ fes-template
```
### package.json
+
```json
{
- "name": "@fesjs/template",
- "version": "2.0.0",
- "description": "fes项目模版",
- "scripts": {
- "build": "fes build",
- "prod": "FES_ENV=prod fes build",
- "analyze": "ANALYZE=1 fes build",
- "dev": "fes dev",
- "test": "fes test"
- },
- "keywords": [
- "管理端",
- "fes",
- "fast",
- "easy",
- "strong"
- ],
- "files": [
- ".eslintrc.js",
- ".gitignore",
- ".fes.js",
- ".fes.prod.js",
- "mock.js",
- "package.json",
- "README.md",
- "tsconfig.json",
- "/src",
- "/config"
- ],
- "repository": {
- "type": "git",
- "url": "git+https://github.com/WeBankFinTech/fes.js.git",
- "directory": "packages/fes-template"
- },
- "author": "harrywan",
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/WeBankFinTech/fes.js/issues"
- },
- "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
- "publishConfig": {
- "access": "public"
- },
- "devDependencies": {
- "@webank/eslint-config-webank": "0.3.1"
- },
- "dependencies": {
- "@fesjs/fes": "^2.0.0",
- "@fesjs/plugin-access": "^2.0.0",
- "@fesjs/plugin-layout": "^3.0.0",
- "@fesjs/plugin-locale": "^3.0.0",
- "@fesjs/plugin-model": "^2.0.0",
- "@fesjs/plugin-enums": "^2.0.0",
- "@fesjs/plugin-jest": "^2.0.0",
- "@fesjs/plugin-vuex": "^2.0.0",
- "@fesjs/plugin-request": "^2.0.0",
- "@fesjs/plugin-qiankun": "^2.0.0",
- "@fesjs/plugin-sass": "^2.0.0",
- "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
- "@fesjs/plugin-windicss": "^2.0.0",
- "@fesjs/fes-design": "^0.1.10",
- "vue": "^3.0.5",
- "vuex": "^4.0.0"
- },
- "private": true
+ "name": "@fesjs/template",
+ "version": "2.0.0",
+ "description": "fes项目模版",
+ "scripts": {
+ "build": "fes build",
+ "prod": "FES_ENV=prod fes build",
+ "analyze": "ANALYZE=1 fes build",
+ "dev": "fes dev",
+ "test": "fes test"
+ },
+ "keywords": ["管理端", "fes", "fast", "easy", "strong"],
+ "files": [".eslintrc.js", ".gitignore", ".fes.js", ".fes.prod.js", "mock.js", "package.json", "README.md", "tsconfig.json", "/src", "/config"],
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+ "directory": "packages/fes-template"
+ },
+ "author": "harrywan",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/WeBankFinTech/fes.js/issues"
+ },
+ "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+ "publishConfig": {
+ "access": "public"
+ },
+ "devDependencies": {
+ "@webank/eslint-config-webank": "0.3.1"
+ },
+ "dependencies": {
+ "@fesjs/fes": "^2.0.0",
+ "@fesjs/plugin-access": "^2.0.0",
+ "@fesjs/plugin-layout": "^3.0.0",
+ "@fesjs/plugin-locale": "^3.0.0",
+ "@fesjs/plugin-model": "^2.0.0",
+ "@fesjs/plugin-enums": "^2.0.0",
+ "@fesjs/plugin-jest": "^2.0.0",
+ "@fesjs/plugin-vuex": "^2.0.0",
+ "@fesjs/plugin-request": "^2.0.0",
+ "@fesjs/plugin-qiankun": "^2.0.0",
+ "@fesjs/plugin-sass": "^2.0.0",
+ "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
+ "@fesjs/plugin-windicss": "^2.0.0",
+ "@fesjs/fes-design": "^0.1.10",
+ "vue": "^3.0.5",
+ "vuex": "^4.0.0"
+ },
+ "private": true
}
```
+
其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
### tsconfig.json
+
解决 `@fesjs/fes` 和使用 `@` 的 API 提示
### .fes.js
+
配置文件，包含 Fes.js 内置功能和安装的其他插件配置。
### mock.js
+
`mock` 数据的配置文件。
### .env
+
定义环境变量。
比如 `.env` 文件内容如下：
+
```
PORT=8888
FES_ENV=prod
```
+
等同于 node 端运行时，设置如下：
+
```
process.env.PORT = '8888';
process.env.FES_ENV = 'prod';
```
-
### dist 目录
+
执行 `fes build` 后，产物默认会存放在这里。
## public 目录
+
此目录下所有文件为静态资源，会被复制到输出路径。
-### index.html
+## index.html
+
默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。
## src 目录
### .fes 目录
+
临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
:::warning
@@ -133,7 +130,9 @@ process.env.FES_ENV = 'prod';
:::
### pages 目录
+
所有路由组件文件存放在这里。
### app.js
-运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
\ No newline at end of file
+
+运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
diff --git a/docs/zh/guide/upgrade2.1.md b/docs/zh/guide/upgrade2.1.md
index 5c3e3995..2710fce2 100644
--- a/docs/zh/guide/upgrade2.1.md
+++ b/docs/zh/guide/upgrade2.1.md
@@ -19,4 +19,11 @@
2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config)。
3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
-5. 由于需要兼容 Vite 写法，相关插件也做了相关调整，因此依赖的插件都需要升级最新的版本。如果用了 [@fesjs/plugin-sass](../reference/plugin/plugins/sass.html) 插件，直接移除，手动安装 `sass` 依赖即可。
+
+## 插件
+
+如果使用 Webpack 构建，插件是向后兼容的。如果是使用 Vite 构建，大部分插件也是向后兼容的，需要处理的插件有：
+
+- [@fesjs/plugin-qiankun](../reference/plugins/qiankun) 需要升级到 `2.1.x` 版本。
+- [@fesjs/plugin-windicss](../reference/plugins/windicss) 需要升级到 `2.1.x` 版本。
+- [@fesjs/plugin-sass](../reference/plugins/sass) 直接移除，再安装 `sass` 包即可。
diff --git a/packages/create-fes-app/templates/app/h5/index.html b/packages/create-fes-app/templates/app/h5/index.html
new file mode 100644
index 00000000..e2beb916
--- /dev/null
+++ b/packages/create-fes-app/templates/app/h5/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ <%= title %>
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/create-fes-app/templates/app/h5/package.json b/packages/create-fes-app/templates/app/h5/package.json
index 22a1c8d6..632e9c38 100644
--- a/packages/create-fes-app/templates/app/h5/package.json
+++ b/packages/create-fes-app/templates/app/h5/package.json
@@ -48,6 +48,7 @@
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-icon": "^2.0.0",
"@fesjs/plugin-request": "^2.0.0",
+ "@fesjs/build-webpack": "^1.0.0",
"vue": "^3.2.6",
"core-js": "^3.8.3"
},
diff --git a/packages/create-fes-app/templates/app/h5/public/index.html b/packages/create-fes-app/templates/app/h5/public/index.html
deleted file mode 100644
index 750a5c09..00000000
--- a/packages/create-fes-app/templates/app/h5/public/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- <%= htmlWebpackPlugin.options.title %>
-
-
-
-
-
-
-
diff --git a/packages/create-fes-app/templates/app/pc/public/index.html b/packages/create-fes-app/templates/app/pc/index.html
similarity index 100%
rename from packages/create-fes-app/templates/app/pc/public/index.html
rename to packages/create-fes-app/templates/app/pc/index.html
diff --git a/packages/create-fes-app/templates/app/pc/package.json b/packages/create-fes-app/templates/app/pc/package.json
index 54b42aa4..d7d99e21 100644
--- a/packages/create-fes-app/templates/app/pc/package.json
+++ b/packages/create-fes-app/templates/app/pc/package.json
@@ -52,7 +52,8 @@
"@fesjs/plugin-layout": "^4.0.0",
"@fesjs/plugin-model": "^2.0.0",
"@fesjs/plugin-enums": "^2.0.0",
- "@fesjs/fes-design": "^0.3.0",
+ "@fesjs/fes-design": "^0.4.0",
+ "@fesjs/build-webpack": "^1.0.0",
"vue": "^3.2.6",
"core-js": "^3.8.3"
},