mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 03:05:07 +08:00
chore: fix conflict
This commit is contained in:
winixt
commit
72ccc25c57
4
.eslintignore
Normal file
4
.eslintignore
Normal file
@ -0,0 +1,4 @@
|
||||
**/*.ts
|
||||
|
||||
lib
|
||||
node_modules
|
||||
13
.eslintrc.js
13
.eslintrc.js
@ -1,14 +1,11 @@
|
||||
|
||||
module.exports = {
|
||||
extends: [
|
||||
'@webank/eslint-config-webank/vue.js'
|
||||
],
|
||||
extends: ['@webank/eslint-config-webank/vue.js'],
|
||||
globals: {
|
||||
// 这里填入你的项目需要的全局变量
|
||||
// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
|
||||
//
|
||||
// Vue: false
|
||||
__DEV__: false
|
||||
__DEV__: false,
|
||||
},
|
||||
rules: {
|
||||
'vue/comment-directive': 'off',
|
||||
@ -16,9 +13,9 @@ module.exports = {
|
||||
'import/no-unresolved': 'off',
|
||||
'no-restricted-syntax': 'off',
|
||||
'no-undefined': 'off',
|
||||
'vue/valid-template-root': 'off'
|
||||
'vue/valid-template-root': 'off',
|
||||
},
|
||||
env: {
|
||||
jest: true
|
||||
}
|
||||
jest: true,
|
||||
},
|
||||
};
|
||||
|
||||
21
.github/actions/generate-changelog/action.yml
vendored
21
.github/actions/generate-changelog/action.yml
vendored
@ -1,21 +0,0 @@
|
||||
|
||||
name: Generate changelog
|
||||
description: Uses conventional-changelog to generate the changelog from a tag to another
|
||||
|
||||
inputs:
|
||||
from:
|
||||
description: Old tag
|
||||
to:
|
||||
description: New tag
|
||||
|
||||
outputs:
|
||||
changelog:
|
||||
description: The new changelog, formatted as a JSON string
|
||||
|
||||
runs:
|
||||
using: node12
|
||||
main: main.js
|
||||
|
||||
branding:
|
||||
icon: clock
|
||||
color: yellow
|
||||
14
.github/actions/generate-changelog/main.js
vendored
14
.github/actions/generate-changelog/main.js
vendored
@ -1,14 +0,0 @@
|
||||
|
||||
const cp = require("child_process");
|
||||
cp.execSync(`cd ${__dirname}; npm ci`);
|
||||
|
||||
const path = require("path");
|
||||
const core = require("@actions/core");
|
||||
const lernaChangelog = path.resolve(__dirname, "node_modules/.bin/conventional-changelog");
|
||||
|
||||
const exec = cmd => cp.execSync(cmd).toString().trim();
|
||||
|
||||
const changelog = exec(`node ${lernaChangelog} -p cmyr-config -r 2`);
|
||||
console.log(changelog);
|
||||
|
||||
core.setOutput("changelog", JSON.stringify(changelog.split('\n').slice(4).join('\n')));
|
||||
3082
.github/actions/generate-changelog/package-lock.json
generated
vendored
3082
.github/actions/generate-changelog/package-lock.json
generated
vendored
File diff suppressed because it is too large
Load Diff
12
.github/actions/generate-changelog/package.json
vendored
12
.github/actions/generate-changelog/package.json
vendored
@ -1,12 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "update-changelog",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@actions/core": "^1.0.0",
|
||||
"conventional-changelog-cli": "^2.1.0",
|
||||
"conventional-changelog-cmyr-config": "^1.2.3",
|
||||
"cz-conventional-changelog": "^3.3.0"
|
||||
}
|
||||
}
|
||||
16
.github/workflows/docs.yml
vendored
16
.github/workflows/docs.yml
vendored
@ -11,10 +11,15 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2.3.1
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: PNPM
|
||||
uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 8.1.0
|
||||
|
||||
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
|
||||
run: yarn && yarn docs:build
|
||||
run: pnpm i && pnpm docs:build
|
||||
|
||||
- name: Deploy
|
||||
uses: easingthemes/ssh-deploy@main
|
||||
@ -28,7 +33,7 @@ jobs:
|
||||
# 腾讯云默认用户名为root
|
||||
REMOTE_USER: root
|
||||
# 目标目录
|
||||
TARGET: /data/web-packages/p/fesjs/2.0
|
||||
TARGET: /data/web-packages/p/fesjs
|
||||
|
||||
build-and-deploy-pages:
|
||||
concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
|
||||
@ -39,9 +44,8 @@ jobs:
|
||||
|
||||
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
|
||||
run: |
|
||||
yarn
|
||||
yarn docs:build-pages
|
||||
|
||||
pnpm i
|
||||
pnpm docs:build
|
||||
- name: Deploy 🚀
|
||||
uses: JamesIves/github-pages-deploy-action@v4.3.3
|
||||
with:
|
||||
|
||||
23
.github/workflows/release-notes.mjs
vendored
Executable file
23
.github/workflows/release-notes.mjs
vendored
Executable file
@ -0,0 +1,23 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { readFileSync, writeFileSync } from "fs";
|
||||
const tag = process.argv[2].replace("v", "");
|
||||
const log = readFileSync("./CHANGELOG.md", { encoding: "utf-8" }).split("\n");
|
||||
let result = "";
|
||||
let inScope = false;
|
||||
const regex = new RegExp(`^#+ \\[${tag}`);
|
||||
for (let i = 0; i < log.length; i++) {
|
||||
if (regex.test(log[i])) {
|
||||
inScope = true;
|
||||
result += log[i];
|
||||
continue;
|
||||
}
|
||||
if (inScope && /^#+ \[/.test(log[i])) {
|
||||
inScope = false;
|
||||
break;
|
||||
}
|
||||
if(inScope){
|
||||
result += `\n${log[i]}`;
|
||||
}
|
||||
}
|
||||
writeFileSync(`notes-v${tag}.md`, result)
|
||||
77
.github/workflows/release.yml
vendored
77
.github/workflows/release.yml
vendored
@ -1,53 +1,30 @@
|
||||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags: ["v*"]
|
||||
push:
|
||||
tags:
|
||||
- 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
|
||||
|
||||
name: Create Release
|
||||
|
||||
jobs:
|
||||
github_release:
|
||||
name: Trigger GitHub release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout the new tag
|
||||
uses: actions/checkout@v1.0.0
|
||||
|
||||
- name: Get tag info
|
||||
id: tags
|
||||
uses: babel/actions/get-release-tags@v2
|
||||
|
||||
- name: Generate the changelog
|
||||
id: changelog
|
||||
uses: ./.github/actions/generate-changelog
|
||||
with:
|
||||
from: ${{ steps.tags.outputs.old }}
|
||||
to: ${{ steps.tags.outputs.new }}
|
||||
env:
|
||||
GITHUB_AUTH: ${{ secrets.ACCESS_TOKEN }}
|
||||
|
||||
- name: Create a draft GitHub release
|
||||
uses: babel/actions/publish-github-release@v2
|
||||
with:
|
||||
tag: ${{ steps.tags.outputs.new }}
|
||||
changelog: ${{ steps.changelog.outputs.changelog }}
|
||||
token: ${{ secrets.ACCESS_TOKEN }}
|
||||
|
||||
- name: Check if releasing from master
|
||||
id: is_master
|
||||
uses: babel/actions/ref-matches-branch@v2
|
||||
with:
|
||||
name: master
|
||||
|
||||
- name: Update CHANGELOG.md
|
||||
if: steps.is_master.outputs.result == 1
|
||||
uses: babel/actions/update-changelog@v2
|
||||
with:
|
||||
changelog: ${{ steps.changelog.outputs.changelog }}
|
||||
|
||||
- name: Commit CHANGELOG.md
|
||||
if: steps.is_master.outputs.result == 1
|
||||
run: |
|
||||
git add CHANGELOG.md
|
||||
git -c user.name="wanchun" -c user.email="445436867@qq.com" \
|
||||
commit -m "Add ${{ steps.tags.outputs.new }} to CHANGELOG.md [skip ci]" --no-verify --quiet
|
||||
git push "https://wanchun:${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git" master
|
||||
build:
|
||||
name: Create Release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@master
|
||||
- name: Get the release version from the tag
|
||||
shell: bash
|
||||
if: env.RELEASE_VERSION == ''
|
||||
run: |
|
||||
echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
|
||||
- name: Generate Release Notes
|
||||
run: |
|
||||
./.github/workflows/release-notes.mjs ${{ env.RELEASE_VERSION }}
|
||||
cat notes-${{ env.RELEASE_VERSION }}.md
|
||||
- name: Create Release for Tag
|
||||
id: release_tag
|
||||
uses: softprops/action-gh-release@v1
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
|
||||
with:
|
||||
body_path: notes-${{ env.RELEASE_VERSION }}.md
|
||||
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@ -6,6 +6,10 @@
|
||||
.cache
|
||||
.temp
|
||||
.hound
|
||||
.fes
|
||||
.swc
|
||||
.fes-develop
|
||||
.fes-production
|
||||
dist
|
||||
*.log
|
||||
node_modules
|
||||
@ -14,7 +18,6 @@ npm-debug.log
|
||||
/packages/fes-doc/docs/.vuepress/dist
|
||||
/packages/fes-template/package-lock.json
|
||||
/.changelog
|
||||
|
||||
/packages/*/lib
|
||||
/packages/*/es
|
||||
/packages/*/dist
|
||||
|
||||
4
.npmrc
4
.npmrc
@ -1 +1,3 @@
|
||||
registry=https://registry.npmmirror.com
|
||||
registry=https://registry.npmmirror.com
|
||||
auto-install-peers=true
|
||||
shamefully-hoist=true
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
4
.prettierrc.js
Normal file
4
.prettierrc.js
Normal file
@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies, import/extensions
|
||||
...require('@webank/eslint-config-webank/.prettierrc.js'),
|
||||
};
|
||||
657
CHANGELOG.md
657
CHANGELOG.md
@ -1,4 +1,585 @@
|
||||
# Changelog
|
||||
# [3.0.0-rc.17](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.16...v3.0.0-rc.17) (2023-03-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 水印插件兼容微前端场景,应用唯一 ([e7987ee](https://github.com/WeBankFinTech/fes.js/commit/e7987ee60f342e305e4c123a1610ea301f4ebd53))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.16](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.15...v3.0.0-rc.16) (2023-03-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复plugin-access和plugin-layout中noFoundHandler和unAccessHandler的类型错误问题 ([b1adca9](https://github.com/WeBankFinTech/fes.js/commit/b1adca9f117234584bbe67d5d39f5ee91948fcf0))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.15](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.14...v3.0.0-rc.15) (2023-03-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复其他dom变化也会导致水印重新渲染的问题 ([#175](https://github.com/WeBankFinTech/fes.js/issues/175)) ([7c432ba](https://github.com/WeBankFinTech/fes.js/commit/7c432badf6f7563d872da62fbca65c124f4ca4cd))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **plugin-layout:** 多页签支持配置title ([#174](https://github.com/WeBankFinTech/fes.js/issues/174)) ([fc4173a](https://github.com/WeBankFinTech/fes.js/commit/fc4173a7e800511ee03abbf5169b2bed5e94beaf))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.14](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.13...v3.0.0-rc.14) (2023-03-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复plugin-layout中计算默认展开菜单未考虑未配置在菜单的路由场景 ([#172](https://github.com/WeBankFinTech/fes.js/issues/172)) ([943ffba](https://github.com/WeBankFinTech/fes.js/commit/943ffba07ff0e201635d4f01d6126bdd5829d0ef))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.13](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.12...v3.0.0-rc.13) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* cjs ([862ba3c](https://github.com/WeBankFinTech/fes.js/commit/862ba3cf9c7d123755f908e5aabb01ca553355e6))
|
||||
* css ([8ef9a1c](https://github.com/WeBankFinTech/fes.js/commit/8ef9a1c862055d1b1ee8a8f0daac43cd4ef23b57))
|
||||
* exclude ([9204184](https://github.com/WeBankFinTech/fes.js/commit/92041845c68320f7b68da8825e0be350c82cd67a))
|
||||
* keep browsers ([9d6b32b](https://github.com/WeBankFinTech/fes.js/commit/9d6b32be88aba540e6b4b5334f9f9c92285abcd8))
|
||||
* minify ([bda1bb4](https://github.com/WeBankFinTech/fes.js/commit/bda1bb4cf53e7b9dd12d74e4eff416c80857e763))
|
||||
* rm swc/css ([0e05f23](https://github.com/WeBankFinTech/fes.js/commit/0e05f23bc15d86170d44b86ed6bf3dc9adbec65e))
|
||||
* swc/css ([2d92ad8](https://github.com/WeBankFinTech/fes.js/commit/2d92ad883f16467b6a306cbc66b961ab9e22bafe))
|
||||
* swc/css ([c4fd1f6](https://github.com/WeBankFinTech/fes.js/commit/c4fd1f6fea3be84f19c65ff048290684abb21e1f))
|
||||
* targets ([acb27c4](https://github.com/WeBankFinTech/fes.js/commit/acb27c4c918fa91e04540a3eb44435936c34f556))
|
||||
* 固定corejs版本吧 ([f823a8c](https://github.com/WeBankFinTech/fes.js/commit/f823a8cf5e8c284487c5c3efb7fb4b11ac0bb58f))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* log more error ([f5dddd7](https://github.com/WeBankFinTech/fes.js/commit/f5dddd770057f562bcff24bdc3bf3e18fad54aa1))
|
||||
* plugin-swc ([e05fb32](https://github.com/WeBankFinTech/fes.js/commit/e05fb32a76c7ef309f17ada1ed4bc340886d768b))
|
||||
* swc/css ([a9c8469](https://github.com/WeBankFinTech/fes.js/commit/a9c8469b9592b4bff9639488b50d01ffd2e09278))
|
||||
* use swc with webpack ([3c7edef](https://github.com/WeBankFinTech/fes.js/commit/3c7edefc622046d012701c86efbc87a5acb805c9))
|
||||
* 升级swc版本 ([3211408](https://github.com/WeBankFinTech/fes.js/commit/32114081336d00f717bbc04ce9b3de2fbe42fce8))
|
||||
* 只在prod开压缩 ([bca7273](https://github.com/WeBankFinTech/fes.js/commit/bca727338bc8220e7a8051609fdc1d75a37216fe))
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* devtool ([db6f279](https://github.com/WeBankFinTech/fes.js/commit/db6f2799efae436843d89e2abcd6600e4fc52d52))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.12](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.11...v3.0.0-rc.12) (2023-02-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复 ts 类型声明问题 ([159fcf0](https://github.com/WeBankFinTech/fes.js/commit/159fcf013bb795d457f79a32bd8756149b9fff23))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.11](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.10...v3.0.0-rc.11) (2023-02-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* .d.ts 类型异常 ([5d537c5](https://github.com/WeBankFinTech/fes.js/commit/5d537c55c0c3d409afa04c600954aefa77a6c57b))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.10](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.9...v3.0.0-rc.10) (2023-02-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* layout插件菜单会自动展开当前路由 & 修复之前不合理用法 ([#171](https://github.com/WeBankFinTech/fes.js/issues/171)) ([e3bd573](https://github.com/WeBankFinTech/fes.js/commit/e3bd57342957124fe09db98b37231e7749b6a94d))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.9](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.8...v3.0.0-rc.9) (2023-01-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix login plugin build error ([#169](https://github.com/WeBankFinTech/fes.js/issues/169)) ([a1cbdb5](https://github.com/WeBankFinTech/fes.js/commit/a1cbdb558f7f361993dc66d8d12eb65baeba3034))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.8](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.7...v3.0.0-rc.8) (2023-01-11)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 添加 login 插件 ([#168](https://github.com/WeBankFinTech/fes.js/issues/168)) ([8332b11](https://github.com/WeBankFinTech/fes.js/commit/8332b1114ce73b49a5facb251a045edef019b232))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.7](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.6...v3.0.0-rc.7) (2023-01-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 解决 core-js 版本问题 ([#164](https://github.com/WeBankFinTech/fes.js/issues/164)) ([eee453b](https://github.com/WeBankFinTech/fes.js/commit/eee453b601c0799b4c4836e8dbde77e80e0871f8))
|
||||
* webpack 缓存不断叠加 ([#167](https://github.com/WeBankFinTech/fes.js/issues/167)) ([ab4cc6a](https://github.com/WeBankFinTech/fes.js/commit/ab4cc6a5a8d6f99921597720d184cc3efe13b100))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **build script:** generate sourcemap for developer ([#162](https://github.com/WeBankFinTech/fes.js/issues/162)) ([22000e4](https://github.com/WeBankFinTech/fes.js/commit/22000e4f9c254e1597c750c1f1f3a36c5672547b))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.6](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.5...v3.0.0-rc.6) (2022-12-11)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* upgrade vite4.x ([#160](https://github.com/WeBankFinTech/fes.js/issues/160)) ([3b0ab19](https://github.com/WeBankFinTech/fes.js/commit/3b0ab19bf195f96957c23dda28540be5c2d1407a))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.5](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.4...v3.0.0-rc.5) (2022-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 支持配置选择vite ([#159](https://github.com/WeBankFinTech/fes.js/issues/159)) ([42b83cc](https://github.com/WeBankFinTech/fes.js/commit/42b83cc54fdea8163b394e17f6660d10246806b5))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.4](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.3...v3.0.0-rc.4) (2022-11-29)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* qiankun插件支持vite ([#157](https://github.com/WeBankFinTech/fes.js/issues/157)) ([5c44181](https://github.com/WeBankFinTech/fes.js/commit/5c44181fcd8d9fdbe2f8d99ce7421587079c7296))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.3](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.2...v3.0.0-rc.3) (2022-11-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复 viteLegacy 配置问题 ([aec267f](https://github.com/WeBankFinTech/fes.js/commit/aec267f83ff0486b78f3b33f97b8608fc4e1833f))
|
||||
* 修复 windows 兼容问题 ([9a518bc](https://github.com/WeBankFinTech/fes.js/commit/9a518bcb9598798498064c948da698511cbb5189))
|
||||
* remove Created by MumbleFE ([b6ba33d](https://github.com/WeBankFinTech/fes.js/commit/b6ba33df6e945d7e78feb209d2117370fbf47322))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-rc.2](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-rc.1...v3.0.0-rc.2) (2022-11-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 导出 RequestOptions 类型 ([03e98ac](https://github.com/WeBankFinTech/fes.js/commit/03e98ac667f92dbcbd0b90033b7a29695d2d2426))
|
||||
* 修复 request ts 类型提示问题 ([2469009](https://github.com/WeBankFinTech/fes.js/commit/246900923a71b872cda37003c08fae3046d250d9))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.32](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.31...v3.0.0-beta.32) (2022-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复 request ts 类型提示问题 ([2469009](https://github.com/WeBankFinTech/fes.js/commit/246900923a71b872cda37003c08fae3046d250d9))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.31](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.29...v3.0.0-beta.31) (2022-11-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 解决 ts 提示问题 ([#155](https://github.com/WeBankFinTech/fes.js/issues/155)) ([92e154e](https://github.com/WeBankFinTech/fes.js/commit/92e154e48b0f057f1d4525d59f089d2fb6edcdd9))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 路由支持配置base & plugin-locale插件legacy默认false ([#154](https://github.com/WeBankFinTech/fes.js/issues/154)) ([104571b](https://github.com/WeBankFinTech/fes.js/commit/104571b2a4a78b6df18f4ef9288668d245ca88ab))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.30](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.29...v3.0.0-beta.30) (2022-11-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 解决 ts 提示问题 ([#155](https://github.com/WeBankFinTech/fes.js/issues/155)) ([92e154e](https://github.com/WeBankFinTech/fes.js/commit/92e154e48b0f057f1d4525d59f089d2fb6edcdd9))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 路由支持配置base & plugin-locale插件legacy默认false ([#154](https://github.com/WeBankFinTech/fes.js/issues/154)) ([104571b](https://github.com/WeBankFinTech/fes.js/commit/104571b2a4a78b6df18f4ef9288668d245ca88ab))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.29](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.28...v3.0.0-beta.29) (2022-11-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 优化类型声明 ([cb1af88](https://github.com/WeBankFinTech/fes.js/commit/cb1af88de67397fc739cb8e24e70d7be11404f56))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.28](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.27...v3.0.0-beta.28) (2022-11-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复 icon-plugin viewBox 删除问题 ([e4f3dff](https://github.com/WeBankFinTech/fes.js/commit/e4f3dff7fafa87acf576c50c9415b2afdbb5ab04))
|
||||
* config 不是 json 格式导致 dev 退出 ([a384335](https://github.com/WeBankFinTech/fes.js/commit/a384335534f956769103b2343bc2c2ca8bed1f98))
|
||||
* defineRouteMeta parse 异常 ([76afad7](https://github.com/WeBankFinTech/fes.js/commit/76afad7c2d5e35d78f0ae3c6ecccba968a718b98))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.27](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.26...v3.0.0-beta.27) (2022-10-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* qiankun props 异常 ([339c811](https://github.com/WeBankFinTech/fes.js/commit/339c81126a491b6a2cd2d47ed25a79479908de6e))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.26](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.25...v3.0.0-beta.26) (2022-09-29)
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.25](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.24...v3.0.0-beta.25) (2022-09-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* runtime 添加 d.ts ([4f85b22](https://github.com/WeBankFinTech/fes.js/commit/4f85b22c302955788cfc41aa738bc9a3b09ca68a))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.24](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.23...v3.0.0-beta.24) (2022-09-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* js 语法错误导致 dev 退出 ([2840b46](https://github.com/WeBankFinTech/fes.js/commit/2840b462ecb0cc1a7ddaee08032f65d0ccc95237))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.23](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.22...v3.0.0-beta.23) (2022-09-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复SelectLang.vue的循环依赖问题 ([#148](https://github.com/WeBankFinTech/fes.js/issues/148)) ([0a64739](https://github.com/WeBankFinTech/fes.js/commit/0a64739a2252976db3bad930c2bdfbe8843ceeb8))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.22](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.21...v3.0.0-beta.22) (2022-09-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 升级 fes-design 依赖 ([9141e77](https://github.com/WeBankFinTech/fes.js/commit/9141e77865197f00cb8cef96e49568f95b504f1c))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.21](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.20...v3.0.0-beta.21) (2022-08-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 优化构建 ([d0691ca](https://github.com/WeBankFinTech/fes.js/commit/d0691ca90a8948809966c529c1be4cfc242fd4e5))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.20](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.19...v3.0.0-beta.20) (2022-08-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复现代浏览器 polyfill 问题 ([#147](https://github.com/WeBankFinTech/fes.js/issues/147)) ([dbbf447](https://github.com/WeBankFinTech/fes.js/commit/dbbf4473624ab8c5876897da1499a71d9eb23312))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.19](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-08-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复plugin-layout把未缓存页面当做undefined丢进缓存列表出现的问题 ([7b696e4](https://github.com/WeBankFinTech/fes.js/commit/7b696e41ffd4dc5f67c7bfe0bf83aa303a3d63de))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.18](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-08-17)
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.17](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2022-08-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **plugin-layout:** 打开相同path的链接会更新页签为新的 & 正确触发onActivated ([#146](https://github.com/WeBankFinTech/fes.js/issues/146)) ([86ff19b](https://github.com/WeBankFinTech/fes.js/commit/86ff19b3d10498a15f1abcbccefcffca54fb522d)), closes [#144](https://github.com/WeBankFinTech/fes.js/issues/144) [#145](https://github.com/WeBankFinTech/fes.js/issues/145)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 升级 vite3 ([#143](https://github.com/WeBankFinTech/fes.js/issues/143)) ([fa77896](https://github.com/WeBankFinTech/fes.js/commit/fa7789653c01a57bbaab2e30fe2a64733154fd5b))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.16](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2022-08-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **plugin-qiankun:** 修复主应用状态变更后使用useModel没有响应问题 ([c64bd48](https://github.com/WeBankFinTech/fes.js/commit/c64bd4844d3bde1d69da45fdaefc348ba0fbb5a0))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.15](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2022-07-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 路由生成支持全数字 ([ba73ac7](https://github.com/WeBankFinTech/fes.js/commit/ba73ac7ff7beb5271c70f4154fa1357e180ef35c))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.14](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2022-07-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复win下路径问题 ([bcce28d](https://github.com/WeBankFinTech/fes.js/commit/bcce28d5674da8497270c0f6e414a5d9f11aa1da))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 文件目录名带@转化成动态路由 ([#137](https://github.com/WeBankFinTech/fes.js/issues/137)) ([9b3b7e5](https://github.com/WeBankFinTech/fes.js/commit/9b3b7e5d0c52e2c4c27046968d228f407b76cd7e))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.13](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2022-07-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复layout的bug ([3e3ee6a](https://github.com/WeBankFinTech/fes.js/commit/3e3ee6a4b44dfb38dca1a569339a1b5fb18ace6e))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.12](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2022-06-27)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 插件开发文档和模板 ([#135](https://github.com/WeBankFinTech/fes.js/issues/135)) ([3b8af8a](https://github.com/WeBankFinTech/fes.js/commit/3b8af8aacba7afe370635f745e0a95f4784d491b))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.11](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2022-06-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 优化项目模板ts配置 ([dd455fb](https://github.com/WeBankFinTech/fes.js/commit/dd455fba7bfba6e2bfa7c45fcfa846861f993ad7))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.10](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2022-06-16)
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.9](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2022-06-16)
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.8](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2022-06-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复qiankun内存泄露 ([5bacf31](https://github.com/WeBankFinTech/fes.js/commit/5bacf31098a51eeb949d75399108da31c8753503))
|
||||
* 修复乾坤 bug ([2a43385](https://github.com/WeBankFinTech/fes.js/commit/2a433855f0d311298461579da81af83ffbdef255))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* plugin-layout 多页签可以删除当前页面 ([400d254](https://github.com/WeBankFinTech/fes.js/commit/400d254a4b9969fc76127b587e6267e08702cf5f))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.7](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2022-05-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* npm 包 ts 文件丢失问题 ([bf4475f](https://github.com/WeBankFinTech/fes.js/commit/bf4475f2405334a50255ee85cde0bf8a078d760b))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.6](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2022-05-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* polyfill改为使用@vitejs/plugin-legacy ([53c8a33](https://github.com/WeBankFinTech/fes.js/commit/53c8a33aac2e71db9dfc6563adc174a71c27f1c4))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.5](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2022-05-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **builder-vite:** 修复build时找不到入口js问题 ([fef2aee](https://github.com/WeBankFinTech/fes.js/commit/fef2aeefaea60a1f4e0b2734254a816c88295308))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.4](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2022-05-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* vite忽略@fesjs/fes ([e2c6cd0](https://github.com/WeBankFinTech/fes.js/commit/e2c6cd085f4330d53c2e3b83e59045313b9268b2))
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.3](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2022-05-17)
|
||||
|
||||
|
||||
|
||||
# [3.0.0-beta.2](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2022-05-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* initialState存在非setup使用场景,不能使用provide/inject ([45e95a0](https://github.com/WeBankFinTech/fes.js/commit/45e95a0d0afdac6807ca046d9a0b3a09c12b558a))
|
||||
* 优化模板 ([cfdfd51](https://github.com/WeBankFinTech/fes.js/commit/cfdfd510f3e3491f8efd2f0e86a889770d55e6cf))
|
||||
* 修正包版本 ([5d6aed8](https://github.com/WeBankFinTech/fes.js/commit/5d6aed8ac09a792d1bb74b8aacad16542f4af051))
|
||||
* 模板优化 ([55e5a6f](https://github.com/WeBankFinTech/fes.js/commit/55e5a6f15dbaf6633e6f1bd9dad092a28f7b55bf))
|
||||
|
||||
|
||||
|
||||
## [3.0.0-beta.1](https://github.com/WeBankFinTech/fes.js/compare/v2.0.0...v2.1.1) (2022-05-16)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- 编译所有 .vue | .jsx 文件，不管是否在 node_modules ([#101](https://github.com/WeBankFinTech/fes.js/issues/101)) ([1e033d4](https://github.com/WeBankFinTech/fes.js/commit/1e033d488fe5ed58fbcc9731ac3ebd5dad9319b3))
|
||||
- 当 public 文件夹下没有可 copy 的文件会造成编译失败 ([#123](https://github.com/WeBankFinTech/fes.js/issues/123)) ([ad60fb5](https://github.com/WeBankFinTech/fes.js/commit/ad60fb5bb70f9114f72b4bc590179accccb85427))
|
||||
- 检测 vue 和@vue/compiler-sfc 的版本,保证一致 ([8e39dcf](https://github.com/WeBankFinTech/fes.js/commit/8e39dcf2c2206d64ba37b986de78f9d1b80f9d99))
|
||||
- 解决 layout menu 空菜单问题 + env 环境覆盖问题 ([afd5497](https://github.com/WeBankFinTech/fes.js/commit/afd5497f797a5b2fd5ef2bff0068d3b62f442e31))
|
||||
- 解决 windicss 在开发环境 css 加载顺序问题 ([#95](https://github.com/WeBankFinTech/fes.js/issues/95)) ([2981a66](https://github.com/WeBankFinTech/fes.js/commit/2981a66218142c06faf0bbbb42058e43ec6b776c))
|
||||
- 添加 windi.config.js 文件到 npm 包 ([10d4f31](https://github.com/WeBankFinTech/fes.js/commit/10d4f31205c8f2bd1f141321b51ab7637ef8da81))
|
||||
- 未正确配置 files ([fb9f7c8](https://github.com/WeBankFinTech/fes.js/commit/fb9f7c84e84d7fa250a60f725521ccea3a902a6b))
|
||||
- 修复 watch 池为空 ([0d1c717](https://github.com/WeBankFinTech/fes.js/commit/0d1c71767a9f896a0eb5290fc6fb0a63604451dc))
|
||||
- 修复 webpack 修改文件重复编译问题 ([fb3b5a6](https://github.com/WeBankFinTech/fes.js/commit/fb3b5a6dd15325782b43f7bfe4a4bc765893c0dc))
|
||||
- 修复一些 bug ([443879b](https://github.com/WeBankFinTech/fes.js/commit/443879bf4ffed6a827c829da33aaef39960db795))
|
||||
- 修复 father-build 的 ESM 编译异常 ([1523c38](https://github.com/WeBankFinTech/fes.js/commit/1523c380e075c8df6948c73a794bc8344039dd3d))
|
||||
- 修复 locale 更新设置 fes_locale 标记问题 ([43cc5dd](https://github.com/WeBankFinTech/fes.js/commit/43cc5dda9c7b85eb2fda300af149716d3e482cf7))
|
||||
- 修复 pc 模板依赖问题 ([0c0bc8a](https://github.com/WeBankFinTech/fes.js/commit/0c0bc8a05b21b83208be2a4b4c314bfa5b4f2d71))
|
||||
- 修复 peer 依赖错误 ([87039c2](https://github.com/WeBankFinTech/fes.js/commit/87039c27faa02da55d4fdd5c7fcb5de53b8d9c31))
|
||||
- 修复 qiankun 的 demo ([f46e442](https://github.com/WeBankFinTech/fes.js/commit/f46e442ddf43ff4d67fd340f9945388512c37d8a))
|
||||
- 修复 vite 版本在 win 下的兼容性问题 ([4a53145](https://github.com/WeBankFinTech/fes.js/commit/4a53145ca6efca153c4140d79a15786102489418))
|
||||
- 修复 vite 热更新问题 ([7da7a34](https://github.com/WeBankFinTech/fes.js/commit/7da7a348e219759b69920272d09bffb667620e80))
|
||||
- 修改缓存等级 ([f16579c](https://github.com/WeBankFinTech/fes.js/commit/f16579c5a1ee3cef257251e8ea1b71296792e97e))
|
||||
- 移除 getHostname、getPort、getServer ([a366f96](https://github.com/WeBankFinTech/fes.js/commit/a366f9694a86ba290c85e0227cbb58cf400add98))
|
||||
- 移除可有可无代码 ([f715682](https://github.com/WeBankFinTech/fes.js/commit/f715682ccda1fa3b9d46cdcdd3807ceb7135e310))
|
||||
- 优化 webpack 构建时的信息输出 ([53a8deb](https://github.com/WeBankFinTech/fes.js/commit/53a8deb4f8355a969bf8b87bd4092fb7deff48db))
|
||||
- 重新梳理构建流程 ([40d8332](https://github.com/WeBankFinTech/fes.js/commit/40d8332030ce92ddfb41340e46a7687ea9c26e80))
|
||||
- 自定义 config 不兼容 vue-loader 问题 ([e5b1e17](https://github.com/WeBankFinTech/fes.js/commit/e5b1e17b266868ad6637cb6e29f29625b70d1591))
|
||||
- await request error ([2c38d20](https://github.com/WeBankFinTech/fes.js/commit/2c38d20841aa95c7950817c3f461a56d972cfb2e))
|
||||
- connect-history-api-fallback 挪回 webpack，vite 后续再考虑支持 ([0100b10](https://github.com/WeBankFinTech/fes.js/commit/0100b105674bf13295285ca48c3b0ee069fb491b))
|
||||
- export Generator ([5a5d809](https://github.com/WeBankFinTech/fes.js/commit/5a5d80952267fe8f6c031983cd9207a6d4df8ef7))
|
||||
- fix docs ([#98](https://github.com/WeBankFinTech/fes.js/issues/98)) ([9aca54c](https://github.com/WeBankFinTech/fes.js/commit/9aca54ce6036dae5f597ac71c0af83f2fe26e579))
|
||||
- generate get request url key ([1eb20b0](https://github.com/WeBankFinTech/fes.js/commit/1eb20b03858c609836cb6477170b56617e171a38))
|
||||
- plugin-icon 压缩问题 ([5d5829d](https://github.com/WeBankFinTech/fes.js/commit/5d5829d9097a9f6ec8652bd94cbb463b89d8652e))
|
||||
- **plugin-layout:** 多页签标题正确显示 ([fb6b7c3](https://github.com/WeBankFinTech/fes.js/commit/fb6b7c339bd1c44148110a6ca97459f58bdb168e))
|
||||
- **plugin-layout:** 修复多页签 layout 设置为 false 依然显示的问题 ([f213d7c](https://github.com/WeBankFinTech/fes.js/commit/f213d7cc4963b07e1c0bb1b203e53d47125d65d8))
|
||||
- **plugin-layout:** layout 的 aside 宽度未跟随配置改变 ([65de66c](https://github.com/WeBankFinTech/fes.js/commit/65de66c5d8a033966c9f06e20463d9b93b82d91f))
|
||||
- **plugin-layout:** main 需要设置 z-index:0 ([a678db4](https://github.com/WeBankFinTech/fes.js/commit/a678db45a59b9462a9b36aaba93040c2b83ef3f2))
|
||||
- plugin-locale 兼容 composition 场景变更 locale ([f94b00a](https://github.com/WeBankFinTech/fes.js/commit/f94b00a7229f2892ac88323e4972ad2561469bd1))
|
||||
- **plugin-qiankun:** 修复更新 props 时,model 未响应式更新 ([4a30416](https://github.com/WeBankFinTech/fes.js/commit/4a304163e364e38275d6524e01997e6e36063839))
|
||||
- plugin-qiankun 修复主应用更新 props 不触发 update ([c0cc29d](https://github.com/WeBankFinTech/fes.js/commit/c0cc29da4432db5acf5fc513327af3e2ad375654))
|
||||
- plugin-request ([1fc01ba](https://github.com/WeBankFinTech/fes.js/commit/1fc01ba05fed1226b833ddf23c703b325d2db00a))
|
||||
- qiankun demo ([4caf8fa](https://github.com/WeBankFinTech/fes.js/commit/4caf8fa0fa1620f456bb08d1feb86f766ebd1051))
|
||||
- request cache 异常 ([5c6a7ef](https://github.com/WeBankFinTech/fes.js/commit/5c6a7ef788d215e924f6a4823600aaa5158beee8))
|
||||
- request response 问题 ([4786541](https://github.com/WeBankFinTech/fes.js/commit/4786541c56c933c6226570ee790de467e7e71691))
|
||||
- request skipErrorHandler 配置问题 ([#121](https://github.com/WeBankFinTech/fes.js/issues/121)) ([c946536](https://github.com/WeBankFinTech/fes.js/commit/c946536e8e1092f8c7b94c6a8c50fd6d17601bea))
|
||||
- run vite ([c04148f](https://github.com/WeBankFinTech/fes.js/commit/c04148f84dd71dab89bd8dbb2b74ac6944f10723))
|
||||
- template 需要 watermark 依赖 ([2ca3951](https://github.com/WeBankFinTech/fes.js/commit/2ca3951c3f0cbfde47161a37620660c12653f2cc))
|
||||
- vite polyfill 问题 ([b5d28c5](https://github.com/WeBankFinTech/fes.js/commit/b5d28c598999967c7d8606a01cb77c4080308d9b))
|
||||
- vue and @vue/compiler-sfc version match problem ([57e77d5](https://github.com/WeBankFinTech/fes.js/commit/57e77d54d4b70221223f58b8f908173118e42338))
|
||||
- watermark 自定义 container 时样式优化 ([#119](https://github.com/WeBankFinTech/fes.js/issues/119)) ([cb40631](https://github.com/WeBankFinTech/fes.js/commit/cb40631a8641b4ec8dba760f1df97c49003420f0))
|
||||
- windicss 配置检测 ([c9ced7e](https://github.com/WeBankFinTech/fes.js/commit/c9ced7e1b861171d45fc890e973c5c999441fa20))
|
||||
- windows 问题 ([5724cbd](https://github.com/WeBankFinTech/fes.js/commit/5724cbd8f3e7510394c525f66fa20e1761461686))
|
||||
|
||||
### Features
|
||||
|
||||
- plugin-watermark 提供 destroyWatermark ([#124](https://github.com/WeBankFinTech/fes.js/issues/124)) ([70b034a](https://github.com/WeBankFinTech/fes.js/commit/70b034a3513b56f6814ed89d0f84ee18733beba2))
|
||||
- 编译支持 ts ([37ab86c](https://github.com/WeBankFinTech/fes.js/commit/37ab86c7b35397e24d3e364caebd3f942be511c6))
|
||||
- 插件改为使用 fes-design ([700b0f9](https://github.com/WeBankFinTech/fes.js/commit/700b0f9747a249a3bef318d9a550004678f05257))
|
||||
- 初步实现 vite dev 构建 ([31ff105](https://github.com/WeBankFinTech/fes.js/commit/31ff10532efc5fac4d6a95a0e703e4bc4e6eff36))
|
||||
- 当 build-in 版本变化时,缓存失效 ([1bfb4b1](https://github.com/WeBankFinTech/fes.js/commit/1bfb4b1c1a3ec1b88fcd8f25a2b0697b701c4dc5))
|
||||
- 更改打版本策略 ([1bfea84](https://github.com/WeBankFinTech/fes.js/commit/1bfea84ff0610a360dcceeba1442a29dd8da45e4))
|
||||
- 更新 readme ([7ba9c67](https://github.com/WeBankFinTech/fes.js/commit/7ba9c677ee34bf104315d2fb312406a969f5d734))
|
||||
- 更新 readme ([24760eb](https://github.com/WeBankFinTech/fes.js/commit/24760eb2d883bd17e6ca5dbad3b3502c23459b69))
|
||||
- 更新 readme ([058e72c](https://github.com/WeBankFinTech/fes.js/commit/058e72cbb392f3dfb613448f08febf26ad68730e))
|
||||
- 构建类型定义 ([023b223](https://github.com/WeBankFinTech/fes.js/commit/023b223854a24e7f7c64ce13f4298d74ee999fcd))
|
||||
- 构建类型定义 ([1e2198b](https://github.com/WeBankFinTech/fes.js/commit/1e2198b671cde38d759a48d4af06993cb93bb207))
|
||||
- 将 ignore vue custom block logic move to preset ([5e5efb2](https://github.com/WeBankFinTech/fes.js/commit/5e5efb276a4ef01c7dbf87249f6de9f6c640006a))
|
||||
- 路由生成支持 .jsx 后缀 ([7f305bc](https://github.com/WeBankFinTech/fes.js/commit/7f305bc74b898cbe64530574a966bd9f9761dc97))
|
||||
- 命名 ([0ee6ed2](https://github.com/WeBankFinTech/fes.js/commit/0ee6ed2c834915c5e2d3ec56eb877104912d5c2a))
|
||||
- 升级版本号 ([94fe4e0](https://github.com/WeBankFinTech/fes.js/commit/94fe4e068956245de612ffd38152bbfb2ba7c889))
|
||||
- 升级 fes-design ([ec75e40](https://github.com/WeBankFinTech/fes.js/commit/ec75e406c05fe267591ed7ff6f0e0e6a102f0b61))
|
||||
- 升级 fes-design 到 0.5.0 ([2bcd10c](https://github.com/WeBankFinTech/fes.js/commit/2bcd10ccf90a372146d9b47a168d9fd084a820f2))
|
||||
- 使用最新版 layout 和 locale ([6d2dedf](https://github.com/WeBankFinTech/fes.js/commit/6d2dedf44a91647c9f286aba38d80e339db6e2ac))
|
||||
- 使用最新版 layout 和 locale ([2994164](https://github.com/WeBankFinTech/fes.js/commit/299416497e1908cc3ce8abaeb5527bfdfe7c3468))
|
||||
- 添加一些描述文件 ([14d3f4b](https://github.com/WeBankFinTech/fes.js/commit/14d3f4bd0ff7543d4f2f3f44b0a2cd293c103a6c))
|
||||
- 添加一些描述文件 ([3ffab50](https://github.com/WeBankFinTech/fes.js/commit/3ffab500966f513c74b6f9e7549201544deb6a96))
|
||||
- 统一 core-js 版本 ([8a1a1fc](https://github.com/WeBankFinTech/fes.js/commit/8a1a1fc772c30966016949a9e8841e21b4bce374))
|
||||
- 完善 vite build ([049c953](https://github.com/WeBankFinTech/fes.js/commit/049c9532de2e7315e654b232f0faa53b6f8e9961))
|
||||
- 页面支持 tsx，提供 defineRoute 配置 tsx 和 jsx 的 route ([#106](https://github.com/WeBankFinTech/fes.js/issues/106)) ([5b1553e](https://github.com/WeBankFinTech/fes.js/commit/5b1553ef5856b56b96ae8b12e3ddd1fb478a7a32))
|
||||
- 优化 dataField 逻辑 ([51c83c2](https://github.com/WeBankFinTech/fes.js/commit/51c83c2df270645ce7d9444dc042338a0571c7c7))
|
||||
- 优化 release 流程 ([562fc00](https://github.com/WeBankFinTech/fes.js/commit/562fc003b208465c379b4516b471a5cac48fd8f1))
|
||||
- 优化 vue-i18n 引入 ([67657ab](https://github.com/WeBankFinTech/fes.js/commit/67657ab9e32969c62f80fcfcdf30dbf8a0d3e516))
|
||||
- 优化 webpack 信息输出 ([2f1c551](https://github.com/WeBankFinTech/fes.js/commit/2f1c5515226a00cc8856297046ab0d224a2aef77))
|
||||
- 优化 windicss 配置 ([#104](https://github.com/WeBankFinTech/fes.js/issues/104)) ([d1c93bd](https://github.com/WeBankFinTech/fes.js/commit/d1c93bd4353ce890a5f67756c0df17550eb58756))
|
||||
- 优化按路由导出多 html 的 title 逻辑 ([0f0c646](https://github.com/WeBankFinTech/fes.js/commit/0f0c646ceda2492fcc8aaf5b2abbc2c9f6224303))
|
||||
- 优化包依赖 + 优化 fes-plugin-test ([67b7436](https://github.com/WeBankFinTech/fes.js/commit/67b74367ed625da3f3fd82e7daa7006413a66e68))
|
||||
- 优化构建 ([242787c](https://github.com/WeBankFinTech/fes.js/commit/242787c3581edb8837077ee8997016eb495f7e69))
|
||||
- 优化依赖版本 ([d31d07b](https://github.com/WeBankFinTech/fes.js/commit/d31d07bbbbcb08464bb9cc49ec612a95022ef28e))
|
||||
- 优化源码测试 ([876cac7](https://github.com/WeBankFinTech/fes.js/commit/876cac7b9d9c2b414f7d4a74b1c108adc8641089))
|
||||
- 优化 mock ([81d3405](https://github.com/WeBankFinTech/fes.js/commit/81d34052516f82906c6f95266689f09a4c367031))
|
||||
- 增加乾坤构建提示 ([59ca087](https://github.com/WeBankFinTech/fes.js/commit/59ca087b23a1eb84780d191887780bac542281ff))
|
||||
- 针对请求文件的情况进行优化 ([#91](https://github.com/WeBankFinTech/fes.js/issues/91)) ([e00acc4](https://github.com/WeBankFinTech/fes.js/commit/e00acc4a7e2c966833b4a4cf361d0320f96a7038))
|
||||
- 支持按路由编译出.html 文件 ([04a33d2](https://github.com/WeBankFinTech/fes.js/commit/04a33d2c6870f1c14321f7055758940dd4ba98e8))
|
||||
- 支持 keep-alive ([444ed4b](https://github.com/WeBankFinTech/fes.js/commit/444ed4ba3c9be9864c9a7811224e6d1d805aad1b))
|
||||
- 支持 pnpm ([8528e24](https://github.com/WeBankFinTech/fes.js/commit/8528e24599f475c5b8912e68c1cd99e3eed88241))
|
||||
- 支持 pnpm ([0fac113](https://github.com/WeBankFinTech/fes.js/commit/0fac113adec018391bb6c90a6d734f7c8b1e403f))
|
||||
- 重写源码编译 ([209b0c0](https://github.com/WeBankFinTech/fes.js/commit/209b0c0525c39a75cb70772d7140b1f565e6a213))
|
||||
- app 入口文件支持 .tsx, .jsx 后缀 ([7fc5d63](https://github.com/WeBankFinTech/fes.js/commit/7fc5d63abd8d24d031b70d38e4d2f0c9b25b52ec))
|
||||
- enums 和 vuex 构建配置提示 ([972518f](https://github.com/WeBankFinTech/fes.js/commit/972518ff9ce5b952c83a650efc5a3a8cb1e59930))
|
||||
- **fes-plugin-monaco-editor:** 新增 monaco-editor 插件,提供编辑器能力 ([74cf05e](https://github.com/WeBankFinTech/fes.js/commit/74cf05e15e3d29677cf9bfb18b869e8e7b83480c))
|
||||
- layout/locale/editor/sass 等插件兼容 vite ([15c93eb](https://github.com/WeBankFinTech/fes.js/commit/15c93eb80e17fdb15a926b0e2450a4bc57be93b7))
|
||||
- patchRoutes 延后,放在 createRouter 之前执行 ([b4fe951](https://github.com/WeBankFinTech/fes.js/commit/b4fe951859d99df77b5df0be99f53826a6b14e57))
|
||||
- **plugin-layout:** 菜单支持配置额外的匹配规则 ([c998c39](https://github.com/WeBankFinTech/fes.js/commit/c998c39559de95684f7e1a62786ed054ec9c3750))
|
||||
- **plugin-layout:** 菜单支持配置额外的匹配规则 ([ab949fb](https://github.com/WeBankFinTech/fes.js/commit/ab949fb6a8da282f964570f87080dc22aa2c7e9c))
|
||||
- **plugin-layout:** 区域展示支持全局配置 ([0f3a4e7](https://github.com/WeBankFinTech/fes.js/commit/0f3a4e793a05df4fbc169828a116c8b7d7b6ce72))
|
||||
- plugin-layout 支持运行时配置编译时的参数 ([12418f2](https://github.com/WeBankFinTech/fes.js/commit/12418f2ffe79eebd48c7fcadf9826da0d0611723))
|
||||
- plugin-pinia ([476b7bf](https://github.com/WeBankFinTech/fes.js/commit/476b7bfe660dd39079408e1d642d793a924b91ef))
|
||||
- qiankun 支持多页签 keepalive ([#117](https://github.com/WeBankFinTech/fes.js/issues/117)) ([41b8433](https://github.com/WeBankFinTech/fes.js/commit/41b843396c04cb91093c503a50f0daf9cc21b8d0))
|
||||
- qiankun 主应用 vite 改造 ([116bf5f](https://github.com/WeBankFinTech/fes.js/commit/116bf5f39a9f84edf233b6ffb36cfa33966e63cc))
|
||||
- upgrade windicss-webpack-plugin ([7ddf1b7](https://github.com/WeBankFinTech/fes.js/commit/7ddf1b7aff35fcaa1cdc7f97ff8f93b08e30ac93))
|
||||
- vite 的 mock 也改为 express 语法 ([5117afc](https://github.com/WeBankFinTech/fes.js/commit/5117afc9c51a8a4e847112d443e59c05f8188eac))
|
||||
- watermark ([#112](https://github.com/WeBankFinTech/fes.js/issues/112)) ([98bae6d](https://github.com/WeBankFinTech/fes.js/commit/98bae6d141de6a7b88fbaf625c6a6593d6edbc85))
|
||||
- watermark 默认样式优化 ([#116](https://github.com/WeBankFinTech/fes.js/issues/116)) ([ae84ba3](https://github.com/WeBankFinTech/fes.js/commit/ae84ba3bae4e3f2a283ca30acf6dc39e9694dcdb))
|
||||
- windicss ([5747466](https://github.com/WeBankFinTech/fes.js/commit/5747466c43ee6cb76dc090f9862a38fe38884bdf))
|
||||
- windicss ([895e47c](https://github.com/WeBankFinTech/fes.js/commit/895e47c857f49c786ca12d476a06b2d7c63a9460))
|
||||
|
||||
<!-- DO NOT CHANGE THESE COMMENTS - See .github/actions/trigger-github-release/update-changelog.js -->
|
||||
<!-- insert-new-changelog-here -->
|
||||
@ -6,47 +587,46 @@
|
||||
## [2.0.0](https://github.com/WeBankFinTech/fes/compare/v0.2.3...v2.0.0) (2021-07-01)
|
||||
|
||||
### 🚀 New Feature
|
||||
发布2.0.0，重构90%以上的代码，以Vue 3.0和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。匹配了覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
|
||||
|
||||
发布 2.0.0，重构 90%以上的代码，以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。匹配了覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
|
||||
|
||||
支持插件如下：
|
||||
1. @fesjs/plugin-access 提供对页面资源的权限控制能力
|
||||
2. @fesjs/plugin-enums 提供统一的枚举存取及丰富的函数来处理枚举
|
||||
3. @fesjs/plugin-icon svg 文件自动注册为组件
|
||||
4. @fesjs/plugin-jest 基于 Jest，提供单元测试、覆盖测试能力
|
||||
5. @fesjs/plugin-layout 简单的配置即可拥有布局，包括导航以及侧边栏
|
||||
6. @fesjs/plugin-locale 基于 Vue I18n，提供国际化能力
|
||||
7. @fesjs/plugin-model 简易的数据管理方案
|
||||
8. @fesjs/plugin-request 基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能
|
||||
9. @fesjs/plugin-vuex 基于 Vuex, 提供状态管理能力
|
||||
10. @fesjs/plugin-qiankun 基于 qiankun，提供微服务能力
|
||||
11. @fesjs/plugin-sass 样式支持sass
|
||||
|
||||
1. @fesjs/plugin-access 提供对页面资源的权限控制能力
|
||||
2. @fesjs/plugin-enums 提供统一的枚举存取及丰富的函数来处理枚举
|
||||
3. @fesjs/plugin-icon svg 文件自动注册为组件
|
||||
4. @fesjs/plugin-jest 基于 Jest，提供单元测试、覆盖测试能力
|
||||
5. @fesjs/plugin-layout 简单的配置即可拥有布局，包括导航以及侧边栏
|
||||
6. @fesjs/plugin-locale 基于 Vue I18n，提供国际化能力
|
||||
7. @fesjs/plugin-model 简易的数据管理方案
|
||||
8. @fesjs/plugin-request 基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能
|
||||
9. @fesjs/plugin-vuex 基于 Vuex, 提供状态管理能力
|
||||
10. @fesjs/plugin-qiankun 基于 qiankun，提供微服务能力
|
||||
11. @fesjs/plugin-sass 样式支持 sass
|
||||
|
||||
## [0.2.3](https://github.com/WeBankFinTech/fes/compare/v0.2.2...v0.2.3) (2020-09-25)
|
||||
|
||||
|
||||
### :bug: Bug Fix
|
||||
|
||||
* fes-template列表页中日期组件的value值不能为“” ([3cc894e](https://github.com/WeBankFinTech/fes/commit/3cc894e)) by: **harrywan**
|
||||
|
||||
- fes-template 列表页中日期组件的 value 值不能为“” ([3cc894e](https://github.com/WeBankFinTech/fes/commit/3cc894e)) by: **harrywan**
|
||||
|
||||
### :memo: Documentation
|
||||
|
||||
* 更新affix组件 ([a897c3d](https://github.com/WeBankFinTech/fes/commit/a897c3d)) by: **harrywan**
|
||||
* 更新在线文档入口地址 ([2114e39](https://github.com/WeBankFinTech/fes/commit/2114e39)) by: **harrywan**
|
||||
* 替换图片 ([04c905b](https://github.com/WeBankFinTech/fes/commit/04c905b)) by: **harrywan**
|
||||
## [0.2.2](https://github.com/WeBankFinTech/fes/compare/v0.2.1...v0.2.2) (2020-09-23)
|
||||
- 更新 affix 组件 ([a897c3d](https://github.com/WeBankFinTech/fes/commit/a897c3d)) by: **harrywan**
|
||||
- 更新在线文档入口地址 ([2114e39](https://github.com/WeBankFinTech/fes/commit/2114e39)) by: **harrywan**
|
||||
- 替换图片 ([04c905b](https://github.com/WeBankFinTech/fes/commit/04c905b)) by: **harrywan**
|
||||
|
||||
## [0.2.2](https://github.com/WeBankFinTech/fes/compare/v0.2.1...v0.2.2) (2020-09-23)
|
||||
|
||||
### :bug: Bug Fix
|
||||
|
||||
* 解决fes-cli build 异常 ([cbbc29f](https://github.com/WeBankFinTech/fes/commit/cbbc29f)) by: **bac-joker**, closes [#20](https://github.com/WeBankFinTech/fes.js/issues/20)
|
||||
## [0.2.1](https://github.com/WeBankFinTech/fes/compare/v0.2.0...v0.2.1) (2020-09-20)
|
||||
- 解决 fes-cli build 异常 ([cbbc29f](https://github.com/WeBankFinTech/fes/commit/cbbc29f)) by: **bac-joker**, closes [#20](https://github.com/WeBankFinTech/fes.js/issues/20)
|
||||
|
||||
## [0.2.1](https://github.com/WeBankFinTech/fes/compare/v0.2.0...v0.2.1) (2020-09-20)
|
||||
|
||||
### 🐛 Bug Fixes
|
||||
|
||||
* **fes-template:** solve the corejs3.x dependency problem ([e3e43c3](https://github.com/WeBankFinTech/fes/commit/e3e43c3))
|
||||
- **fes-template:** solve the corejs3.x dependency problem ([e3e43c3](https://github.com/WeBankFinTech/fes/commit/e3e43c3))
|
||||
|
||||
## 0.2.0
|
||||
|
||||
@ -58,8 +638,8 @@
|
||||
|
||||
### 🐛 Bug Fix
|
||||
|
||||
1. fes-cli 支持 global 全局安装，关闭[issues/17](https://github.com/WeBankFinTech/fes.js/issues/17)
|
||||
2. 解决 layout布局的FesHeader和FesLeft不生效问题
|
||||
1. fes-cli 支持 global 全局安装，关闭[issues/17](https://github.com/WeBankFinTech/fes.js/issues/17)
|
||||
2. 解决 layout 布局的 FesHeader 和 FesLeft 不生效问题
|
||||
3. 更新文档中描述不准备的地方。
|
||||
|
||||
## 0.1.0
|
||||
@ -67,21 +647,26 @@
|
||||
### 功能改进
|
||||
|
||||
#### fes-cli v0.1.4
|
||||
- 去掉编译打包时时配置BannerPlugin，关闭[issues/7](https://github.com/WeBankFinTech/fes.js/issues/7)
|
||||
- `fes init`改为从npm下载项目模板，避免频繁更新项目模板而需要更新`fes`
|
||||
- 下载模板后不默认执行`git init`，避免未安装git带来的问题。
|
||||
|
||||
|
||||
- 去掉编译打包时时配置 BannerPlugin，关闭[issues/7](https://github.com/WeBankFinTech/fes.js/issues/7)
|
||||
- `fes init`改为从 npm 下载项目模板，避免频繁更新项目模板而需要更新`fes`
|
||||
- 下载模板后不默认执行`git init`，避免未安装 git 带来的问题。
|
||||
|
||||
#### fes-core v0.1.2
|
||||
- Fes-Core替换Icon组件为ionicons图标。
|
||||
- 首次运行时，跳转路由改为直接跳转到defaultPage，而不是通过设置根路由"/"的redirect，优化体验。
|
||||
|
||||
- Fes-Core 替换 Icon 组件为 ionicons 图标。
|
||||
- 首次运行时，跳转路由改为直接跳转到 defaultPage，而不是通过设置根路由"/"的 redirect，优化体验。
|
||||
|
||||
#### fes-template v0.1.3
|
||||
- 项目中`@webank/fes-core`和`@webank/fes-ui`的依赖直接在项目模板package.json中指定，优化体验。
|
||||
- 整理项目模板，方便体验权限管理功能。
|
||||
|
||||
- 项目中`@webank/fes-core`和`@webank/fes-ui`的依赖直接在项目模板 package.json 中指定，优化体验。
|
||||
- 整理项目模板，方便体验权限管理功能。
|
||||
|
||||
#### fes-ui v0.1.1
|
||||
- 修复`Layout`组件`offset`属性不生效
|
||||
|
||||
- 修复`Layout`组件`offset`属性不生效
|
||||
|
||||
#### 文档
|
||||
- 修复在线文档未正常渲染的问题。
|
||||
- 更新文档中描述不准备的地方。
|
||||
|
||||
- 修复在线文档未正常渲染的问题。
|
||||
- 更新文档中描述不准备的地方。
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
English | [简体中文](./README.md)
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="../../">
|
||||
<img alt="fes.js" width="250" src="./images/fes-logo.png">
|
||||
@ -17,77 +16,82 @@ An excellent front-end solution
|
||||
|
||||
</div>
|
||||
|
||||
- document - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
|
||||
- changelog - [CHANGELOG.md](./CHANGELOG.md)
|
||||
- 3.0 ( vite and webpack ) - [http://fesjs.mumblefe.cn/next/](http://fesjs.mumblefe.cn/next/)
|
||||
- document - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
|
||||
- changelog - [CHANGELOG.md](./CHANGELOG.md)
|
||||
|
||||
# Pain points
|
||||
|
||||
Before developing a front-end project, we may need to do the following preparations：
|
||||
- Set up a development environment
|
||||
- Conventional code specification
|
||||
- Encapsulate API requests
|
||||
- Configure routing
|
||||
- Realize layout, menu, navigation
|
||||
- Realize login
|
||||
- authority management
|
||||
- ...
|
||||
|
||||
- Set up a development environment
|
||||
- Conventional code specification
|
||||
- Encapsulate API requests
|
||||
- Configure routing
|
||||
- Realize layout, menu, navigation
|
||||
- Realize login
|
||||
- authority management
|
||||
- ...
|
||||
|
||||
In addition to the preparation work, there are many similar business types. For example, most of the middle and back-end applications are workbenches, additions, deletions, changes, permissions, charts, etc. If each project is completely processed manually, it will not only take time, but over time there may be multiple technology stacks and development specifications, leading to inconsistent development processes and making historical projects more and more difficult to maintain. So we need a complete solution to manage the entire process from development to deployment.
|
||||
|
||||
|
||||
## Fes.js ？
|
||||
Fes.js is an excellent front-end application solution. Fes.js is based on Vue 3.0 and routing, and supports both configuration routing and convention routing, which can be used for functional expansion. Equipped with a complete plug-in system covering the compile-time and runtime life cycle, it supports various function extensions and business requirements.
|
||||
|
||||
Fes.js is an excellent front-end application solution. Fes.js is based on Vue 3.0 and routing, and supports both configuration routing and convention routing, which can be used for functional expansion. Equipped with a complete plug-in system covering the compile-time and runtime life cycle, it supports various function extensions and business requirements.
|
||||
|
||||
It mainly has the following functions:
|
||||
- 🚀 __fast__ , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs.
|
||||
|
||||
- 🧨 __easy__ , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning.
|
||||
|
||||
- 💪 __strong__ , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality.
|
||||
- 🚀 **fast** , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs.
|
||||
- 🧨 **easy** , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning.
|
||||
|
||||
- 📦 __expanded__ , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js.
|
||||
- 💪 **strong** , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality.
|
||||
|
||||
- 📡 __future__ , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future.
|
||||
- 📦 **expanded** , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js.
|
||||
|
||||
- 📡 **future** , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future.
|
||||
|
||||
## Plugins
|
||||
|
||||
| plugin | introduce |
|
||||
| ---- | ---- |
|
||||
| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | Provides the ability to control the permissions of page resources |
|
||||
| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | Provide unified enumeration access and rich functions to handle enumeration |
|
||||
| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg file is automatically registered as a component |
|
||||
| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Jest`, provide unit testing and coverage testing capabilities |
|
||||
| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | Simple configuration to have a layout, including navigation and sidebar |
|
||||
| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | Based on `Vue I18n`, providing internationalization capabilities |
|
||||
| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | Simple data management solution |
|
||||
| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling |
|
||||
| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Vuex`, provide state management capabilities |
|
||||
| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | Based on `qiankun`, provide microservice capabilities |
|
||||
| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | Style support sass |
|
||||
| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) |
|
||||
| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | state manager |
|
||||
| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | watermark |
|
||||
| plugin | introduce |
|
||||
| ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | Provides the ability to control the permissions of page resources |
|
||||
| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | Provide unified enumeration access and rich functions to handle enumeration |
|
||||
| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg file is automatically registered as a component |
|
||||
| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Jest`, provide unit testing and coverage testing capabilities |
|
||||
| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | Simple configuration to have a layout, including navigation and sidebar |
|
||||
| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | Based on `Vue I18n`, providing internationalization capabilities |
|
||||
| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | Simple data management solution |
|
||||
| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling |
|
||||
| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Vuex`, provide state management capabilities |
|
||||
| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | Based on `qiankun`, provide microservice capabilities |
|
||||
| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | Style support sass |
|
||||
| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) |
|
||||
| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | state manager |
|
||||
| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | watermark |
|
||||
| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html) | use swc-loader |
|
||||
|
||||
## As easy as counting 1, 2, 3
|
||||
use `yarn`：
|
||||
|
||||
use `pnpm`：
|
||||
|
||||
```bash
|
||||
# Create a template
|
||||
yarn create @fesjs/fes-app myapp
|
||||
pnpm create @fesjs/fes-app myapp
|
||||
|
||||
# Installation dependencies
|
||||
yarn
|
||||
pnpm i
|
||||
|
||||
# run
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
use `npm`：
|
||||
|
||||
```bash
|
||||
# Create a template
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# Installation dependencies
|
||||
npm install
|
||||
npm install
|
||||
|
||||
# run
|
||||
npm run dev
|
||||
@ -99,11 +103,10 @@ npm run dev
|
||||
|
||||
## Feedback
|
||||
|
||||
| Github Issue | WeChat group | Fes.js开源运营小助手 |
|
||||
| --- | --- | --- |
|
||||
| Github Issue | WeChat group | Fes.js 开源运营小助手 |
|
||||
| ------------------------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
||||
| [@fesjs/fes.js/issues](../../issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests and stars are always welcome.
|
||||
@ -116,15 +119,12 @@ For bugs and feature requests, [please create an issue](../../issues).
|
||||
4. Push to the branch: `git push origin my-new-feature`
|
||||
5. Submit a pull request :D
|
||||
|
||||
|
||||
## Community activity
|
||||
|
||||
### Fesjs community award-winning essay activity
|
||||
|
||||
In order for the Fes.js open source project to run better, and to give back to the open source community, the community launched an award-winning essay event! Everyone is welcome to post practical experience to provide reference for community users and a wider range of developers.
|
||||
|
||||
The output of experience can also help your system accumulate your own projects, sort out your work ideas, and also help your technology blog to promote. Good practice cases will have the opportunity to be invited to participate in the project community technical meeting to share, hurry up and participate.
|
||||
The output of experience can also help your system accumulate your own projects, sort out your work ideas, and also help your technology blog to promote. Good practice cases will have the opportunity to be invited to participate in the project community technical meeting to share, hurry up and participate.
|
||||
|
||||
Please stamp: https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
|
||||
|
||||
|
||||
|
||||
112
README.md
112
README.md
@ -13,83 +13,87 @@
|
||||
[](../../issues)
|
||||
[](http://opensource.org/licenses/MIT)
|
||||
[](../../pulls)
|
||||
[](https://badges.toozhao.com/stats/01G7TRNN1PH9PMSCYWDF3EK4QT "Get your own page views count badge on badges.toozhao.com")
|
||||
[](https://badges.toozhao.com/stats/01G7TRNN1PH9PMSCYWDF3EK4QT 'Get your own page views count badge on badges.toozhao.com')
|
||||
|
||||
</div>
|
||||
|
||||
- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
|
||||
- 更新日志 - [CHANGELOG.md](./CHANGELOG.md)
|
||||
- 3.0版本（构建可选vite和webpack）- [http://fesjs.mumblefe.cn/next/](http://fesjs.mumblefe.cn/next/)
|
||||
- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
|
||||
- 更新日志 - [CHANGELOG.md](./CHANGELOG.md)
|
||||
|
||||
# 痛点
|
||||
|
||||
在开发一个前端项目之前，我们可能需要做如下准备工作：
|
||||
- 搭建开发环境
|
||||
- 约定代码规范
|
||||
- 封装API请求
|
||||
- 配置路由
|
||||
- 实现布局、菜单、导航
|
||||
- 实现登录
|
||||
- 权限管理
|
||||
- ...
|
||||
|
||||
- 搭建开发环境
|
||||
- 约定代码规范
|
||||
- 封装 API 请求
|
||||
- 配置路由
|
||||
- 实现布局、菜单、导航
|
||||
- 实现登录
|
||||
- 权限管理
|
||||
- ...
|
||||
|
||||
除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
|
||||
|
||||
|
||||
## Fes.js 是什么？
|
||||
Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。
|
||||
|
||||
Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于 Vue.js3.0，充分利用 Vue 丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。
|
||||
|
||||
它主要具备以下功能：
|
||||
- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
|
||||
|
||||
- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
|
||||
|
||||
- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
|
||||
- 🚀 **快速** ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
|
||||
- 🧨 **简单** ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
|
||||
|
||||
- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
- 💪 **健壮** ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
|
||||
|
||||
- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，在3.0版本中支持 vite 快速构建。
|
||||
- 📦 **可扩展** ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
|
||||
- 📡 **面向未来** ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
|
||||
|
||||
## 插件
|
||||
|
||||
| 插件 | 介绍 |
|
||||
| ---- | ---- |
|
||||
| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 |
|
||||
| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 |
|
||||
| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 |
|
||||
| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 |
|
||||
| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 |
|
||||
| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 |
|
||||
| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
|
||||
| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
|
||||
| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
|
||||
|
||||
| 插件 | 介绍 |
|
||||
| ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 |
|
||||
| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 |
|
||||
| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 |
|
||||
| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 |
|
||||
| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 |
|
||||
| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 |
|
||||
| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
|
||||
| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持 sass |
|
||||
| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code 使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
|
||||
| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
|
||||
| [@fesjs/plugin-swc](http://fesjs.mumblefe.cn/reference/plugin/plugins/swc.html) | 使用 swc-loader 构建 |
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
使用 `yarn`：
|
||||
|
||||
使用 `pnpm`：
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
yarn create @fesjs/fes-app myapp
|
||||
pnpm create @fesjs/fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
pnpm i
|
||||
|
||||
# 运行
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
使用 `npm`：
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
npm install
|
||||
|
||||
# 运行
|
||||
npm run dev
|
||||
@ -101,22 +105,29 @@ npm run dev
|
||||
|
||||
## 反馈
|
||||
|
||||
| Github Issue | Fes.js开源运营小助手 |
|
||||
<<<<<<< HEAD
|
||||
| Github Issue | Fes.js 开源运营小助手 |
|
||||
| --- | --- |
|
||||
| [@fesjs/fes.js/issues](../../issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
|
||||
| [@fesjs/fes.js/issues](../../issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
|
||||
|
||||
=======
|
||||
| Github Issue | Fes.js 开源运营小助手 |
|
||||
| ------------------------------------ | ------------------------------------------------------------------------------------------------ |
|
||||
| [@fesjs/fes.js/issues](../../issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
|
||||
|
||||
> > > > > > > next
|
||||
|
||||
## 参与共建
|
||||
|
||||
我们非常欢迎社区同学能提交PR：
|
||||
我们非常欢迎社区同学能提交 PR：
|
||||
|
||||
1. fork项目!
|
||||
1. fork 项目!
|
||||
2. 创建你的功能分支: `git checkout -b my-new-feature`
|
||||
3. 本地提交新代码: `git commit -am 'Add some feature'`
|
||||
4. 推送本地到服务器分支: `git push origin my-new-feature`
|
||||
5. 创建一个PR
|
||||
5. 创建一个 PR
|
||||
|
||||
如果是发现Bug或者期望添加新功能，请提交[issue](../../issues)。
|
||||
如果是发现 Bug 或者期望添加新功能，请提交[issue](../../issues)。
|
||||
|
||||
## 社区活动
|
||||
|
||||
@ -126,6 +137,3 @@ npm run dev
|
||||
|
||||
经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
|
||||
请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
|
||||
module.exports = {
|
||||
// 需要编译的包
|
||||
pkgs: [
|
||||
'create-fes-app',
|
||||
'fes',
|
||||
'fes-compiler',
|
||||
'fes-preset-built-in',
|
||||
'fes-builder-vite',
|
||||
'fes-builder-webpack',
|
||||
'fes-runtime',
|
||||
'fes-utils',
|
||||
'fes-plugin-access',
|
||||
'fes-plugin-enums',
|
||||
'fes-plugin-icon',
|
||||
@ -18,11 +21,10 @@ module.exports = {
|
||||
'fes-plugin-sass',
|
||||
'fes-plugin-vuex',
|
||||
'fes-plugin-pinia',
|
||||
'fes-preset-built-in',
|
||||
'fes-plugin-windicss',
|
||||
'fes-plugin-watermark',
|
||||
'fes-runtime',
|
||||
'fes-utils'
|
||||
'fes-plugin-login',
|
||||
'fes-plugin-swc',
|
||||
],
|
||||
copy: []
|
||||
copy: [],
|
||||
};
|
||||
|
||||
22
deploy.sh
22
deploy.sh
@ -1,22 +0,0 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
# 确保脚本抛出遇到的错误
|
||||
set -e
|
||||
|
||||
# 生成静态文件
|
||||
npm run build
|
||||
|
||||
# 进入生成的文件夹
|
||||
cd docs/.vuepress/dist
|
||||
|
||||
# 如果是发布到自定义域名
|
||||
# echo 'www.example.com' > CNAME
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io/<REPO>
|
||||
git push -f https://github.com/WeBankFinTech/fes.js.git master:gh-pages
|
||||
|
||||
cd -
|
||||
@ -1,105 +1,94 @@
|
||||
import type { UserConfig } from '@vuepress/cli'
|
||||
import type { DefaultThemeOptions } from '@vuepress/theme-default'
|
||||
import { navbar, sidebar } from './configs'
|
||||
import { defineUserConfig } from '@vuepress/cli';
|
||||
import { defaultTheme } from '@vuepress/theme-default';
|
||||
import { docsearchPlugin } from '@vuepress/plugin-docsearch';
|
||||
import { pwaPopupPlugin } from '@vuepress/plugin-pwa-popup';
|
||||
import { pwaPlugin } from '@vuepress/plugin-pwa';
|
||||
import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
|
||||
import { navbar, sidebar } from './configs';
|
||||
|
||||
const config: UserConfig<DefaultThemeOptions> = {
|
||||
export default defineUserConfig({
|
||||
base: '/',
|
||||
|
||||
bundler: '@vuepress/webpack',
|
||||
head: [
|
||||
['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
|
||||
['link', { rel: 'icon', href: `/logo.png` }],
|
||||
],
|
||||
|
||||
base: process.env.BASE ? process.env.BASE : '/',
|
||||
|
||||
// evergreen: process.env.NODE_ENV !== 'production',
|
||||
|
||||
head: [['link', { rel: 'manifest', href: '/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/logo.png` }]],
|
||||
|
||||
// site-level locales config
|
||||
locales: {
|
||||
'/': {
|
||||
lang: 'zh-CN',
|
||||
title: 'Fes.js',
|
||||
description: '一个好用的前端应用解决方案',
|
||||
},
|
||||
},
|
||||
|
||||
themeConfig: {
|
||||
logo: '/logo.png',
|
||||
|
||||
repo: 'WeBankFinTech/fes.js',
|
||||
|
||||
docsDir: 'docs',
|
||||
|
||||
docsBranch: 'master',
|
||||
|
||||
// theme-level locales config
|
||||
// site-level locales config
|
||||
locales: {
|
||||
/**
|
||||
* English locale config
|
||||
*
|
||||
* As the default locale of @vuepress/theme-default is English,
|
||||
* we don't need to set all of the locale fields
|
||||
*/
|
||||
'/': {
|
||||
navbar: navbar.zh,
|
||||
selectLanguageName: '简体中文',
|
||||
selectLanguageText: '选择语言',
|
||||
selectLanguageAriaLabel: '选择语言',
|
||||
|
||||
// sidebar
|
||||
sidebar: sidebar.zh,
|
||||
|
||||
// page meta
|
||||
editLinkText: '在 GitHub 上编辑此页',
|
||||
lastUpdatedText: '上次更新',
|
||||
contributorsText: '贡献者',
|
||||
|
||||
// custom containers
|
||||
tip: '提示',
|
||||
warning: '注意',
|
||||
danger: '警告',
|
||||
|
||||
// 404 page
|
||||
notFound: [
|
||||
'这里什么都没有',
|
||||
'我们怎么到这来了？',
|
||||
'这是一个 404 页面',
|
||||
'看起来我们进入了错误的链接',
|
||||
],
|
||||
backToHome: '返回首页',
|
||||
|
||||
// other
|
||||
openInNewWindow: '在新窗口打开',
|
||||
},
|
||||
|
||||
'/': {
|
||||
lang: 'zh-CN',
|
||||
title: 'Fes.js',
|
||||
description: '一个好用的前端应用解决方案',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
['@vuepress/plugin-pwa'],
|
||||
[
|
||||
'@vuepress/plugin-pwa-popup',
|
||||
{
|
||||
locales: {
|
||||
'/': {
|
||||
message: '发现新内容可用',
|
||||
buttonText: '刷新',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
'@vuepress/docsearch',
|
||||
{
|
||||
appId: '4ZF3BCJTP5',
|
||||
apiKey: '09ff75bbe16bc6e166e103ffb57e10ea',
|
||||
indexName: 'fesjs',
|
||||
locales: {
|
||||
'/': {
|
||||
placeholder: '搜索文档',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
theme: defaultTheme({
|
||||
logo: '/logo.png',
|
||||
|
||||
export = config
|
||||
repo: 'WeBankFinTech/fes.js',
|
||||
|
||||
docsDir: 'docs',
|
||||
|
||||
docsBranch: 'next',
|
||||
|
||||
// theme-level locales config
|
||||
locales: {
|
||||
/**
|
||||
* English locale config
|
||||
*
|
||||
* As the default locale of @vuepress/theme-default is English,
|
||||
* we don't need to set all of the locale fields
|
||||
*/
|
||||
'/': {
|
||||
navbar: navbar.zh,
|
||||
selectLanguageName: '简体中文',
|
||||
selectLanguageText: '选择语言',
|
||||
selectLanguageAriaLabel: '选择语言',
|
||||
|
||||
// sidebar
|
||||
sidebar: sidebar.zh,
|
||||
|
||||
// page meta
|
||||
editLinkText: '在 GitHub 上编辑此页',
|
||||
lastUpdatedText: '上次更新',
|
||||
contributorsText: '贡献者',
|
||||
|
||||
// custom containers
|
||||
tip: '提示',
|
||||
warning: '注意',
|
||||
danger: '警告',
|
||||
|
||||
// 404 page
|
||||
notFound: ['这里什么都没有', '我们怎么到这来了？', '这是一个 404 页面', '看起来我们进入了错误的链接'],
|
||||
backToHome: '返回首页',
|
||||
|
||||
// other
|
||||
openInNewWindow: '在新窗口打开',
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
plugins: [
|
||||
docsearchPlugin({
|
||||
appId: '4ZF3BCJTP5',
|
||||
apiKey: '09ff75bbe16bc6e166e103ffb57e10ea',
|
||||
indexName: 'fesjs',
|
||||
locales: {
|
||||
'/': {
|
||||
placeholder: '搜索文档',
|
||||
},
|
||||
},
|
||||
}),
|
||||
pwaPlugin(),
|
||||
pwaPopupPlugin({
|
||||
locales: {
|
||||
'/': {
|
||||
message: '发现新内容可用',
|
||||
buttonText: '刷新',
|
||||
},
|
||||
},
|
||||
}),
|
||||
backToTopPlugin()
|
||||
],
|
||||
});
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import type { NavbarConfig } from '@vuepress/theme-default'
|
||||
import { version } from '../../../../package.json'
|
||||
|
||||
export const zh: NavbarConfig = [
|
||||
{
|
||||
@ -6,7 +7,7 @@ export const zh: NavbarConfig = [
|
||||
link: '/guide/',
|
||||
},
|
||||
{
|
||||
text: '配置',
|
||||
text: '编译时配置',
|
||||
link: '/reference/config/',
|
||||
},
|
||||
{
|
||||
@ -22,12 +23,12 @@ export const zh: NavbarConfig = [
|
||||
link: '/reference/cli/',
|
||||
},
|
||||
{
|
||||
text: 'v2.0',
|
||||
text: `v${version}`,
|
||||
children: [
|
||||
{
|
||||
text: 'v3.0',
|
||||
text: 'v2.0',
|
||||
link:
|
||||
'https://fesjs.mumblefe.cn/next',
|
||||
'https://fesjs.mumblefe.cn/2.0',
|
||||
},
|
||||
{
|
||||
text: 'v1.0',
|
||||
@ -41,7 +42,7 @@ export const zh: NavbarConfig = [
|
||||
{
|
||||
text: '更新日志',
|
||||
link:
|
||||
'https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md',
|
||||
'https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md',
|
||||
},
|
||||
{
|
||||
text: 'fes-design',
|
||||
|
||||
@ -1,80 +1,68 @@
|
||||
import type { SidebarConfig } from '@vuepress/theme-default'
|
||||
import type { SidebarConfig } from '@vuepress/theme-default';
|
||||
|
||||
export const zh: SidebarConfig = {
|
||||
'/guide/': [
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '介绍',
|
||||
children: [
|
||||
'/guide/README.md',
|
||||
'/guide/getting-started.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '基础',
|
||||
children: [
|
||||
'/guide/directory-structure.md',
|
||||
'/guide/config.md',
|
||||
'/guide/runtime-config.md',
|
||||
'/guide/env.md',
|
||||
'/guide/route.md',
|
||||
'/guide/plugin.md',
|
||||
'/guide/template.md',
|
||||
'/guide/mock.md',
|
||||
]
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '样式和资源文件',
|
||||
children: [
|
||||
'/guide/image.md',
|
||||
'/guide/css.md',
|
||||
'/guide/public.md',
|
||||
]
|
||||
},
|
||||
"/guide/contributing.md",
|
||||
"/guide/faq.md"
|
||||
],
|
||||
'/reference/config/': [
|
||||
'/reference/config/README.md'
|
||||
],
|
||||
'/reference/api/': [
|
||||
'/reference/api/README.md'
|
||||
],
|
||||
'/reference/plugin/': [
|
||||
'/reference/plugin/README.md',
|
||||
{
|
||||
// isGroup: true,
|
||||
text: 'Plugins',
|
||||
children: [
|
||||
'/reference/plugin/plugins/access.md',
|
||||
'/reference/plugin/plugins/enums.md',
|
||||
'/reference/plugin/plugins/icon.md',
|
||||
'/reference/plugin/plugins/jest.md',
|
||||
'/reference/plugin/plugins/layout.md',
|
||||
'/reference/plugin/plugins/locale.md',
|
||||
'/reference/plugin/plugins/model.md',
|
||||
'/reference/plugin/plugins/request.md',
|
||||
'/reference/plugin/plugins/vuex.md',
|
||||
'/reference/plugin/plugins/qiankun.md',
|
||||
'/reference/plugin/plugins/windicss.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
'/reference/plugin/plugins/pinia.md',
|
||||
'/reference/plugin/plugins/watermark.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '插件开发',
|
||||
children: [
|
||||
'/reference/plugin/dev/README.md',
|
||||
'/reference/plugin/dev/api.md'
|
||||
],
|
||||
},
|
||||
],
|
||||
'/reference/cli/': [
|
||||
'/reference/cli/README.md',
|
||||
],
|
||||
}
|
||||
'/guide/': [
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '介绍',
|
||||
children: ['/guide/README.md', '/guide/getting-started.md'],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '基础',
|
||||
children: [
|
||||
'/guide/directory-structure.md',
|
||||
'/guide/builder.md',
|
||||
'/guide/config.md',
|
||||
'/guide/runtime-config.md',
|
||||
'/guide/env.md',
|
||||
'/guide/route.md',
|
||||
'/guide/plugin.md',
|
||||
'/guide/template.md',
|
||||
'/guide/mock.md',
|
||||
'/guide/upgrade3.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '样式和资源文件',
|
||||
children: ['/guide/image.md', '/guide/css.md', '/guide/public.md'],
|
||||
},
|
||||
'/guide/contributing.md',
|
||||
'/guide/faq.md',
|
||||
],
|
||||
'/reference/config/': ['/reference/config/README.md'],
|
||||
'/reference/api/': ['/reference/api/README.md'],
|
||||
'/reference/plugin/': [
|
||||
'/reference/plugin/README.md',
|
||||
{
|
||||
// isGroup: true,
|
||||
text: 'Plugins',
|
||||
children: [
|
||||
'/reference/plugin/plugins/access.md',
|
||||
'/reference/plugin/plugins/enums.md',
|
||||
'/reference/plugin/plugins/icon.md',
|
||||
'/reference/plugin/plugins/jest.md',
|
||||
'/reference/plugin/plugins/layout.md',
|
||||
'/reference/plugin/plugins/locale.md',
|
||||
'/reference/plugin/plugins/model.md',
|
||||
'/reference/plugin/plugins/request.md',
|
||||
'/reference/plugin/plugins/vuex.md',
|
||||
'/reference/plugin/plugins/qiankun.md',
|
||||
'/reference/plugin/plugins/windicss.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
'/reference/plugin/plugins/pinia.md',
|
||||
'/reference/plugin/plugins/watermark.md',
|
||||
'/reference/plugin/plugins/login.md',
|
||||
'/reference/plugin/plugins/swc.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '插件开发',
|
||||
children: ['/reference/plugin/dev/README.md', '/reference/plugin/dev/api.md'],
|
||||
},
|
||||
],
|
||||
'/reference/cli/': ['/reference/cli/README.md'],
|
||||
};
|
||||
|
||||
BIN
docs/.vuepress/public/left-right.png
Normal file
BIN
docs/.vuepress/public/left-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@ -3,42 +3,42 @@ home: true
|
||||
title: 首页
|
||||
heroImage: /logo.png
|
||||
actions:
|
||||
- text: 快速上手
|
||||
link: /guide/getting-started.html
|
||||
type: primary
|
||||
- text: 项目简介
|
||||
link: /guide/
|
||||
type: secondary
|
||||
- text: 快速上手
|
||||
link: /guide/getting-started.html
|
||||
type: primary
|
||||
- text: 项目简介
|
||||
link: /guide/
|
||||
type: secondary
|
||||
features:
|
||||
- title: Fast
|
||||
details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件，可以满足大部分日常开发需求。
|
||||
- title: Easy
|
||||
details: 基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
|
||||
- title: Strong
|
||||
details: 仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
|
||||
- title: 可扩展
|
||||
details: 借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
- title: 面向未来
|
||||
details: 在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
|
||||
- title: 令人愉悦
|
||||
details: 我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。
|
||||
- title: Fast
|
||||
details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。
|
||||
- title: Easy
|
||||
details: 基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
|
||||
- title: Strong
|
||||
details: 仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
|
||||
- title: 可扩展
|
||||
details: 借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
- title: 面向未来
|
||||
details: 在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
|
||||
- title: 令人愉悦
|
||||
details: 我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。
|
||||
footer: MIT Licensed | Copyright © 2020-present Webank
|
||||
---
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
yarn create @fesjs/fes-app myapp
|
||||
pnpm create @fesjs/fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
pnpm i
|
||||
|
||||
# 运行
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
@ -50,7 +50,7 @@ yarn dev
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
npm install
|
||||
|
||||
# 运行
|
||||
npm run dev
|
||||
@ -61,10 +61,6 @@ npm run dev
|
||||
|
||||
## 反馈
|
||||
|
||||
| Github Issue | Fes.js开源运营小助手 |
|
||||
| --- | --- |
|
||||
| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
|
||||
|
||||
|
||||
|
||||
|
||||
| Github Issue | Fes.js 开源运营小助手 |
|
||||
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
|
||||
|
||||
26
docs/guide/builder.md
Normal file
26
docs/guide/builder.md
Normal file
@ -0,0 +1,26 @@
|
||||
# 支持 Vite 和 Webpack 双构建
|
||||
|
||||
`Fes.js@3.0.x` 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:
|
||||
|
||||
- 选用 Vite 构建，安装 `npm i @fesjs/builder-vite` 依赖即可。
|
||||
- 选用 Webpack 构建，安装 `npm i @fesjs/builder-webpack` 依赖即可。
|
||||
|
||||
## 使用差异
|
||||
|
||||
由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：
|
||||
|
||||
### 配置
|
||||
|
||||
Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看[配置](../reference/config)。
|
||||
|
||||
### 静态文件处理
|
||||
|
||||
由于 Vite 的限制，不支持 `require` 语法，具体 Vite 的用法可以查看[官网](https://cn.vitejs.dev/guide/assets.html)
|
||||
|
||||
### html 模版
|
||||
|
||||
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) 进行个性化配置。
|
||||
|
||||
::: tip
|
||||
fes3.0+ html 模版文件从 `public/index.html` 挪到项目根目录。
|
||||
:::
|
||||
@ -1,87 +1,100 @@
|
||||
# 配置
|
||||
# 编译时配置
|
||||
|
||||
Fes.js 约定 `.fes.js` 文件为项目编译需要配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
|
||||
Fes.js 约定 `.fes.js` 文件为项目编译需要编译时配置文件，可以引入 `node` 端依赖项，不要引入浏览器端依赖项。
|
||||
|
||||
|
||||
一份常见的配置示例如下：
|
||||
一份常见的配置示例如下（更多配置项请查阅[配置](../reference/config))：
|
||||
|
||||
```js
|
||||
export default {
|
||||
base: '/foo/',
|
||||
import { defineBuildConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineBuildConfig({
|
||||
publicPath: '/',
|
||||
devServer: {
|
||||
port: 8080
|
||||
},
|
||||
mock: {
|
||||
prefix: '/v2'
|
||||
prefix: '/v2',
|
||||
},
|
||||
proxy: {
|
||||
'/v2': {
|
||||
'target': 'https://api.douban.com/',
|
||||
'changeOrigin': true,
|
||||
target: 'https://api.douban.com/',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
title: 'Fes.js',
|
||||
footer: 'Created by MumbelFe',
|
||||
multiTabs: false,
|
||||
menus: [{
|
||||
name: 'index'
|
||||
}, {
|
||||
name: 'onepiece'
|
||||
}, {
|
||||
name: 'store'
|
||||
}, {
|
||||
name: 'simpleList'
|
||||
}]
|
||||
}
|
||||
}
|
||||
menus: [
|
||||
{
|
||||
name: 'index',
|
||||
},
|
||||
{
|
||||
name: 'onepiece',
|
||||
},
|
||||
{
|
||||
name: 'store',
|
||||
},
|
||||
{
|
||||
name: 'simpleList',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 本地临时配置文件
|
||||
|
||||
可以新建 `.fes.local.js` 作为本地临时配置文件。这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配置。
|
||||
|
||||
```js
|
||||
// .fes.js
|
||||
export default { mock: false };
|
||||
|
||||
// .fes.local.js
|
||||
export default {
|
||||
export default {
|
||||
mock: true,
|
||||
devServer: { port: 8080 }
|
||||
};
|
||||
```
|
||||
|
||||
最终的配置是：
|
||||
|
||||
```js
|
||||
{
|
||||
{
|
||||
mock: true,
|
||||
devServer: { port: 8080 }
|
||||
};
|
||||
```
|
||||
|
||||
::: warning
|
||||
`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，务必不要提交到 `git` 仓库中。
|
||||
`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，不要提交到 `git` 仓库中。
|
||||
:::
|
||||
|
||||
## 多环境多份配置
|
||||
|
||||
可以通过环境变量 `FES_ENV` 区分不同环境，来指定当前环境的配置文件，这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配。
|
||||
|
||||
比如配置如下：
|
||||
|
||||
```js
|
||||
// .fes.js
|
||||
export default { mock: false };
|
||||
|
||||
// .fes.uat.js
|
||||
export default {
|
||||
export default {
|
||||
mock: true,
|
||||
devServer: { port: 8080 }
|
||||
};
|
||||
```
|
||||
|
||||
当我们运行：
|
||||
|
||||
```bash
|
||||
FES_ENV=uat fes dev
|
||||
```
|
||||
|
||||
这时候会命中 `.fes.uat.js` 这份环境配置，最终配置是：
|
||||
|
||||
```js
|
||||
{
|
||||
{
|
||||
mock: true,
|
||||
devServer: { port: 8080 }
|
||||
};
|
||||
@ -89,8 +102,8 @@ FES_ENV=uat fes dev
|
||||
|
||||
## 优先级
|
||||
|
||||
本地临时配置 > 环境配置 > 基础配置
|
||||
本地临时配置 > 环境配置 > 基础配置
|
||||
|
||||
::: tip
|
||||
如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -2,36 +2,34 @@
|
||||
|
||||
## 包概览
|
||||
|
||||
项目仓库借助于 [Yarn 工作区](https://classic.yarnpkg.com/zh-Hans/docs/workspaces) 来实现 [ Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，在 `packages` 目录下存放多个互相关联的独立包。
|
||||
项目仓库借助于 [pnpm 工作区](https://pnpm.io/pnpm-workspace_yaml) 来实现 [ Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，在 `packages` 目录下存放多个互相关联的独立包。
|
||||
|
||||
- `@fesjs/create-fes-app`: 创建项目模板模块。提供`create-fes-app`命令，提供创建多种类型项目模板的能力。
|
||||
|
||||
- `@fesjs/compiler`: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。
|
||||
- `@fesjs/create-fes-app`: 创建项目模板模块。提供`create-fes-app`命令，提供创建多种类型项目模板的能力。
|
||||
- `@fesjs/compiler`: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。
|
||||
|
||||
- `@fesjs/runtime`: 运行时插件模块。集成了vue-router，定义运行时插件生命周期、插件通讯机制。
|
||||
- `@fesjs/runtime`: 运行时插件模块。集成了 vue-router，定义运行时插件生命周期、插件通讯机制。
|
||||
|
||||
- `@fesjs/preset-build-in`: 内置插件集。包含`dev`、`build`等命令，集成webpack5+babel，提供方便编写插件的API，入口文件处理，路由处理等能力。
|
||||
- `@fesjs/preset-build-in`: 内置插件集。包含`dev`、`build`等命令，集成 webpack5+babel，提供方便编写插件的 API，入口文件处理，路由处理等能力。
|
||||
|
||||
- `@fesjs/fes-template`: 适用于PC类型的模板项目。
|
||||
- `@fesjs/fes-template`: 适用于 PC 类型的模板项目。
|
||||
|
||||
- `@fesjs/fes-template-h5`: 适用于H5类型的模板项目。
|
||||
- `@fesjs/fes-template-h5`: 适用于 H5 类型的模板项目。
|
||||
|
||||
- `@fesjs/plugin-${name}`: 官方插件。
|
||||
|
||||
- `@fesjs/fes`: 入口模块。提供`fes`命令和 API 入口，封装`@fesjs/compiler` + `@fesjs/runtime` + `@fesjs/preset-build-in`，用户只需要安装此依赖和其他插件。
|
||||
- `@fesjs/plugin-${name}`: 官方插件。
|
||||
|
||||
- `@fesjs/fes`: 入口模块。提供`fes`命令和 API 入口，封装`@fesjs/compiler` + `@fesjs/runtime` + `@fesjs/preset-build-in`，用户只需要安装此依赖和其他插件。
|
||||
|
||||
## 开发准备
|
||||
|
||||
开发要求：
|
||||
|
||||
- [Node.js v14+](http://nodejs.org)
|
||||
- [Yarn v1](https://classic.yarnpkg.com/zh-Hans/docs/install)
|
||||
- [Node.js v14+](http://nodejs.org)
|
||||
- [pnpm v8](https://pnpm.io/)
|
||||
|
||||
本项目开发使用的一些主要工具：
|
||||
|
||||
- [Jest](https://jestjs.io/) 用于单元测试
|
||||
- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) 用于代码检查和格式化
|
||||
- [Jest](https://jestjs.io/) 用于单元测试
|
||||
- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) 用于代码检查和格式化
|
||||
|
||||
克隆仓库：
|
||||
|
||||
@ -42,58 +40,66 @@ git clone https://github.com/WeBankFinTech/fes.js.git
|
||||
进入`fes.js`目录，安装依赖：
|
||||
|
||||
```bash
|
||||
yarn
|
||||
pnpm i
|
||||
```
|
||||
|
||||
## 贡献文档
|
||||
|
||||
文档代码在`docs`目录，基于 [vuepress](https://v2.vuepress.vuejs.org/zh/) 实现。
|
||||
|
||||
#### 第一步：启动服务
|
||||
|
||||
```bash
|
||||
yarn docs:dev
|
||||
pnpm docs:dev
|
||||
```
|
||||
|
||||
#### 第二步：修改md文件
|
||||
菜单配置在`/docs/.vuepress/configs/sidebar/zh.ts`中，可以通过此配置找到对应想修改的文档。
|
||||
#### 第二步：修改 md 文件
|
||||
|
||||
菜单配置在`/docs/.vuepress/configs/sidebar/zh.ts`中，可以通过此配置找到对应想修改的文档。
|
||||
|
||||
如果想添加图片，则可以先把图片添加至`/docs/.vuepress/public`，在代码中使用：
|
||||
|
||||
```html
|
||||
<img :src="$withBase('framework.png')" alt="架构">
|
||||
<img :src="$withBase('framework.png')" alt="架构" />
|
||||
```
|
||||
|
||||
#### 第三步：查看更新
|
||||
当md文档保存后，文档会自动更新，在`http://localhost:8080/`查看。
|
||||
|
||||
|
||||
当 md 文档保存后，文档会自动更新，在`http://localhost:8080/`查看。
|
||||
|
||||
## 贡献源码
|
||||
|
||||
`Fes.js`统一使用`ES Module`规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。
|
||||
|
||||
#### 启动编译服务
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
当我们修改`build.config.js`中配置的包代码时，会把`src`目录的源码编译后到`lib`目录。
|
||||
|
||||
#### 修改源码
|
||||
|
||||
在了解`Fes.js`设计前提下，修改核心代码或者插件代码。
|
||||
|
||||
#### 验证修改内容
|
||||
|
||||
根据需求选择模板项目来验证修改内容，比如选择`fes-template`：
|
||||
1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行`yarn`关联依赖
|
||||
|
||||
1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行`pnpm`关联依赖
|
||||
2. 启动模板项目的开发服务
|
||||
|
||||
```bash
|
||||
cd packages/fes-template
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
3. 在项目模板中添加代码验证修改内容
|
||||
4. 打开`localhost:8000`查看结果
|
||||
|
||||
#### 快速调试技巧
|
||||
|
||||
每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行`fes dev`，比较费时费力。
|
||||
|
||||
可以先在模板的 `.fes` 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。
|
||||
@ -102,11 +108,10 @@ yarn dev
|
||||
直接修改临时文件切莫重新执行`fes dev`，修改会被覆盖。
|
||||
:::
|
||||
|
||||
## 提交 PR
|
||||
|
||||
## 提交PR
|
||||
|
||||
1. fork项目!
|
||||
1. fork 项目!
|
||||
2. 创建你的功能分支: git checkout -b my-new-feature
|
||||
3. 本地提交新代码: git commit -am 'Add some feature'
|
||||
4. 推送本地到服务器分支: git push origin my-new-feature
|
||||
5. 创建一个PR
|
||||
5. 创建一个 PR
|
||||
|
||||
@ -9,9 +9,10 @@ fes-template
|
||||
├── mock.js
|
||||
├── .fes.js
|
||||
├── .env
|
||||
├── index.html
|
||||
├── dist
|
||||
├── public
|
||||
│ └── index.html
|
||||
│ └── logo.png
|
||||
└── src
|
||||
├── .fes
|
||||
└── pages
|
||||
@ -34,18 +35,7 @@ fes-template
|
||||
"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"
|
||||
],
|
||||
"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",
|
||||
@ -61,31 +51,31 @@ fes-template
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
"@webank/eslint-config-webank": "1.2.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.5.0",
|
||||
"vue": "^3.0.5",
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/builder-webpack": "^3.0.0",
|
||||
"@fesjs/plugin-access": "^3.0.0",
|
||||
"@fesjs/plugin-layout": "^5.0.0",
|
||||
"@fesjs/plugin-model": "^3.0.0",
|
||||
"@fesjs/plugin-enums": "^3.0.0",
|
||||
"@fesjs/plugin-jest": "^3.0.0",
|
||||
"@fesjs/plugin-vuex": "^3.0.0",
|
||||
"@fesjs/plugin-request": "^3.0.0",
|
||||
"@fesjs/plugin-qiankun": "^3.0.0",
|
||||
"@fesjs/plugin-sass": "^3.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^3.0.0",
|
||||
"@fesjs/plugin-windicss": "^3.0.0",
|
||||
"@fesjs/fes-design": "^0.7.23",
|
||||
"vue": "^3.2.47",
|
||||
"vuex": "^4.0.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
```
|
||||
|
||||
其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
|
||||
其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。`@fesjs/builder-` 开头的会被注册为构建器。
|
||||
|
||||
### tsconfig.json
|
||||
|
||||
@ -121,7 +111,7 @@ process.env.FES_ENV = 'prod';
|
||||
|
||||
执行 `fes build` 后，产物默认会存放在这里。
|
||||
|
||||
## public 目录
|
||||
### public 目录
|
||||
|
||||
此目录下所有文件为静态资源，会被复制到输出路径。
|
||||
|
||||
@ -129,7 +119,7 @@ process.env.FES_ENV = 'prod';
|
||||
|
||||
默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。
|
||||
|
||||
## src 目录
|
||||
### src 目录
|
||||
|
||||
### .fes 目录
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
# 环境变量
|
||||
在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。
|
||||
|
||||
在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。
|
||||
|
||||
## 配置环境变量
|
||||
|
||||
### 命令行添加
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
# OS X, Linux
|
||||
PORT=3000 fes dev
|
||||
@ -13,12 +15,13 @@ PORT=3000 fes dev
|
||||
# Windows (cmd.exe)
|
||||
set PORT=3000 && fes dev
|
||||
```
|
||||
|
||||
如果要同时考虑 OS X 和 Windows，可借助三方工具 [cross-env](https://github.com/kentcdodds/cross-env)
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
yarn add cross-env --dev
|
||||
pnpm add cross-env --dev
|
||||
cross-env PORT=3000 fes dev
|
||||
```
|
||||
|
||||
@ -34,106 +37,135 @@ cross-env PORT=3000 fes dev
|
||||
</CodeGroup>
|
||||
|
||||
### `.env` 文件配置
|
||||
|
||||
Fes.js 中约定根目录下以 `.env` 开头的文件为环境变量配置文件。
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
PORT=3000
|
||||
```
|
||||
|
||||
然后执行
|
||||
|
||||
```bash
|
||||
fes dev
|
||||
```
|
||||
|
||||
会以 3000 端口启动 dev server。
|
||||
|
||||
#### 本地临时配置
|
||||
|
||||
可以新建 `.env.local`，这份配置会和 `.env` 做合并后形成最终配置。
|
||||
|
||||
#### 环境配置
|
||||
|
||||
可以通过环境变量 `FES_ENV` 区分不同环境来指定配置，这时候必须在执行命令前添加 `FES_ENV` 保证执行加载环境变量配置文件逻辑前 `FES_ENV` 已设置。
|
||||
|
||||
举个 🌰 ：
|
||||
|
||||
```bash
|
||||
FES_ENV=sit fes dev
|
||||
```
|
||||
|
||||
如果存在 `.env.sit` 文件，则会将 `.env.sit` 的配置和 `.env` 做合并后形成最终配置。
|
||||
|
||||
#### 配置优先级
|
||||
|
||||
本地临时配置 > 环境配置 > 基础配置
|
||||
本地临时配置 > 环境配置 > 基础配置
|
||||
|
||||
::: tip
|
||||
如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。
|
||||
:::
|
||||
:::
|
||||
|
||||
## 编译时配置列表
|
||||
|
||||
编译时配置是在构建过程需要的变量，开放给用户配置。
|
||||
|
||||
### FES_ENV
|
||||
|
||||
指定当前的环境，不同环境各自的配置文件。
|
||||
::: tip
|
||||
`FES_ENV` 在会在加载`.env`前使用，所以只能用命令行方式配置。
|
||||
:::
|
||||
:::
|
||||
|
||||
### FES_PRESETS
|
||||
|
||||
添加额外的插件集入口
|
||||
|
||||
### FES_PLUGINS
|
||||
|
||||
添加额外的插件入口
|
||||
|
||||
### PORT
|
||||
|
||||
`fes dev` 时服务指定的端口号，默认是 `8080`
|
||||
|
||||
### HOST
|
||||
|
||||
默认是 `localhost`。
|
||||
|
||||
### HTTPS
|
||||
|
||||
默认是 `false`。
|
||||
|
||||
### WATCH
|
||||
|
||||
设为 none 时不监听文件变更。比如：
|
||||
|
||||
```
|
||||
WATCH=none fes dev
|
||||
```
|
||||
|
||||
### BABEL_CACHE
|
||||
|
||||
默认开启 Babel 编译缓存，值为 none 时禁用缓存。
|
||||
|
||||
### ANALYZE
|
||||
|
||||
用于分析 bundle 构成，默认关闭。
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
ANALYZE=1 fes build
|
||||
```
|
||||
|
||||
### ANALYZE_MODE
|
||||
|
||||
默认是`server`
|
||||
|
||||
### ANALYZE_PORT
|
||||
|
||||
默认是`8888`
|
||||
|
||||
### CLEAR_OUTPUT
|
||||
|
||||
仅仅在 `build` 时生效。如果设置为 `none`，就不会在构建前清除 `Output` 文件内容。
|
||||
|
||||
### RM_TMPDIR
|
||||
|
||||
仅仅在 `build` 时生效。如果设置为 `none`，就不会在构建后清除 `.fes` 临时文件内容。
|
||||
|
||||
## process.env
|
||||
|
||||
运行时配置需要以 `FES_APP_` 开头，比如在 `.env` 中配置：
|
||||
|
||||
```
|
||||
FES_APP_KEY=123456789
|
||||
```
|
||||
|
||||
在代码中使用：
|
||||
|
||||
```js
|
||||
console.log(process.env.FES_APP_KEY)
|
||||
console.log(process.env.FES_APP_KEY);
|
||||
// 输出 123456789
|
||||
```
|
||||
|
||||
除了用户自定义的以`FES_APP_`开头的变量，还提供如下配置：
|
||||
|
||||
- **NODE_ENV**：Node 环境变量
|
||||
- **NODE_ENV**：Node 环境变量
|
||||
|
||||
- **FES_ENV**：Fes.js 环境变量
|
||||
- **FES_ENV**：Fes.js 环境变量
|
||||
|
||||
- **BASE_URL**：等同于 publicPath
|
||||
- **BASE_URL**：等同于 publicPath
|
||||
|
||||
@ -1 +1,11 @@
|
||||
# 常见问题
|
||||
# 常见问题
|
||||
|
||||
|
||||
#### 为什么代码提示不生效？
|
||||
|
||||
1. 需要先运行一次`fes dev`
|
||||
2. 检查tsconfig.json，`include`包含当前编辑文件，`compilerOptions.path`包含
|
||||
```
|
||||
"@/*": ["./src/*"],
|
||||
"@@/*": ["./src/.fes/*"]
|
||||
```
|
||||
@ -1,43 +1,52 @@
|
||||
# 快速上手
|
||||
|
||||
## 依赖环境
|
||||
首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
|
||||
|
||||
首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。
|
||||
|
||||
```bash
|
||||
# 打印 node 版本
|
||||
node -v
|
||||
v10.13.0
|
||||
v12.13.0
|
||||
```
|
||||
推荐使用 yarn 管理 npm 依赖
|
||||
|
||||
推荐使用 [pnpm](https://pnpm.io/installation) 管理 npm 依赖
|
||||
|
||||
```bash
|
||||
# 全局安装 yarn
|
||||
npm i yarn -g
|
||||
# 全局安装 pnpm
|
||||
npm i pnpm -g
|
||||
```
|
||||
|
||||
## 创建项目
|
||||
|
||||
这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
|
||||
|
||||
##### 步骤1 创建工作空间
|
||||
##### 步骤 1 创建工作空间
|
||||
|
||||
如果工作空间不存在，则先创建：
|
||||
|
||||
```bash
|
||||
# 创建目录 workspace
|
||||
mkdir workspace
|
||||
# 进入目录 workspace
|
||||
cd workspace
|
||||
```
|
||||
|
||||
如果工作空间已存在，则直接进入
|
||||
|
||||
```bash
|
||||
# 进入目录 workspace
|
||||
cd workspace
|
||||
```
|
||||
|
||||
##### 步骤2 在工作空间创建项目
|
||||
##### 步骤 2 在工作空间创建项目
|
||||
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
yarn create @fesjs/fes-app myapp
|
||||
pnpm create @fesjs/fes-app myapp
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
@ -52,30 +61,30 @@ npx @fesjs/create-fes-app myapp
|
||||
</CodeGroupItem>
|
||||
</CodeGroup>
|
||||
|
||||
|
||||
如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：
|
||||
|
||||
<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
|
||||
|
||||
你可以选择：
|
||||
- `Overwrite` 删除项目文件夹，重新创建项目。
|
||||
- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
|
||||
|
||||
- `Overwrite` 删除项目文件夹，重新创建项目。
|
||||
- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
|
||||
|
||||
当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
|
||||
<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
|
||||
|
||||
你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
|
||||
你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
|
||||
|
||||
##### 步骤 3 安装依赖
|
||||
|
||||
##### 步骤3 安装依赖
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 进入项目目录
|
||||
cd myapp
|
||||
# 安装依赖
|
||||
yarn
|
||||
pnpm i
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
@ -86,21 +95,22 @@ yarn
|
||||
# 进入项目目录
|
||||
cd myapp
|
||||
# 安装依赖
|
||||
npm i
|
||||
npm i
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
</CodeGroup>
|
||||
|
||||
## 启动项目
|
||||
## 启动项目
|
||||
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 开发调试
|
||||
yarn dev
|
||||
pnpm dev
|
||||
|
||||
yarn run v1.22.4
|
||||
pnpm run v1.22.4
|
||||
$ fes dev
|
||||
Starting the development server http://localhost:8080 ...
|
||||
|
||||
@ -130,23 +140,22 @@ Starting the development server http://localhost:8080 ...
|
||||
</CodeGroupItem>
|
||||
</CodeGroup>
|
||||
|
||||
|
||||
Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
|
||||
|
||||
|
||||
<img :src="$withBase('home.png')" alt="home">
|
||||
|
||||
## 部署发布
|
||||
|
||||
### 构建
|
||||
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 构建
|
||||
yarn build
|
||||
pnpm build
|
||||
|
||||
yarn run v1.22.4
|
||||
pnpm run v1.22.4
|
||||
$ fes build
|
||||
|
||||
✔ Webpack
|
||||
@ -173,6 +182,7 @@ npm run build
|
||||
</CodeGroup>
|
||||
|
||||
构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。
|
||||
|
||||
```base
|
||||
tree ./dist
|
||||
|
||||
@ -188,8 +198,9 @@ dist
|
||||
```
|
||||
|
||||
### 本地验证
|
||||
|
||||
发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。
|
||||
|
||||
|
||||
### 部署
|
||||
本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。
|
||||
|
||||
本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。
|
||||
|
||||
@ -8,54 +8,54 @@
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<img src="@/images/logo.png`">
|
||||
<img src="@/images/logo.png`" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### JS 里使用图片
|
||||
|
||||
```js
|
||||
import imageUrl from '@/images/logo.png`'
|
||||
import imageUrl from '@/images/logo.png`';
|
||||
```
|
||||
|
||||
### CSS 里使用图片
|
||||
|
||||
```css
|
||||
.logo {
|
||||
background: url('@/images/logo.png')
|
||||
background: url('@/images/logo.png');
|
||||
}
|
||||
```
|
||||
|
||||
注意：
|
||||
|
||||
1. 这是 `webpack` 的规则，如果切到其他打包工具，可能会有变化
|
||||
2. `less` 中同样适用
|
||||
|
||||
|
||||
## `public` 文件夹
|
||||
## `public` 文件夹
|
||||
|
||||
有些内容不需要经过 `webpack` 模块化处理，则可以将这些内容放在 `public` 文件夹，构建后会直接复制到 `dist` 目录，所以你需要通过`BASE_URL`来引入它们。
|
||||
|
||||
### 在HTML模板中使用
|
||||
### 在 HTML 模板中使用
|
||||
|
||||
|
||||
在 `public/index.html` 中需要设置：
|
||||
在 `index.html` 中需要设置：
|
||||
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
```
|
||||
|
||||
### 在.vue 文件中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<img :src="`${publicPath}my-image.png`">
|
||||
<img :src="`${publicPath}my-image.png`" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ Mock 数据是前端开发过程中必不可少的一环，是分离前后端开
|
||||
Fes.js 约定 `./mock.js` 为 mock 文件。
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
.
|
||||
├── mock.js
|
||||
@ -18,39 +19,46 @@ Fes.js 约定 `./mock.js` 为 mock 文件。
|
||||
## 编写 Mock 文件
|
||||
|
||||
可以参考如下 🌰：
|
||||
``` js
|
||||
|
||||
```js
|
||||
export default function ({ cgiMock, mockjs, utils }) {
|
||||
const { Random } = mockjs;
|
||||
|
||||
// 测试 proxy 与 mock 用例集合
|
||||
cgiMock('/movie/in_theaters_mock', (req, res) => {
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
text: 'movie: movie/in_theaters_mock ~~~~~'
|
||||
}
|
||||
}));
|
||||
res.send(
|
||||
JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
text: 'movie: movie/in_theaters_mock ~~~~~',
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
cgiMock('/movie/test_mock', (req, res) => {
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
text: 'mock: movie/test_mock'
|
||||
}
|
||||
}));
|
||||
res.send(
|
||||
JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
text: 'mock: movie/test_mock',
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
// 测试用例: mock.js change，重现请求，需要能拉最新的数据
|
||||
cgiMock('/watchtest', (req, res) => {
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
text: '通过 register 测试 mock watch: 初始状态'
|
||||
}
|
||||
}));
|
||||
res.send(
|
||||
JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
text: '通过 register 测试 mock watch: 初始状态',
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
// 返回一个数字
|
||||
@ -61,17 +69,23 @@ export default function ({ cgiMock, mockjs, utils }) {
|
||||
cgiMock({
|
||||
url: '/json',
|
||||
result: {
|
||||
code: '400101', msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String", transactionTime: '20170309171146', success: false
|
||||
}
|
||||
code: '400101',
|
||||
msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String",
|
||||
transactionTime: '20170309171146',
|
||||
success: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 利用 mock.js 产生随机文本
|
||||
cgiMock('/text', Random.cparagraph());
|
||||
|
||||
// 返回一个字符串 利用 mock.js 产生随机字符
|
||||
cgiMock('/random', mockjs.mock({
|
||||
'string|1-10': '★'
|
||||
}));
|
||||
cgiMock(
|
||||
'/random',
|
||||
mockjs.mock({
|
||||
'string|1-10': '★',
|
||||
}),
|
||||
);
|
||||
|
||||
// 正则匹配url, 返回一个字符串
|
||||
cgiMock(/\/abc|\/xyz/, 'regexp test!');
|
||||
@ -98,20 +112,21 @@ export default function ({ cgiMock, mockjs, utils }) {
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
'Content-Length': '123',
|
||||
ETag: '12345'
|
||||
ETag: '12345',
|
||||
},
|
||||
cookies: [
|
||||
{
|
||||
name: 'myname', value: 'kwan', maxAge: 900000, httpOnly: true
|
||||
}
|
||||
]
|
||||
name: 'myname',
|
||||
value: 'kwan',
|
||||
maxAge: 900000,
|
||||
httpOnly: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 携带参数的请求
|
||||
cgiMock('/v2/audit/list', (req, res) => {
|
||||
const {
|
||||
currentPage, pageSize, isAudited
|
||||
} = req.body;
|
||||
const { currentPage, pageSize, isAudited } = req.body;
|
||||
res.send({
|
||||
code: '0',
|
||||
msg: '',
|
||||
@ -135,9 +150,9 @@ export default function ({ cgiMock, mockjs, utils }) {
|
||||
handleTag: '已采纳',
|
||||
postType: 'voice',
|
||||
postStatus: isAudited ? 'pass' : 'auditing',
|
||||
auditStatus: 'audit1'
|
||||
}))
|
||||
}
|
||||
auditStatus: 'audit1',
|
||||
})),
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@ -145,37 +160,47 @@ export default function ({ cgiMock, mockjs, utils }) {
|
||||
cgiMock('/v2/upload', (req, res) => {
|
||||
res.send({
|
||||
code: '0',
|
||||
msg: '文件上传成功'
|
||||
msg: '文件上传成功',
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### cgiMock 参数
|
||||
### cgiMock 参数
|
||||
|
||||
创建一个 mock 接口，参数非常灵活，参考上面的 demo 即可。
|
||||
|
||||
|
||||
### mockjs 参数
|
||||
|
||||
[Mock.js](http://mockjs.com/) 是常用的辅助生成模拟数据的三方库，借助他可以提升我们的 mock 数据能力。
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export default function ({ cgiMock, mockjs, utils }) {
|
||||
cgiMock('/random', mockjs.mock({
|
||||
'string|1-10': '★'
|
||||
}));
|
||||
cgiMock(
|
||||
'/random',
|
||||
mockjs.mock({
|
||||
'string|1-10': '★',
|
||||
}),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### utils 参数
|
||||
|
||||
工具函数：
|
||||
- utils.file(path)，从项目根目录根据path寻找文件，返回文件流。
|
||||
|
||||
- utils.file(path)，从项目根目录根据 path 寻找文件，返回文件流。
|
||||
|
||||
## 配置 Mock
|
||||
|
||||
详见配置 [mock](../reference/config/#mock)。
|
||||
|
||||
## 关闭 Mock
|
||||
|
||||
可以通过配置关闭。
|
||||
|
||||
```js
|
||||
export default {
|
||||
mock: false,
|
||||
|
||||
@ -1,36 +1,44 @@
|
||||
# 插件
|
||||
|
||||
## 插件的 id 和 key
|
||||
|
||||
每个插件都会对应一个 `id` 和一个 `key`，**`id` 是路径的简写，`key` 是进一步简化后用于配置的唯一值**。
|
||||
|
||||
比如插件 `/node_modules/@fesjs/plugin-foo/index.js`，通常来说，其 `id` 为 `@fesjs/plugin-foo`，`key` 为 `foo`。
|
||||
|
||||
::: tip
|
||||
id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。
|
||||
id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。
|
||||
:::
|
||||
|
||||
## 启动插件
|
||||
|
||||
有多种方式引入插件
|
||||
|
||||
### package.json 依赖
|
||||
|
||||
Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件，比如：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/plugin-request": "^2.0.0"
|
||||
}
|
||||
"dependencies": {
|
||||
"@fesjs/plugin-request": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
那么 `@fesjs/plugin-request` 会自动被注册，无需在配置里重复声明。
|
||||
|
||||
### 配置
|
||||
|
||||
在配置里可通过 `presets` 和 `plugins` 配置插件，比如：
|
||||
|
||||
```js
|
||||
export default {
|
||||
presets: ['./preset', 'foo/presets'],
|
||||
plugins: ['./plugin'],
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
通常用于几种情况：
|
||||
|
||||
1. 项目相对路径的插件
|
||||
@ -41,9 +49,11 @@ export default {
|
||||
:::
|
||||
|
||||
### 环境变量
|
||||
|
||||
还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
FES_PRESETS=/a/b/preset.js fes dev
|
||||
```
|
||||
@ -51,21 +61,25 @@ FES_PRESETS=/a/b/preset.js fes dev
|
||||
## 禁用插件
|
||||
|
||||
通过配置插件的 `key` 为 `false`，比如：
|
||||
|
||||
```js
|
||||
export default {
|
||||
mock: false,
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Mock 插件的 `key` 是 `mock`，我们在配置文件中配置 `mock` 为 `false`，则会禁用 Mock 插件及其功能。
|
||||
|
||||
## 配置插件
|
||||
|
||||
通过插件的 `key` 来配置插件，比如：
|
||||
|
||||
```js
|
||||
export default {
|
||||
mock: {
|
||||
prefix: '/v2'
|
||||
}
|
||||
}
|
||||
mock: {
|
||||
prefix: '/v2',
|
||||
},
|
||||
};
|
||||
```
|
||||
这里的 `mock` 是 Mock插件 的 key。
|
||||
|
||||
这里的 `mock` 是 Mock 插件 的 key。
|
||||
|
||||
@ -2,29 +2,27 @@
|
||||
|
||||
有些内容不需要经过 `webpack` 模块化处理，则可以将这些内容放在 `public` 文件夹，构建后会直接复制到 `dist` 目录，所以你需要通过`BASE_URL`来引入它们。
|
||||
|
||||
### 在HTML模板中使用
|
||||
### 在 HTML 模板中使用
|
||||
|
||||
|
||||
在 `public/index.html` 中需要设置：
|
||||
在 `index.html` 中需要设置：
|
||||
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
```
|
||||
|
||||
### 在.vue 和 js 文件中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<img :src="`${publicPath}my-image.png`">
|
||||
<img :src="`${publicPath}my-image.png`" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -164,8 +164,20 @@ pages
|
||||
```
|
||||
这样，如果访问 `/foo`，`/` 不能匹配，会 fallback 到 `*` 路由，通过 `src/pages/*.vue` 进行渲染。
|
||||
|
||||
### 扩展路由元信息
|
||||
### 智能路由
|
||||
可以看到，编译后路由都会有 `count` 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：
|
||||
- 路由的路径每个子项得到4分
|
||||
- 子项为静态细分(`/list`)再加3分
|
||||
- 子项为动态细分（`/:orderId`）再加2分
|
||||
- 根段(`/`)再1分
|
||||
- 通配符(`*`)匹配到的减去1分
|
||||
|
||||
当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
|
||||
|
||||
## 扩展路由元信息
|
||||
|
||||
我们在定义路由时可以配置`meta`字段，用来记录一些跟路由相关的信息：
|
||||
|
||||
```js
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
@ -185,10 +197,18 @@ const router = new VueRouter({
|
||||
})
|
||||
```
|
||||
|
||||
接下来我们来配置 `meta`：
|
||||
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="vue" active>
|
||||
我们使用`defineRouteMeta` 配置 `meta`：
|
||||
|
||||
```js
|
||||
import { defineRouteMeta } from '@fesjs/fes';
|
||||
defineRouteMeta({
|
||||
name: "store",
|
||||
title: "vuex测试"
|
||||
})
|
||||
```
|
||||
|
||||
当然在单文件组件中，还可以通过`<config></config>`配置 `meta`：
|
||||
|
||||
```vue
|
||||
<config>
|
||||
@ -199,33 +219,13 @@ const router = new VueRouter({
|
||||
</config>
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
<CodeGroupItem title="jsx">
|
||||
|
||||
```jsx
|
||||
import { defineRouteMeta, useRoute } from '@fesjs/fes';
|
||||
defineRouteMeta({
|
||||
name: "store",
|
||||
title: "vuex测试"
|
||||
})
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
<CodeGroupItem title="tsx">
|
||||
|
||||
```tsx
|
||||
import { defineRouteMeta, useRoute } from '@fesjs/fes';
|
||||
defineRouteMeta({
|
||||
name: "store",
|
||||
title: "vuex测试"
|
||||
})
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
</CodeGroup>
|
||||
::: tip
|
||||
推荐使用`defineRouteMete`，有更好的提示。
|
||||
:::
|
||||
|
||||
|
||||
则编译后的路由配置为：
|
||||
|
||||
路由元信息在编译后会附加到路由配置中：
|
||||
```js{5-8}
|
||||
[
|
||||
{
|
||||
@ -239,16 +239,6 @@ defineRouteMeta({
|
||||
]
|
||||
```
|
||||
|
||||
### 智能路由
|
||||
可以看到，编译后路由都会有 `count` 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：
|
||||
- 路由的路径每个子项得到4分
|
||||
- 子项为静态细分(`/list`)再加3分
|
||||
- 子项为动态细分（`/:orderId`）再加2分
|
||||
- 根段(`/`)再1分
|
||||
- 通配符(`*`)匹配到的减去1分
|
||||
|
||||
当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
|
||||
|
||||
## 路由跳转
|
||||
想学习更多，可以查看 [Vue Router 官方文档](https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE)。
|
||||
|
||||
|
||||
@ -8,20 +8,75 @@ Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写
|
||||
|
||||
例如：
|
||||
|
||||
plugin-acess插件定义运行时配置项：
|
||||
plugin-access 插件定义运行时配置项：
|
||||
|
||||
```js
|
||||
api.addRuntimePluginKey(() => 'access');
|
||||
```
|
||||
plugin-acess插件读取配置项：
|
||||
|
||||
plugin-access 插件读取配置项：
|
||||
|
||||
```js
|
||||
const runtimeConfig = plugin.applyPlugins({
|
||||
key: 'access',
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {}
|
||||
initialValue: {},
|
||||
});
|
||||
```
|
||||
|
||||
而用户则只需要配置：
|
||||
|
||||
```js
|
||||
// app.js
|
||||
import { defineRuntimeConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
access: memo => ({
|
||||
...memo
|
||||
unAccessHandler({
|
||||
router, to, from, next
|
||||
}) {
|
||||
// 处理逻辑
|
||||
},
|
||||
noFoundHandler({
|
||||
router, to, from, next
|
||||
}) {
|
||||
// 处理逻辑
|
||||
},
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
## 配置智能提示
|
||||
|
||||
配置可以单独导出，也可以通过 `defineRuntimeConfig` 工具函数获取类型提示。
|
||||
|
||||
方式一（推荐，有类型提示）：
|
||||
|
||||
```js
|
||||
// app.js
|
||||
import { defineRuntimeConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
access: memo => ({
|
||||
...memo
|
||||
unAccessHandler({
|
||||
router, to, from, next
|
||||
}) {
|
||||
// 处理逻辑
|
||||
},
|
||||
noFoundHandler({
|
||||
router, to, from, next
|
||||
}) {
|
||||
// 处理逻辑
|
||||
},
|
||||
}),
|
||||
// ...其他配置项
|
||||
});
|
||||
```
|
||||
|
||||
方式二：
|
||||
|
||||
```js
|
||||
// app.js
|
||||
export const access = memo => ({
|
||||
@ -37,7 +92,6 @@ export const access = memo => ({
|
||||
// 处理逻辑
|
||||
},
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## 配置项
|
||||
@ -49,6 +103,7 @@ beforeRender(lastOpts)
|
||||
在渲染之前执行，执行`action`过程中显示 `loading` 配置的组件，执行结果作为参数 `initialState` 传给 `modifyClientRenderOpts`。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
// app.js
|
||||
import { access } from '@fesjs/fes';
|
||||
@ -65,52 +120,104 @@ export function beforeRender(lastOpts) {
|
||||
setTimeout(() => {
|
||||
setRole('admin');
|
||||
resolve({
|
||||
userName: 'harrywan'
|
||||
userName: 'harrywan',
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### patchRoutes
|
||||
### patchRoutes
|
||||
|
||||
patchRoutes({routes })
|
||||
|
||||
:::warning
|
||||
准备删除此API，推荐使用`modifyRoute`
|
||||
:::
|
||||
|
||||
修改路由。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
```
|
||||
|
||||
```js
|
||||
export function patchRoutes({ routes }) {
|
||||
routes.unshift({
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
});
|
||||
routes.unshift({
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
直接修改 `routes`, 不需要返回
|
||||
:::
|
||||
|
||||
|
||||
### modifyRoute
|
||||
modifyRoute({base, createHistory, routes})
|
||||
|
||||
修改路由配置信息。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
|
||||
```js
|
||||
export function modifyRoute(memo) {
|
||||
return {
|
||||
...memo,
|
||||
routes: [
|
||||
{
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
},
|
||||
...memo.routes
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
比如修改 base:
|
||||
```js
|
||||
export function modifyRoute(memo) {
|
||||
return {
|
||||
...memo,
|
||||
base: window.location.href
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
比如改为使用createMemoryHistory：
|
||||
```js
|
||||
export function modifyRoute(memo) {
|
||||
return {
|
||||
...memo,
|
||||
createHistory: createMemoryHistory
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### modifyClientRenderOpts
|
||||
|
||||
modifyClientRenderOpts(lastOpts)
|
||||
|
||||
修改 `clientRender` 参数。参数是一个对象：
|
||||
- routes，路由配置信息
|
||||
- rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。
|
||||
- initialState， 初始化数据，`beforeRender` 运行得到的数据。
|
||||
|
||||
- routes，路由配置信息
|
||||
- rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。
|
||||
- initialState， 初始化数据，`beforeRender` 运行得到的数据。
|
||||
|
||||
比如在微前端里动态修改渲染根节点：
|
||||
|
||||
```js
|
||||
let isSubApp = false;
|
||||
export function modifyClientRenderOpts(lastOpts) {
|
||||
return {
|
||||
...lastOpts,
|
||||
rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,
|
||||
};
|
||||
return {
|
||||
...lastOpts,
|
||||
rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
@ -120,12 +227,13 @@ rootContainer(LastRootContainer, args)
|
||||
|
||||
修改交给 Vue 渲染时的根组件，默认是 `<RouterView></RouterView>`。
|
||||
|
||||
- LastRootContainer，上一个插件修改后的结果。
|
||||
- args，包含：
|
||||
- routes，全量路由配置
|
||||
- plugin，运行时插件机制
|
||||
- LastRootContainer，上一个插件修改后的结果。
|
||||
- args，包含：
|
||||
- routes，全量路由配置
|
||||
- plugin，运行时插件机制
|
||||
|
||||
比如在可以包一层 DIV：
|
||||
|
||||
比如在可以包一层DIV：
|
||||
```js
|
||||
export function rootContainer(container) {
|
||||
return () => {
|
||||
@ -133,8 +241,8 @@ export function rootContainer(container) {
|
||||
<div>
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
@ -145,14 +253,14 @@ onAppCreated({app})
|
||||
创建 app 实例后触发。
|
||||
|
||||
比如用于安装 Vue 插件：
|
||||
|
||||
```js
|
||||
import { createRouter } from "vue-router";
|
||||
import { createRouter } from 'vue-router';
|
||||
|
||||
export function onAppCreated({ app }) {
|
||||
const router = createRouter();
|
||||
app.use(router);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### render
|
||||
@ -163,22 +271,22 @@ render(oldRender: Function)
|
||||
|
||||
比如用于渲染之前做权限校验。
|
||||
|
||||
|
||||
|
||||
### onRouterCreated
|
||||
|
||||
onRouterCreated({router})
|
||||
|
||||
生成router时触发。
|
||||
生成 router 时触发。
|
||||
|
||||
比如用于收集切换路由的记录：
|
||||
|
||||
```js
|
||||
export function onRouterCreated({ router }) {
|
||||
router.afterEach((to, from) => {
|
||||
console.log(to)
|
||||
console.log(to);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## 更多配置项
|
||||
Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。
|
||||
|
||||
Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。
|
||||
|
||||
@ -1,56 +1,56 @@
|
||||
# HTML 模板
|
||||
|
||||
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认模板内容是：
|
||||
Fes.js 默认模板内容是：
|
||||
|
||||
::: tip
|
||||
fes3.0+ html 模版文件从 `public/index.html` 挪到项目根目录。
|
||||
:::
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title><%= title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="<%= mountElementId %>"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 自定义模板
|
||||
在 `src/public` 文件夹中创建`index.html`，Fes.js 约定如果这个文件存在，则会替换默认模板。
|
||||
## 修改页面标题
|
||||
|
||||
## 模板配置
|
||||
在配置文件（`.fes.js`）中配置 `html`，把[配置](https://github.com/jantimon/html-webpack-plugin#options)的对象作为参数传入 `html-webpack-plugin` 实例。
|
||||
|
||||
举个 :chestnut: ：
|
||||
```js
|
||||
// .fes.js
|
||||
export default {
|
||||
html: {
|
||||
title: '海贼王'
|
||||
}
|
||||
}
|
||||
title: '这是页面标题',
|
||||
};
|
||||
```
|
||||
页面的标题会设置成'海贼王'。
|
||||
|
||||
页面的标题会设置成 `这是页面标题`。
|
||||
|
||||
## 模板变量
|
||||
当然我们也可以手动编写模板，在模板中添加`link`、`link`、`meta`等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：
|
||||
|
||||
- **htmlWebpackPlugin**，特定于此插件的数据
|
||||
- **webpackConfig**，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
|
||||
- **compilation**，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()
|
||||
模版中可以使用的变量：
|
||||
|
||||
- `NODE_ENV`: Node.js 环境变量
|
||||
- `FES_ENV`: Fes.js 环境变量
|
||||
- `BASE_URL`: publicPath
|
||||
- `.env.**`: 文件中以 `FES_APP_` 开头的变量
|
||||
|
||||
举个 🌰 ：
|
||||
```html
|
||||
<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
|
||||
|
||||
```env
|
||||
# .env
|
||||
FES_APP_HELLO_WORLD=hello world
|
||||
```
|
||||
|
||||
除上述 `html-webpack-plugin` 插件提供的变量外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
|
||||
- `NODE_ENV`
|
||||
- `FES_ENV`
|
||||
- `.env` 文件中以 `FES_APP_` 开头的变量
|
||||
|
||||
举个 🌰 ：
|
||||
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
```
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<body>
|
||||
<div><%= FES_APP_HELLO_WORLD %></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
26
docs/guide/upgrade3.md
Normal file
26
docs/guide/upgrade3.md
Normal file
@ -0,0 +1,26 @@
|
||||
# 从 2.0.x 迁移到 3.0.x
|
||||
|
||||
## 版本 3.0.x 的 break
|
||||
|
||||
1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下。
|
||||
2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。
|
||||
|
||||
## 继续使用 Webpack
|
||||
|
||||
1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`。
|
||||
2. 如果有，将 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
|
||||
|
||||
## 换成 Vite
|
||||
|
||||
1. 安装依赖包 `npm i @fesjs/builder-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 支持的方式。
|
||||
|
||||
## 插件
|
||||
|
||||
插件都需要升级到 `3.0.x` 版本，新版添加了兼容`builder`的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。
|
||||
|
||||
- [@fesjs/plugin-layout](../reference/plugins/layout) 需要升级到`5.0.x`版本。
|
||||
- [@fesjs/plugin-locale](../reference/plugins/locale) 需要升级到`4.0.x`版本。
|
||||
- [@fesjs/plugin-qiankun](../reference/plugins/qiankun) 由于`qiankun`技术限制，子应用目前还只能使用 Webpack 构建。
|
||||
@ -65,6 +65,15 @@ plugin.applyPlugins({
|
||||
- modify，用于修改值
|
||||
- event，用于执行事件，前面没有依赖关系
|
||||
|
||||
### defineRouteMeta
|
||||
定义页面的元信息
|
||||
|
||||
### defineBuildConfig
|
||||
定义构建配置
|
||||
|
||||
### defineRuntimeConfig
|
||||
定义运行时配置
|
||||
|
||||
|
||||
## 路由API
|
||||
|
||||
@ -78,6 +87,10 @@ const router = getRouter();
|
||||
router.push();
|
||||
```
|
||||
|
||||
### getHistory
|
||||
返回当前路由的History
|
||||
|
||||
|
||||
### useRoute
|
||||
返回当前 `route` 实例，相当于在模板内使用 `$route`。必须在 `setup` 函数内调用。
|
||||
```js
|
||||
@ -186,5 +199,6 @@ router-view 将显示当前 URL 的对应的路由组件。你可以把它放在
|
||||
```
|
||||
可以查看[官方文档](https://next.router.vuejs.org/api/#router-view-props)了解更多 RouterView 的 Porps。查看[官方文档](https://next.router.vuejs.org/api/#router-view-s-v-slot)了解 RouterView 的作用域插槽。
|
||||
|
||||
### Router Methods
|
||||
查看[官方文档](https://next.router.vuejs.org/api/#router-methods)了解更多
|
||||
### 其他 Router Methods
|
||||
查看[vue-router 官方文档](https://next.router.vuejs.org/api/#router-methods)了解更多。
|
||||
|
||||
|
||||
@ -5,24 +5,26 @@ sidebar: auto
|
||||
# 命令行工具
|
||||
|
||||
## create-fes-app
|
||||
|
||||
通过 `create-fes-app` 命令创建项目模板，输入`create-fes-app -h`则可以看到如下信息：
|
||||
|
||||
```
|
||||
Usage: create-fes-app <name>
|
||||
|
||||
Options:
|
||||
-v, --version Output the current version
|
||||
-h, --help Display help for command
|
||||
-h, --help Display help for command
|
||||
-f, --force Overwrite target directory if it exists
|
||||
-m, --merge Merge target directory if it exists
|
||||
```
|
||||
|
||||
可以在本机安装后使用：
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 全局安装
|
||||
yarn global add @fesjs/create-fes-app
|
||||
pnpm global add @fesjs/create-fes-app
|
||||
|
||||
# 创建模板
|
||||
create-fes-app fes-app
|
||||
@ -43,20 +45,20 @@ create-fes-app fes-app
|
||||
</CodeGroupItem>
|
||||
</CodeGroup>
|
||||
|
||||
推荐使用 `yarn create` 和 `npx` 方式创建模板，一直使用最新的模板：
|
||||
推荐使用 `pnpm create` 和 `npx` 方式创建模板，一直使用最新的模板：
|
||||
|
||||
<CodeGroup>
|
||||
<CodeGroupItem title="YARN" active>
|
||||
<CodeGroupItem title="PNPM" active>
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
yarn create @fesjs/fes-app myapp
|
||||
pnpm create @fesjs/fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
pnpm i
|
||||
|
||||
# 运行
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
</CodeGroupItem>
|
||||
@ -68,7 +70,7 @@ yarn dev
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
npm install
|
||||
|
||||
# 运行
|
||||
npm run dev
|
||||
@ -77,8 +79,8 @@ npm run dev
|
||||
</CodeGroupItem>
|
||||
</CodeGroup>
|
||||
|
||||
|
||||
## fes
|
||||
|
||||
需要在项目根目录执行 `fes` 命令，输入`fes -h`则可以看到如下信息：
|
||||
|
||||
```
|
||||
@ -101,7 +103,9 @@ Commands:
|
||||
```
|
||||
|
||||
### fes dev
|
||||
|
||||
启动本地开发服务器进行项目的开发调试。
|
||||
|
||||
```
|
||||
Usage: fes dev [options]
|
||||
|
||||
@ -112,13 +116,17 @@ Options:
|
||||
--https whether to turn on the https service
|
||||
-h, --help display help for command
|
||||
```
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
fes dev --port=8080
|
||||
```
|
||||
|
||||
### fes build
|
||||
|
||||
编译构建 web 产物。
|
||||
|
||||
```
|
||||
Usage: fes build [options]
|
||||
|
||||
@ -127,19 +135,26 @@ build application for production
|
||||
Options:
|
||||
-h, --help display help for command
|
||||
```
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
fes build
|
||||
```
|
||||
|
||||
### fes help
|
||||
|
||||
打印帮助文档。
|
||||
比如：
|
||||
|
||||
```bash
|
||||
fes help
|
||||
```
|
||||
|
||||
### fes info
|
||||
|
||||
打印当前项目的有用的环境信息，用来帮助定位问题。
|
||||
|
||||
```
|
||||
Usage: fes info [options]
|
||||
|
||||
@ -148,13 +163,17 @@ print debugging information about your environment
|
||||
Options:
|
||||
-h, --help display help for command
|
||||
```
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
fes info
|
||||
```
|
||||
|
||||
### fes webpack
|
||||
|
||||
查看项目使用的 webpack 配置。
|
||||
|
||||
```
|
||||
Usage: fes webpack [options]
|
||||
|
||||
@ -170,6 +189,7 @@ Options:
|
||||
```
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
fes webpack
|
||||
```
|
||||
```
|
||||
|
||||
@ -2,312 +2,152 @@
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 配置
|
||||
## 配置文件
|
||||
|
||||
以下配置项通过字母排序。
|
||||
Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。
|
||||
|
||||
## alias
|
||||
### 配置文件解析
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
Fes.js 会自动解析项目根目录下的 `.fes.js` 文件。
|
||||
|
||||
最基础的配置文件是这样的：
|
||||
|
||||
```js
|
||||
// .fes.js
|
||||
export default {};
|
||||
```
|
||||
|
||||
可以通过环境变量 `FES_ENV` 进行环境差异化配置，当我们运行 `FES_ENV=prod fes dev` 时，Fes.js 会找到 `.fes.js` 和 `.fes.prod.js`(可选) 的配置文件进行 `deepmerge`。
|
||||
|
||||
### 配置智能提示
|
||||
|
||||
可以通过 `defineBuildConfig` 工具函数获取类型提示：
|
||||
|
||||
```js
|
||||
import { defineBuildConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineBuildConfig({});
|
||||
```
|
||||
|
||||
## 共享配置
|
||||
|
||||
### alias
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置别名，对引用路径进行映射。
|
||||
|
||||
- 示例：
|
||||
- 示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
alias: {
|
||||
main: 'src/assets/styles/main'
|
||||
}
|
||||
}
|
||||
main: 'src/assets/styles/main',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
|
||||
|
||||
## analyze
|
||||
- 类型： `object`
|
||||
- 默认值：
|
||||
### autoprefixer
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值：
|
||||
|
||||
```js
|
||||
{
|
||||
analyzerMode: process.env.ANALYZE_MODE || 'server',
|
||||
analyzerPort: process.env.ANALYZE_PORT || 8888,
|
||||
openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
|
||||
// generate stats file while ANALYZE_DUMP exist
|
||||
generateStatsFile: !!process.env.ANALYZE_DUMP,
|
||||
statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
|
||||
logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
|
||||
defaultSizes: 'parsed' // stat // gzip
|
||||
flexbox: 'no-2009';
|
||||
}
|
||||
```
|
||||
- 详情：
|
||||
|
||||
构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
|
||||
|
||||
## autoprefixer
|
||||
- 类型： `object`
|
||||
- 默认值：
|
||||
```js
|
||||
{
|
||||
flexbox: 'no-2009'
|
||||
}
|
||||
```
|
||||
- 详情：
|
||||
- 详情：
|
||||
|
||||
[postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
|
||||
|
||||
### base
|
||||
|
||||
|
||||
## base
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
|
||||
|
||||
::: warning 2.1.x 已废弃
|
||||
2.1.x 版本请使用 router.base 代替
|
||||
:::
|
||||
|
||||
### define
|
||||
|
||||
|
||||
## chainWebpack
|
||||
|
||||
- 类型：`function`
|
||||
- 默认值：`null`
|
||||
- 详情：
|
||||
|
||||
通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
chainWebpack(memo, { env, webpack }) {
|
||||
// 删除 fes 内置插件
|
||||
memo.plugins.delete('copy');
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## cssLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
|
||||
|
||||
## copy
|
||||
|
||||
- 类型： `Array(string) || Array(object)`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
设置要复制到输出目录的文件、文件夹。
|
||||
|
||||
配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
|
||||
- 示例：
|
||||
```js
|
||||
export default {
|
||||
copy: {
|
||||
from: '/src/assets/images',
|
||||
to: 'assets/images'
|
||||
}
|
||||
}
|
||||
```
|
||||
上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
|
||||
|
||||
## define
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
用于提供给代码中可用的变量。
|
||||
- 示例：
|
||||
- 示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
define: {
|
||||
__DEV__: 'development'
|
||||
}
|
||||
}
|
||||
__DEV__: 'development',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。
|
||||
|
||||
## devServer
|
||||
### dynamicImport
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置开发服务器。支持以下子配置项：
|
||||
|
||||
- port，端口号，默认 `8000`
|
||||
- host，默认 `localhost`
|
||||
- https，是否启用 https server，同时也会开启 HTTP/2
|
||||
|
||||
启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
|
||||
|
||||
## devtool
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `cheap-module-source-map` in dev, `undefined` in build
|
||||
- 详情：
|
||||
|
||||
用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
|
||||
|
||||
## dynamicImport
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： false
|
||||
- 详情：
|
||||
- 类型： `boolean`
|
||||
- 默认值： false
|
||||
- 详情：
|
||||
|
||||
路由是否按需加载
|
||||
|
||||
### inlineLimit
|
||||
|
||||
## exportStatic
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置 `html` 的输出形式，默认只输出 `index.html`。
|
||||
|
||||
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
|
||||
|
||||
比如以下路由，
|
||||
```
|
||||
/
|
||||
/users
|
||||
/list
|
||||
```
|
||||
不开启 `exportStatic` 时，输出，
|
||||
```
|
||||
- index.html
|
||||
```
|
||||
设置 `exportStatic: {}` 后，输出，
|
||||
```
|
||||
- index.html
|
||||
- users.html
|
||||
- list.html
|
||||
```
|
||||
## externals
|
||||
|
||||
- 类型：`object`
|
||||
- 默认值：`{}`
|
||||
- 详情：
|
||||
|
||||
设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
externals: {
|
||||
vue: 'window.Vue',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## extraBabelPlugins
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 `babel` 插件。
|
||||
|
||||
- 示例：
|
||||
```js
|
||||
export default {
|
||||
extraBabelPlugins: [
|
||||
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## extraBabelPresets
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 `babel` 插件集。
|
||||
|
||||
|
||||
## extraPostCSSPlugins
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
|
||||
|
||||
## html
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
|
||||
|
||||
## inlineLimit
|
||||
|
||||
- 类型： `number`
|
||||
- 默认值： `8192`(8k)
|
||||
- 详情：
|
||||
- 类型： `number`
|
||||
- 默认值： `8192`(8k)
|
||||
- 详情：
|
||||
|
||||
配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。
|
||||
|
||||
## lessLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
### mock
|
||||
|
||||
设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
|
||||
|
||||
## mock
|
||||
|
||||
- 类型： `object || boolean`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
- 类型： `object || boolean`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置 mock 属性。
|
||||
|
||||
- 当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。
|
||||
- 当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。
|
||||
- 当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。
|
||||
- 当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。
|
||||
|
||||
- 示例：
|
||||
|
||||
- 示例：
|
||||
```js
|
||||
export default {
|
||||
mock: {
|
||||
prefix: '/api/auth'
|
||||
}
|
||||
}
|
||||
prefix: '/api/auth',
|
||||
},
|
||||
};
|
||||
```
|
||||
然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。
|
||||
|
||||
## mountElementId
|
||||
然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理，[mock.js 示例](../../guide/mock)。
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `app`
|
||||
- 详情：
|
||||
### mountElementId
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `app`
|
||||
- 详情：
|
||||
|
||||
指定渲染到的 HTML 元素 id。
|
||||
|
||||
## nodeModulesTransform
|
||||
### outputPath
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{ exclude: [] }`
|
||||
- 详情：
|
||||
|
||||
默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
|
||||
|
||||
## outputPath
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `dist`
|
||||
- 详情：
|
||||
- 类型： `string`
|
||||
- 默认值： `dist`
|
||||
- 详情：
|
||||
|
||||
指定输出路径。
|
||||
|
||||
@ -315,93 +155,90 @@ export default {
|
||||
不允许设定为 `src`、`public`、`pages` 等约定目录。
|
||||
:::
|
||||
|
||||
## plugins
|
||||
### plugins
|
||||
|
||||
- 类型： `Array(string)`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
- 类型： `Array(string)`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 `fes` 插件。
|
||||
数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。
|
||||
|
||||
- 示例：
|
||||
- 示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
plugins: [
|
||||
// npm 依赖
|
||||
'fes-plugin-hello',
|
||||
// 相对路径
|
||||
'./plugin',
|
||||
// 绝对路径
|
||||
`${__dirname}/plugin.js`,
|
||||
],
|
||||
plugins: [
|
||||
// npm 依赖
|
||||
'fes-plugin-hello',
|
||||
// 相对路径
|
||||
'./plugin',
|
||||
// 绝对路径
|
||||
`${__dirname}/plugin.js`,
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### proxy
|
||||
|
||||
## postcssLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
|
||||
|
||||
## proxy
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置代理能力。
|
||||
|
||||
- 示例：
|
||||
- 示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
proxy: {
|
||||
'/v2': {
|
||||
'target': 'https://api.douban.com/',
|
||||
'changeOrigin': true,
|
||||
}
|
||||
}
|
||||
}
|
||||
target: 'https://api.douban.com/',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。
|
||||
|
||||
## publicPath
|
||||
### publicPath
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `/`
|
||||
- 详情：
|
||||
- 类型： `string`
|
||||
- 默认值： `/`
|
||||
- 详情：
|
||||
|
||||
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
|
||||
静态资源 publicPath。当打包的时候在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
|
||||
|
||||
## router
|
||||
### router
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{ mode: 'hash' }`
|
||||
- 详情：
|
||||
- 类型： `object`
|
||||
- 默认值： `{ mode: 'hash', base: '/' }`
|
||||
- 详情：
|
||||
|
||||
配置路由，具体请查看指南中关于路由的介绍
|
||||
|
||||
## singular
|
||||
- 类型： `boolean`
|
||||
- 默认值： `false`
|
||||
- 详情：
|
||||
### singular
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `false`
|
||||
- 详情：
|
||||
|
||||
配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。
|
||||
|
||||
## targets
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
### targets
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
|
||||
|
||||
## terserOptions
|
||||
### terserOptions
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值：
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值：
|
||||
```js
|
||||
const defaultTerserOptions = {
|
||||
compress: {
|
||||
@ -433,24 +270,280 @@ const defaultTerserOptions = {
|
||||
// required features to drop conditional branches
|
||||
conditionals: true,
|
||||
dead_code: true,
|
||||
evaluate: true
|
||||
evaluate: true,
|
||||
},
|
||||
mangle: {
|
||||
safari10: true
|
||||
}
|
||||
}
|
||||
safari10: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
- 详情：
|
||||
|
||||
- 详情：
|
||||
|
||||
配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
|
||||
|
||||
## vueLoader
|
||||
- 类型： `object`
|
||||
- 默认值：`{}`
|
||||
- 详情：
|
||||
### title
|
||||
|
||||
- 类型： `string`
|
||||
- 详情：
|
||||
|
||||
html 页面标题
|
||||
|
||||
## webpack 专属配置
|
||||
|
||||
### analyze
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值：
|
||||
|
||||
```js
|
||||
{
|
||||
analyzerMode: process.env.ANALYZE_MODE || 'server',
|
||||
analyzerPort: process.env.ANALYZE_PORT || 8888,
|
||||
openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
|
||||
// generate stats file while ANALYZE_DUMP exist
|
||||
generateStatsFile: !!process.env.ANALYZE_DUMP,
|
||||
statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
|
||||
logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
|
||||
defaultSizes: 'parsed' // stat // gzip
|
||||
}
|
||||
```
|
||||
|
||||
- 详情：
|
||||
|
||||
构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
|
||||
|
||||
### chainWebpack
|
||||
|
||||
- 类型：`function`
|
||||
- 默认值：`null`
|
||||
- 详情：
|
||||
|
||||
通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
chainWebpack(memo, { env, webpack }) {
|
||||
// 删除 fes 内置插件
|
||||
memo.plugins.delete('copy');
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### cssLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
|
||||
|
||||
### copy
|
||||
|
||||
- 类型： `Array(string) || Array(object)`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
设置要复制到输出目录的文件、文件夹。
|
||||
|
||||
配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
|
||||
|
||||
- 示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
copy: {
|
||||
from: '/src/assets/images',
|
||||
to: 'assets/images',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
|
||||
|
||||
### devServer
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置开发服务器。支持以下子配置项：
|
||||
|
||||
- port，端口号，默认 `8000`
|
||||
- host，默认 `localhost`
|
||||
- https，是否启用 https server，同时也会开启 HTTP/2
|
||||
|
||||
启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
|
||||
|
||||
### devtool
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `cheap-module-source-map` in dev, `undefined` in build
|
||||
- 详情：
|
||||
|
||||
用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
|
||||
|
||||
### exportStatic
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
配置 `html` 的输出形式，默认只输出 `index.html`。
|
||||
|
||||
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
|
||||
|
||||
比如以下路由，
|
||||
|
||||
```
|
||||
/
|
||||
/users
|
||||
/list
|
||||
```
|
||||
|
||||
不开启 `exportStatic` 时，输出，
|
||||
|
||||
```
|
||||
- index.html
|
||||
```
|
||||
|
||||
设置 `exportStatic: {}` 后，输出，
|
||||
|
||||
```
|
||||
- index.html
|
||||
- users.html
|
||||
- list.html
|
||||
```
|
||||
|
||||
### externals
|
||||
|
||||
- 类型：`object`
|
||||
- 默认值：`{}`
|
||||
- 详情：
|
||||
|
||||
设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
externals: {
|
||||
vue: 'window.Vue',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### extraBabelPlugins
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 `babel` 插件。
|
||||
|
||||
- 示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
|
||||
};
|
||||
```
|
||||
|
||||
### extraBabelPresets
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 `babel` 插件集。
|
||||
|
||||
### extraPostCSSPlugins
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
|
||||
|
||||
### html
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
|
||||
|
||||
### lessLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
|
||||
|
||||
### nodeModulesTransform
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{ exclude: [] }`
|
||||
- 详情：
|
||||
|
||||
默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
|
||||
|
||||
### postcssLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{}`
|
||||
- 详情：
|
||||
|
||||
设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
|
||||
|
||||
### vueLoader
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值：`{}`
|
||||
- 详情：
|
||||
|
||||
配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)
|
||||
|
||||
## Vite 专属配置
|
||||
|
||||
### viteOption
|
||||
|
||||
- 类型： `object`
|
||||
- 详情：
|
||||
|
||||
Vite 的配置，详情请看 [Vite Config](https://cn.vitejs.dev/config/)
|
||||
|
||||
### viteVuePlugin
|
||||
|
||||
- 类型： `object`
|
||||
- 详情：
|
||||
|
||||
自定义 [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) 的配置。
|
||||
|
||||
### viteVueJsx
|
||||
|
||||
- 类型： `object`
|
||||
- 详情：
|
||||
|
||||
自定义 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 的配置。
|
||||
|
||||
### viteLegacy
|
||||
|
||||
- 类型： `object`
|
||||
- 详情：
|
||||
|
||||
自定义 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 的配置。
|
||||
|
||||
### viteHtml
|
||||
|
||||
- 类型： `object`
|
||||
- 详情：
|
||||
|
||||
自定义 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的配置。
|
||||
|
||||
## 更多配置项
|
||||
Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。
|
||||
|
||||
Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
| [@fesjs/plugin-enums](./plugins/enums.md) | 提供统一的枚举存取及丰富的函数来处理枚举 |
|
||||
| [@fesjs/plugin-icon](./plugins/icon.md) | svg 文件自动注册为组件 |
|
||||
| [@fesjs/plugin-jest](./plugins/jest.md) | 基于 `Jest`，提供单元测试、覆盖测试能力 |
|
||||
| [ @fesjs/plugin-layout](./plugins/layout.md) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-layout](./plugins/layout.md) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-locale](./plugins/locale.md) | 基于 `Vue I18n`，提供国际化能力 |
|
||||
| [@fesjs/plugin-model](./plugins/model.md) | 简易的数据管理方案 |
|
||||
| [@fesjs/plugin-request](./plugins/request.md) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
|
||||
@ -18,6 +18,7 @@
|
||||
| [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 |
|
||||
| [@fesjs/plugin-watermark](./plugins/watermark.md) | 水印 |
|
||||
| [@fesjs/plugin-swc](./plugins/swc.md) | swc |
|
||||
|
||||
## 架构
|
||||
|
||||
|
||||
@ -1,70 +1,76 @@
|
||||
# 插件介绍
|
||||
|
||||
## 开始
|
||||
|
||||
一个插件是一个 `npm` 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：
|
||||
|
||||
- 项目的 webpack 配置。
|
||||
- 修改项目的 babel 配置。
|
||||
- 添加新的 fes 命令 - 例如 `@fes/plugin-jest` 添加了 `fes test` 命令，允许开发者运行单元测试。
|
||||
- 集成 Vue 的插件。
|
||||
- 修改路由配置
|
||||
- 提供运行时 API
|
||||
- ...
|
||||
- 项目的 webpack 配置。
|
||||
- 修改项目的 babel 配置。
|
||||
- 添加新的 fes 命令 - 例如 `@fes/plugin-jest` 添加了 `fes test` 命令，允许开发者运行单元测试。
|
||||
- 集成 Vue 的插件。
|
||||
- 修改路由配置
|
||||
- 提供运行时 API
|
||||
- ...
|
||||
|
||||
插件的入口是一个函数，函数会以 API 对象作为第一个参数：
|
||||
|
||||
```js
|
||||
export default (api)=>{
|
||||
export default (api) => {
|
||||
api.describe({
|
||||
key: 'esbuild',
|
||||
config: {
|
||||
schema(joi) {
|
||||
return joi.object();
|
||||
},
|
||||
default: {}
|
||||
default: {},
|
||||
},
|
||||
enableBy: api.EnableBy.config,
|
||||
});
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。
|
||||
|
||||
`api.describe`用来描述插件：
|
||||
- **key**， 插件的 `key`，可以理解为插件的名称，在 `.fes.js` 中用 `key` 配置此插件。
|
||||
- **config**，插件的配置信息：
|
||||
- schema，定义配置的类型
|
||||
- default，默认配置
|
||||
- **enableBy**， 是否开启插件，可配置某些场景下禁用插件。
|
||||
|
||||
- **key**， 插件的 `key`，可以理解为插件的名称，在 `.fes.js` 中用 `key` 配置此插件。
|
||||
- **config**，插件的配置信息：
|
||||
- schema，定义配置的类型
|
||||
- default，默认配置
|
||||
- **enableBy**， 是否开启插件，可配置某些场景下禁用插件。
|
||||
|
||||
## 创建插件
|
||||
|
||||
##### 第一步：安装`create-fes-app`
|
||||
|
||||
```bash
|
||||
npm i -g @fesjs/create-fes-app
|
||||
```
|
||||
|
||||
|
||||
##### 第二步：创建插件项目
|
||||
|
||||
```bash
|
||||
create-fes-app pluginName
|
||||
```
|
||||
|
||||
在询问`Pick an template`时选择`Plugin`!
|
||||
|
||||
##### 第三步：进入插件目录 & 安装依赖
|
||||
|
||||
```bash
|
||||
cd pluginName & yarn
|
||||
cd pluginName & pnpm i
|
||||
```
|
||||
|
||||
##### 第四步：启动编译
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
##### 第五步：使用插件API完成你的插件！（可以参考其他插件理解api用法和场景）
|
||||
##### 第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景）
|
||||
|
||||
## 发布到 npm
|
||||
|
||||
以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被 Fes.js 自动注册为插件或插件集。
|
||||
|
||||
所以编写好的插件想发布到 npm 供其他人使用，包名必须是 `fes-preset-` 和 `fes-plugin-` 开头。
|
||||
以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被 Fes.js 自动注册为插件或插件集。
|
||||
|
||||
所以编写好的插件想发布到 npm 供其他人使用，包名必须是 `fes-preset-` 和 `fes-plugin-` 开头。
|
||||
|
||||
@ -5,96 +5,109 @@
|
||||
### api.paths
|
||||
|
||||
一些关键的路径：
|
||||
- cwd，执行命令的绝对路径
|
||||
- absNodeModulesPath，nodeModule的绝对路径
|
||||
- absOutputPath，输出 `build` 产物的绝对路径
|
||||
- absSrcPath，`src` 目录的绝对路径
|
||||
- absPagesPath，`pages`目录的绝对路径
|
||||
- absTmpPath，`.fes`临时文件目录的绝对路径
|
||||
|
||||
- cwd，执行命令的绝对路径
|
||||
- absNodeModulesPath，nodeModule 的绝对路径
|
||||
- absOutputPath，输出 `build` 产物的绝对路径
|
||||
- absSrcPath，`src` 目录的绝对路径
|
||||
- absPagesPath，`pages`目录的绝对路径
|
||||
- absTmpPath，`.fes`临时文件目录的绝对路径
|
||||
|
||||
### api.cwd
|
||||
|
||||
执行命令的绝对路径
|
||||
|
||||
### api.pkg
|
||||
|
||||
`package.json`的内容
|
||||
|
||||
### api.configInstance
|
||||
|
||||
`config`实例
|
||||
|
||||
### userConfig
|
||||
|
||||
用户配置
|
||||
|
||||
|
||||
### config
|
||||
|
||||
插件配置可被修改，此为最终的配置
|
||||
|
||||
### env
|
||||
|
||||
process.env
|
||||
|
||||
### args
|
||||
|
||||
环境变量
|
||||
|
||||
## 核心方法
|
||||
|
||||
### describe
|
||||
|
||||
注册阶段执行，用于描述插件或插件集的 id、key、配置信息、启用方式等。
|
||||
|
||||
用法：**describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)**
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.describe({
|
||||
api.describe({
|
||||
key: 'esbuild',
|
||||
config: {
|
||||
schema(joi) {
|
||||
return joi.object();
|
||||
},
|
||||
default: {}
|
||||
default: {},
|
||||
},
|
||||
enableBy: api.EnableBy.config,
|
||||
});
|
||||
```
|
||||
|
||||
注：
|
||||
|
||||
- `config.default` 为配置的默认值，用户没有配置时取这个
|
||||
- `config.schema` 用于声明配置的类型，基于 [joi](https://hapi.dev/module/joi)，如果你希望用户进行配置，这个是必须的，否则用户的配置无效
|
||||
- `config.onChange` 是 `dev` 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义
|
||||
- `enableBy` 为启用方式，默认是注册启用，可更改为 `api.EnableBy.config`，还可以用自定义函数的方式决定其启用时机（动态生效）
|
||||
|
||||
- `config.default` 为配置的默认值，用户没有配置时取这个
|
||||
- `config.schema` 用于声明配置的类型，基于 [joi](https://hapi.dev/module/joi)，如果你希望用户进行配置，这个是必须的，否则用户的配置无效
|
||||
- `config.onChange` 是 `dev` 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义
|
||||
- `enableBy` 为启用方式，默认是注册启用，可更改为 `api.EnableBy.config`，还可以用自定义函数的方式决定其启用时机（动态生效）
|
||||
|
||||
### register
|
||||
|
||||
为 api.applyPlugins 注册可供其使用的 hook。
|
||||
|
||||
用法：**register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })**
|
||||
|
||||
参数：
|
||||
- key：唯一id
|
||||
- fn：hook函数，当执行`api.applyPlugins`时，此函数被执行。
|
||||
- pluginId：插件id，如果配置了插件id，则只有此插件未被禁用时，才会执行。
|
||||
|
||||
- key：唯一 id
|
||||
- fn：hook 函数，当执行`api.applyPlugins`时，此函数被执行。
|
||||
- pluginId：插件 id，如果配置了插件 id，则只有此插件未被禁用时，才会执行。
|
||||
|
||||
```js
|
||||
// 可同步
|
||||
api.register({
|
||||
key: 'foo',
|
||||
fn() {
|
||||
return 'a';
|
||||
},
|
||||
key: 'foo',
|
||||
fn() {
|
||||
return 'a';
|
||||
},
|
||||
});
|
||||
|
||||
// 可异步
|
||||
api.register({
|
||||
key: 'foo',
|
||||
async fn() {
|
||||
await delay(100);
|
||||
return 'b';
|
||||
},
|
||||
key: 'foo',
|
||||
async fn() {
|
||||
await delay(100);
|
||||
return 'b';
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
注意：
|
||||
- fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步
|
||||
- fn 里的内容需结合 `api.appyPlugins` 的 `type` 参数来看,如果是 `api.ApplyPluginsType.add`，需有返回值，这些返回值最终会被合成一个数组。如果是 `api.ApplyPluginsType.modify`，需对第一个参数做修改，并返回它，它会作为下个hook的参数。 如果是 `api.ApplyPluginsType.event`，无需返回值
|
||||
- stage 和 before 都是用于调整执行顺序的，参考 tapable
|
||||
- stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行
|
||||
|
||||
- fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步
|
||||
- fn 里的内容需结合 `api.appyPlugins` 的 `type` 参数来看,如果是 `api.ApplyPluginsType.add`，需有返回值，这些返回值最终会被合成一个数组。如果是 `api.ApplyPluginsType.modify`，需对第一个参数做修改，并返回它，它会作为下个 hook 的参数。 如果是 `api.ApplyPluginsType.event`，无需返回值
|
||||
- stage 和 before 都是用于调整执行顺序的，参考 tapable
|
||||
- stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行
|
||||
|
||||
### applyPlugins
|
||||
|
||||
@ -103,28 +116,30 @@ api.register({
|
||||
用法：**applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })**
|
||||
|
||||
参数：
|
||||
- key：唯一id
|
||||
- type：hook的类型。
|
||||
- initialValue：初始值。
|
||||
- args：参数，hook函数执行时，args会作为参数传入。
|
||||
|
||||
- key：唯一 id
|
||||
- type：hook 的类型。
|
||||
- initialValue：初始值。
|
||||
- args：参数，hook 函数执行时，args 会作为参数传入。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
const foo = await api.applyPlugins({
|
||||
key: 'foo',
|
||||
type: api.ApplyPluginsType.add,
|
||||
initialValue: [],
|
||||
key: 'foo',
|
||||
type: api.ApplyPluginsType.add,
|
||||
initialValue: [],
|
||||
});
|
||||
console.log(foo); // ['a', 'b']
|
||||
```
|
||||
|
||||
#### api.ApplyPluginsType
|
||||
|
||||
编译时插件hook执行类型，enum 类型，包含三个属性：
|
||||
编译时插件 hook 执行类型，enum 类型，包含三个属性：
|
||||
|
||||
- compose，用于合并执行多个函数，函数可决定前序函数的执行时机
|
||||
- modify，用于修改值
|
||||
- event，用于执行事件，前面没有依赖关系
|
||||
- compose，用于合并执行多个函数，函数可决定前序函数的执行时机
|
||||
- modify，用于修改值
|
||||
- event，用于执行事件，前面没有依赖关系
|
||||
|
||||
### registerMethod
|
||||
|
||||
@ -133,30 +148,26 @@ console.log(foo); // ['a', 'b']
|
||||
用法：**registerMethod({ name: string, fn?: Function, exitsError?: boolean })**
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.registerMethod({
|
||||
api.registerMethod({
|
||||
name: 'writeTmpFile',
|
||||
fn({
|
||||
path,
|
||||
content
|
||||
}) {
|
||||
assert(
|
||||
api.stage >= api.ServiceStage.pluginReady,
|
||||
'api.writeTmpFile() should not execute in register stage.'
|
||||
);
|
||||
fn({ path, content }) {
|
||||
assert(api.stage >= api.ServiceStage.pluginReady, 'api.writeTmpFile() should not execute in register stage.');
|
||||
const absPath = join(api.paths.absTmpPath, path);
|
||||
api.utils.mkdirp.sync(dirname(absPath));
|
||||
if (!existsSync(absPath) || readFileSync(absPath, 'utf-8') !== content) {
|
||||
writeFileSync(absPath, content, 'utf-8');
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
然后在插件中可以使用：
|
||||
```js
|
||||
api.writeTmpFile()
|
||||
```
|
||||
|
||||
然后在插件中可以使用：
|
||||
|
||||
```js
|
||||
api.writeTmpFile();
|
||||
```
|
||||
|
||||
### registerCommand
|
||||
|
||||
@ -165,41 +176,50 @@ api.writeTmpFile()
|
||||
用法：**registerCommand({ command: string, description: string, fn: Function, options?: Object })**
|
||||
|
||||
参数：
|
||||
- command
|
||||
- description，描述文字，输入 `--help` 会打印
|
||||
- fn，命令执行的函数，参数有：
|
||||
- rawArgv，原始参数
|
||||
- args，参数
|
||||
- options，执行命令时附带的的参数配置
|
||||
- program，commander对象
|
||||
- options，参数配置，基于 [commander](https://github.com/tj/commander.js/) 。
|
||||
|
||||
- command
|
||||
- description，描述文字，输入 `--help` 会打印
|
||||
- fn，命令执行的函数，参数有：
|
||||
- rawArgv，原始参数
|
||||
- args，参数
|
||||
- options，执行命令时附带的的参数配置
|
||||
- program，commander 对象
|
||||
- options，参数配置，基于 [commander](https://github.com/tj/commander.js/) 。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.registerCommand({
|
||||
command: 'webpack',
|
||||
description: 'inspect webpack configurations',
|
||||
options: [{
|
||||
name: '--rule <ruleName>',
|
||||
description: 'inspect a specific module rule'
|
||||
}, {
|
||||
name: '--plugin <pluginName>',
|
||||
description: 'inspect a specific plugin'
|
||||
}, {
|
||||
name: '--rules',
|
||||
description: 'list all module rule names'
|
||||
}, {
|
||||
name: '--plugins',
|
||||
description: 'list all plugin names'
|
||||
}, {
|
||||
name: '--verbose',
|
||||
description: 'show full function definitions in output'
|
||||
}],
|
||||
async fn({ rawArgv, args, options, program}) {
|
||||
}
|
||||
})
|
||||
options: [
|
||||
{
|
||||
name: '--rule <ruleName>',
|
||||
description: 'inspect a specific module rule',
|
||||
},
|
||||
{
|
||||
name: '--plugin <pluginName>',
|
||||
description: 'inspect a specific plugin',
|
||||
},
|
||||
{
|
||||
name: '--rules',
|
||||
description: 'list all module rule names',
|
||||
},
|
||||
{
|
||||
name: '--plugins',
|
||||
description: 'list all plugin names',
|
||||
},
|
||||
{
|
||||
name: '--verbose',
|
||||
description: 'show full function definitions in output',
|
||||
},
|
||||
],
|
||||
async fn({ rawArgv, args, options, program }) {},
|
||||
});
|
||||
```
|
||||
|
||||
当项目引入此插件后，使用：
|
||||
|
||||
```bash
|
||||
fes webpack
|
||||
```
|
||||
@ -211,11 +231,9 @@ fes webpack
|
||||
用法：**registerPresets(presets: string[])**
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.registerPresets([
|
||||
{ id: 'preset_2', key: 'preset2', apply: () => () => {} },
|
||||
require.resolve('./preset_3'),
|
||||
]);
|
||||
api.registerPresets([{ id: 'preset_2', key: 'preset2', apply: () => () => {} }, require.resolve('./preset_3')]);
|
||||
```
|
||||
|
||||
### registerPlugins
|
||||
@ -225,21 +243,22 @@ api.registerPresets([
|
||||
用法：**registerPlugins(plugins: string[])**
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.registerPlugins([
|
||||
{ id: 'preset_2', key: 'preset2', apply: () => () => {} },
|
||||
require.resolve('./preset_3'),
|
||||
]);
|
||||
api.registerPlugins([{ id: 'preset_2', key: 'preset2', apply: () => () => {} }, require.resolve('./preset_3')]);
|
||||
```
|
||||
|
||||
### hasPlugins
|
||||
|
||||
判断是否有注册某个插件，插件的 id 规则：
|
||||
- id 默认为包名
|
||||
- 内置插件以 `@@` 为前缀，比如 `@@/registerMethod`
|
||||
|
||||
- id 默认为包名
|
||||
- 内置插件以 `@@` 为前缀，比如 `@@/registerMethod`
|
||||
|
||||
用法：**hasPlugins(pluginIds: string[])**
|
||||
|
||||
例如
|
||||
|
||||
```js
|
||||
// 判断是否有注册 @fesjs/plugin-locale
|
||||
api.hasPlugins(['@fesjs/plugin-locale']);
|
||||
@ -250,11 +269,13 @@ api.hasPlugins(['@fesjs/plugin-locale']);
|
||||
:::
|
||||
|
||||
### hasPresets
|
||||
|
||||
判断是否有注册某个插件集。
|
||||
|
||||
用法：**hasPresets(presetIds: string[])**
|
||||
|
||||
例如
|
||||
|
||||
```js
|
||||
// 判断是否有注册
|
||||
api.hasPlugins(['@fesjs/preset-xxx']);
|
||||
@ -265,11 +286,13 @@ api.hasPlugins(['@fesjs/preset-xxx']);
|
||||
:::
|
||||
|
||||
### skipPlugins
|
||||
|
||||
声明哪些插件需要被禁用，参数为插件 id 的数组。
|
||||
|
||||
用法：**hasPresets(presetIds: string[])**
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
// 禁用 plugin-model 插件
|
||||
api.skipPlugins(['@fesjs/plugin-model']);
|
||||
@ -279,91 +302,106 @@ api.skipPlugins(['@fesjs/plugin-model']);
|
||||
|
||||
通过 api.registerMethod() 扩展的方法。
|
||||
|
||||
|
||||
|
||||
### addPluginExports
|
||||
|
||||
把插件需要导出的运行时 API 写入`@fesjs/fes`。
|
||||
|
||||
```js
|
||||
api.addPluginExports(() => [
|
||||
{
|
||||
specifiers: ['access', 'useAccess'],
|
||||
source: absoluteFilePath
|
||||
}
|
||||
source: absoluteFilePath,
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
这样用户使用时：
|
||||
|
||||
```js
|
||||
import { access, useAccess } from '@fesjs/fes';
|
||||
```
|
||||
|
||||
### addCoreExports
|
||||
|
||||
提供给其他插件运行时需要的 API。
|
||||
|
||||
```js
|
||||
api.addCoreExports(() => [
|
||||
{
|
||||
specifiers: ['getRoutes'],
|
||||
source: absCoreFilePath
|
||||
}
|
||||
source: absCoreFilePath,
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
使用：
|
||||
|
||||
```js
|
||||
import { getHistory, destroyRouter } from '@@/core/coreExports';
|
||||
```
|
||||
|
||||
### addRuntimePlugin
|
||||
|
||||
添加运行时插件，返回值格式为表示文件路径的字符串。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addRuntimePlugin(() => join(__dirname, './runtime'));
|
||||
```
|
||||
|
||||
### addRuntimePluginKey
|
||||
|
||||
添加插件提供的运行时配置的 key，返回值格式为字符串。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addRuntimePluginKey(() => 'some');
|
||||
```
|
||||
|
||||
则用户可以：
|
||||
|
||||
```js
|
||||
// app.js
|
||||
const some = function(){
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const some = function () {
|
||||
return {};
|
||||
};
|
||||
```
|
||||
|
||||
### addEntryImportsAhead
|
||||
|
||||
在入口文件现有 import 的前面添加 import。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addEntryImportsAhead(() => [{ source: 'anypackage' }]);
|
||||
```
|
||||
|
||||
### addEntryImports
|
||||
|
||||
在入口文件现有 import 的后面添加 import。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addEntryImport(() => {
|
||||
return [
|
||||
{
|
||||
source: '/modulePath/xxx.js',
|
||||
specifier: 'moduleName',
|
||||
}
|
||||
]
|
||||
return [
|
||||
{
|
||||
source: '/modulePath/xxx.js',
|
||||
specifier: 'moduleName',
|
||||
},
|
||||
];
|
||||
});
|
||||
```
|
||||
|
||||
### addEntryCodeAhead
|
||||
|
||||
在入口文件最前面（import 之后）添加代码。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addEntryCodeAhead(
|
||||
() => `${globalCSSFile
|
||||
@ -371,68 +409,75 @@ api.addEntryCodeAhead(
|
||||
.join('')}`
|
||||
|
||||
```
|
||||
|
||||
|
||||
### addEntryCode
|
||||
|
||||
在入口文件最后添加代码。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addEntryCode(() => {
|
||||
return `console.log('works!')`
|
||||
})
|
||||
return `console.log('works!')`;
|
||||
});
|
||||
```
|
||||
|
||||
### addHTMLHeadScripts
|
||||
|
||||
在 HTML 头部添加脚本。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addHTMLHeadScripts(() => {
|
||||
return [
|
||||
{
|
||||
content: '',
|
||||
src: '',
|
||||
// ...attrs
|
||||
},
|
||||
];
|
||||
return [
|
||||
{
|
||||
content: '',
|
||||
src: '',
|
||||
// ...attrs
|
||||
},
|
||||
];
|
||||
});
|
||||
```
|
||||
|
||||
### addBeforeMiddlewares
|
||||
|
||||
添加在 `webpack compiler` 中间件之前的中间件，返回值格式为 `express` 中间件。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addBeforeMiddlewares(() => {
|
||||
return (req, res, next) => {
|
||||
if (false) {
|
||||
res.end('end');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
return (req, res, next) => {
|
||||
if (false) {
|
||||
res.end('end');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
### addMiddlewares
|
||||
|
||||
添加在 `webpack compiler` 中间件之后的中间件，返回值格式为 `express` 中间件。
|
||||
|
||||
|
||||
|
||||
### addTmpGenerateWatcherPaths
|
||||
|
||||
添加重新生成临时文件的监听路径。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.addTmpGenerateWatcherPaths(() => [
|
||||
'./app.js',
|
||||
]);
|
||||
api.addTmpGenerateWatcherPaths(() => ['./app.js']);
|
||||
```
|
||||
|
||||
### chainWebpack
|
||||
|
||||
通过 [webpack-chain] 的方式修改 webpack 配置。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.chainWebpack((memo) => {
|
||||
memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.esm-bundler.js');
|
||||
@ -440,42 +485,48 @@ api.chainWebpack((memo) => {
|
||||
```
|
||||
|
||||
### copyTmpFiles
|
||||
|
||||
批量写临时文件。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.copyTmpFiles({
|
||||
api.copyTmpFiles({
|
||||
namespace,
|
||||
path: join(__dirname, 'runtime'),
|
||||
ignore: ['.tpl']
|
||||
ignore: ['.tpl'],
|
||||
});
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
- namespace：复制到临时文件夹下的目标目录
|
||||
- path：需要复制的文件目录
|
||||
- ignore：需要排除的文件
|
||||
- namespace：复制到临时文件夹下的目标目录
|
||||
- path：需要复制的文件目录
|
||||
- ignore：需要排除的文件
|
||||
|
||||
::: tip
|
||||
不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件
|
||||
临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 `webpack` 的重新编译
|
||||
:::
|
||||
|
||||
|
||||
### getPort
|
||||
|
||||
获取端口号，dev 时有效。
|
||||
|
||||
### getHostname
|
||||
|
||||
获取 hostname，dev 时有效。
|
||||
|
||||
### getServer
|
||||
|
||||
获取 devServer，dev 时有效。
|
||||
|
||||
### getRoutes
|
||||
|
||||
获取 `api.modifyRoutes` 修改过后的路由信息。
|
||||
|
||||
### getRoutesJSON
|
||||
|
||||
获取格式化后的路由信息
|
||||
|
||||
### modifyRoutes
|
||||
@ -483,35 +534,34 @@ api.chainWebpack((memo) => {
|
||||
修改路由。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
// 把BaseLayout插入到路由配置中，作为根路由
|
||||
api.modifyRoutes(routes => [
|
||||
api.modifyRoutes((routes) => [
|
||||
{
|
||||
path: '/',
|
||||
component: winPath(
|
||||
join(api.paths.absTmpPath || '', absFilePath)
|
||||
),
|
||||
children: routes
|
||||
}
|
||||
component: winPath(join(api.paths.absTmpPath || '', absFilePath)),
|
||||
children: routes,
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
### modifyBundleConfigOpts
|
||||
|
||||
修改获取 bundleConfig 的函数参数。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.modifyBundleConfigOpts(memo => {
|
||||
api.modifyBundleConfigOpts((memo) => {
|
||||
memo.miniCSSExtractPluginPath = require.resolve('mini-css-extract-plugin');
|
||||
memo.miniCSSExtractPluginLoaderPath = require.resolve(
|
||||
'mini-css-extract-plugin/dist/loader',
|
||||
);
|
||||
memo.miniCSSExtractPluginLoaderPath = require.resolve('mini-css-extract-plugin/dist/loader');
|
||||
return memo;
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### modifyBundleConfig
|
||||
|
||||
修改 bundle 配置。
|
||||
|
||||
```js
|
||||
@ -522,9 +572,11 @@ api.modifyBundleConfig((bundleConfig) => {
|
||||
```
|
||||
|
||||
### modifyBabelOpts
|
||||
|
||||
修改 babel 配置项。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.modifyBabelOpts((babelOpts) => {
|
||||
if (api.config.babelPluginImport) {
|
||||
@ -534,101 +586,108 @@ api.modifyBabelOpts((babelOpts) => {
|
||||
}
|
||||
return babelOpts;
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
### modifyBabelPresetOpts
|
||||
|
||||
修改 babel 插件的配置。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.modifyBabelPresetOpts(opts => {
|
||||
api.modifyBabelPresetOpts((opts) => {
|
||||
return {
|
||||
...opts,
|
||||
import: (opts.import || []).concat([
|
||||
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
|
||||
]),
|
||||
...opts,
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
### modifyPaths
|
||||
|
||||
修改 paths 对象。
|
||||
|
||||
|
||||
### modifyDefaultConfig
|
||||
|
||||
修改默认配置。
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.modifyDefaultConfig((memo) => {
|
||||
return {
|
||||
...memo,
|
||||
...defaultOptions,
|
||||
};
|
||||
return {
|
||||
...memo,
|
||||
...defaultOptions,
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
### modifyConfig
|
||||
|
||||
修改最终配置。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.modifyConfig((memo) => {
|
||||
return {
|
||||
...memo,
|
||||
...defaultOptions,
|
||||
};
|
||||
return {
|
||||
...memo,
|
||||
...defaultOptions,
|
||||
};
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### modifyPublicPathStr
|
||||
|
||||
修改 publicPath 字符串。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.modifyPublicPathStr(() => {
|
||||
return api.config.publicPath || '/';
|
||||
return api.config.publicPath || '/';
|
||||
});
|
||||
```
|
||||
|
||||
### onPluginReady
|
||||
|
||||
在插件初始化完成触发。在 onStart 之前，此时还没有 config 和 paths，他们尚未解析好。
|
||||
|
||||
### onStart
|
||||
|
||||
在命令注册函数执行前触发。可以使用 config 和 paths。
|
||||
|
||||
### onExit
|
||||
|
||||
dev 退出时触发。
|
||||
|
||||
### onGenerateFiles
|
||||
|
||||
生成临时文件，触发时机在 webpack 编译之前。
|
||||
|
||||
### restartServer
|
||||
|
||||
重启 devServer，dev 时有效。
|
||||
|
||||
### writeTmpFile
|
||||
|
||||
写临时文件。
|
||||
|
||||
例如：
|
||||
|
||||
```js
|
||||
api.writeTmpFile({
|
||||
path: absoluteFilePath,
|
||||
content: Mustache.render(
|
||||
readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),
|
||||
{
|
||||
REPLACE_ROLES: JSON.stringify(roles)
|
||||
}
|
||||
)
|
||||
content: Mustache.render(readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'), {
|
||||
REPLACE_ROLES: JSON.stringify(roles),
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
参数：
|
||||
|
||||
- path：相对于临时文件夹的路径
|
||||
- content：文件内容
|
||||
- path：相对于临时文件夹的路径
|
||||
- content：文件内容
|
||||
|
||||
::: tip
|
||||
不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件
|
||||
临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译
|
||||
:::
|
||||
|
||||
|
||||
@ -1,114 +1,126 @@
|
||||
# @fesjs/plugin-access
|
||||
|
||||
## 介绍
|
||||
|
||||
对于前端应用来说，权限就是页面、页面元素是否可见。
|
||||
|
||||
### 资源
|
||||
|
||||
Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
|
||||
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
|
||||
|
||||
- 页面元素的资源 ID 没有默认值，需要自定义。
|
||||
|
||||
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
|
||||
- 页面元素的资源 ID 没有默认值，需要自定义。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<access :id="accessId"> accessOnepicess1 <input /> </access>
|
||||
<div v-access="accessId"> accessOnepicess2 </div>
|
||||
<access :id="accessId"> accessOnepicess1 </access>
|
||||
<div v-access="accessId">accessOnepicess2</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
return {
|
||||
accessId: 'accessOnepicess'
|
||||
}
|
||||
}
|
||||
}
|
||||
accessId: 'accessOnepicess',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### 匹配规则
|
||||
|
||||
#### 全等匹配
|
||||
资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源ID。如果我们设置：
|
||||
|
||||
资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源 ID。如果我们设置：
|
||||
|
||||
```js
|
||||
access.setAccess(['/a'])
|
||||
access.setAccess(['/a']);
|
||||
```
|
||||
|
||||
由于权限列表中包含`/a`，则表示拥有此页面权限。
|
||||
|
||||
#### 模糊匹配
|
||||
|
||||
页面`@id.vue`会映射为动态路由`/:id`，想匹配此页面有两种办法：
|
||||
- **access.setAccess(['/:id'])**
|
||||
- **access.setAccess(['/*'])**
|
||||
|
||||
- **access.setAccess(['/:id'])**
|
||||
- **access.setAccess(['/*'])**
|
||||
|
||||
第二种是模糊匹配，`*`表示任意路径。比如角色`admin`需要全部权限，则可以：
|
||||
|
||||
```js
|
||||
export default {
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
admin: ['*'],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### 角色
|
||||
通常我们会用角色来控制权限，相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
|
||||
|
||||
通常我们会用角色来控制权限，相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
|
||||
|
||||
当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。
|
||||
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-access": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-access": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 编译时配置
|
||||
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["/", "/onepiece", '/store']
|
||||
}
|
||||
}
|
||||
}
|
||||
admin: ['/', '/onepiece', '/store'],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### roles
|
||||
- **类型**：对象
|
||||
|
||||
- **默认值**：`{}`
|
||||
|
||||
- **详情**：
|
||||
|
||||
角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
|
||||
- **类型**：对象
|
||||
- **默认值**：`{}`
|
||||
|
||||
- **详情**：
|
||||
|
||||
角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
|
||||
|
||||
## 运行时配置
|
||||
|
||||
在 `app.js` 中配置
|
||||
|
||||
### unAccessHandler
|
||||
- **类型**：`Function`
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
- **类型**：`Function`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
|
||||
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
unAccessHandler({ to, next }) {
|
||||
@ -121,26 +133,27 @@ export const access = {
|
||||
accessApi.setAccess(accesssIds.concat(['/403']));
|
||||
}
|
||||
next('/403');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### noFoundHandler
|
||||
- **类型**：`Function`
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
- **类型**：`Function`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
|
||||
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
noFoundHandler({ next }) {
|
||||
@ -149,69 +162,90 @@ export const access = {
|
||||
accessApi.setAccess(accesssIds.concat(['/404']));
|
||||
}
|
||||
next('/404');
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### ignoreAccess
|
||||
|
||||
- **类型**：`Array<string>`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
配置需要忽略权限校验的页面。
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
ignoreAccess: ['/login'],
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### access
|
||||
|
||||
插件 API 通过 `@fesjs/fes` 导出：
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes'
|
||||
import { access } from '@fesjs/fes';
|
||||
```
|
||||
|
||||
#### access.hasAccess
|
||||
- **类型**：( accessId: string | number ) => Promise\<boolean\>
|
||||
|
||||
- **详情**: 判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源Id
|
||||
- **返回值**：是否有权限
|
||||
|
||||
- **类型**：( accessId: string | number ) => Promise\<boolean\>
|
||||
- **详情**: 判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源 Id
|
||||
- **返回值**：是否有权限
|
||||
|
||||
#### access.isDataReady
|
||||
- **类型**：() => boolean
|
||||
|
||||
- **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
|
||||
- **参数**：null
|
||||
- **返回值**：Boolean
|
||||
|
||||
- **类型**：() => boolean
|
||||
- **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
|
||||
- **参数**：null
|
||||
- **返回值**：Boolean
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
console.log(access.isDataReady())
|
||||
console.log(access.isDataReady());
|
||||
```
|
||||
|
||||
#### access.setRole
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- roleId，角色Id，有两种类型：
|
||||
- String，对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- roleId，角色 Id，有两种类型：
|
||||
- String，对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
access.setRole('admin')
|
||||
access.setRole('admin');
|
||||
```
|
||||
|
||||
#### access.setAccess
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- accessIds，资源Id数组，有两种类型：
|
||||
- Array，数组项对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应该是`Array<accessId>`。
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- accessIds，资源 Id 数组，有两种类型：
|
||||
- Array，数组项对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应该是`Array<accessId>`。
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
access.setAccess(['/a', '/b', '/c'])
|
||||
access.setAccess(['/a', '/b', '/c']);
|
||||
```
|
||||
|
||||
#### access.getAccess
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：返回当前可见的资源列表。
|
||||
- **参数**：null
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**：返回当前可见的资源列表。
|
||||
- **参数**：null
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
@ -219,13 +253,13 @@ access.getAccess();
|
||||
```
|
||||
|
||||
### useAccess
|
||||
- **类型**：[composition]((https://v3.cn.vuejs.org/guide/composition-api-introduction.html)) 函数
|
||||
|
||||
- **详情**：判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源Id
|
||||
- **返回值**：`ref`
|
||||
|
||||
|
||||
- **类型**：[composition](<(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)>) 函数
|
||||
- **详情**：判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源 Id
|
||||
- **返回值**：`ref`
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-if="accessOnepicess">accessOnepicess</div>
|
||||
@ -233,45 +267,50 @@ access.getAccess();
|
||||
<script>
|
||||
import { useAccess } from '@fesjs/fes';
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
const accessOnepicess = useAccess('/onepiece1');
|
||||
return {
|
||||
accessOnepicess
|
||||
}
|
||||
}
|
||||
}
|
||||
accessOnepicess,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### v-access
|
||||
在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示DOM，当没有权限时隐藏此DOM。
|
||||
|
||||
在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示 DOM，当没有权限时隐藏此 DOM。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-access="accessId"> accessOnepicess </div>
|
||||
<div v-access="accessId">accessOnepicess</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
return {
|
||||
accessId: 'accessOnepicess'
|
||||
}
|
||||
}
|
||||
}
|
||||
accessId: 'accessOnepicess',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 组件 Access
|
||||
|
||||
组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<access :id="accessId"> accessOnepicess </access>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
return {
|
||||
accessId: 'accessOnepicess'
|
||||
}
|
||||
}
|
||||
}
|
||||
accessId: 'accessOnepicess',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
@ -1,119 +1,120 @@
|
||||
# @fesjs/plugin-monaco-editor
|
||||
|
||||
|
||||
## 介绍
|
||||
我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
|
||||
|
||||
我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是 一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 编译时配置
|
||||
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json']
|
||||
}
|
||||
}
|
||||
languages: ['javascript', 'typescript', 'html', 'json'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
|
||||
|
||||
|
||||
### filename
|
||||
- **类型**：自定义worker脚本名称
|
||||
|
||||
- **默认值**：`'[name].worker.js'`
|
||||
|
||||
- **类型**：自定义 worker 脚本名称
|
||||
- **默认值**：`'[name].worker.js'`
|
||||
|
||||
### publicPath
|
||||
- **类型**：自定义worker脚本的路径
|
||||
|
||||
- **默认值**：`''`
|
||||
|
||||
- **类型**：自定义 worker 脚本的路径
|
||||
- **默认值**：`''`
|
||||
|
||||
### languages
|
||||
- **类型**：需要支持的语言类型
|
||||
|
||||
- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
|
||||
|
||||
- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
|
||||
- **类型**：需要支持的语言类型
|
||||
- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
|
||||
|
||||
- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
|
||||
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript']
|
||||
}
|
||||
}
|
||||
languages: ['javascript', 'typescript'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### monaco
|
||||
编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
|
||||
|
||||
编辑器的全局对象，提供扩展语言，自定义主题等等 API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
|
||||
|
||||
```js
|
||||
import { monaco } from '@fesjs/fes';
|
||||
|
||||
monaco.editor.defineTheme('myCoolTheme', {
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
rules: [
|
||||
{ token: 'custom-info', foreground: '808080' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||
{ token: 'custom-date', foreground: '008800' },
|
||||
]
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
rules: [
|
||||
{ token: 'custom-info', foreground: '808080' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||
{ token: 'custom-date', foreground: '008800' },
|
||||
],
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### 组件 MonacoEditor
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MonacoEditor
|
||||
v-model="json"
|
||||
language="json"
|
||||
height="400px"
|
||||
check>
|
||||
</MonacoEditor>
|
||||
<MonacoEditor v-model="json" language="json" height="400px" check> </MonacoEditor>
|
||||
</template>
|
||||
<script>
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
MonacoEditor,
|
||||
},
|
||||
setup(){
|
||||
setup() {
|
||||
const json = ref('');
|
||||
return {
|
||||
json
|
||||
json,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
#### props
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | ------------- | ------------- | ------------- |
|
||||
| theme | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
|
||||
| language | 编辑器的语言 | string | - |
|
||||
| height | 编辑器的高度 | string | `100%` |
|
||||
| width | 编辑器的宽度 | string | `100%` |
|
||||
| modelValue(v-model) | 编辑器的代码 | string | - |
|
||||
| readOnly | 是否只读 | boolean | `false` |
|
||||
| options | 编辑器的配置对象 | object | `{}` |
|
||||
| check | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | ----------------------------------------------------------------------- | ------- | -------------- |
|
||||
| theme | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
|
||||
| language | 编辑器的语言 | string | - |
|
||||
| height | 编辑器的高度 | string | `100%` |
|
||||
| width | 编辑器的宽度 | string | `100%` |
|
||||
| modelValue(v-model) | 编辑器的代码 | string | - |
|
||||
| readOnly | 是否只读 | boolean | `false` |
|
||||
| options | 编辑器的配置对象 | object | `{}` |
|
||||
| check | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
|
||||
|
||||
#### events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------ | ------------------ | --------------------------------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
# @fesjs/plugin-enums
|
||||
|
||||
## 介绍
|
||||
日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。
|
||||
|
||||
日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。
|
||||
|
||||
该插件提供统一的枚举存取及丰富的函数来处理枚举。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-enums": "^2.0.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-enums": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -17,18 +22,25 @@
|
||||
## 配置
|
||||
|
||||
### 静态配置
|
||||
|
||||
在 `.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
// 配置格式：[[key, value], ...]
|
||||
export default {
|
||||
enums: {
|
||||
status: [['0', '无效的'], ['1', '有效的']]
|
||||
}
|
||||
}
|
||||
status: [
|
||||
['0', '无效的'],
|
||||
['1', '有效的'],
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 动态配置
|
||||
|
||||
在业务代码中
|
||||
|
||||
```js
|
||||
import { enums } from '@fesjs/fes';
|
||||
// 动态添加
|
||||
@ -37,26 +49,24 @@ enums.get('status', '1') // 有效的
|
||||
```
|
||||
|
||||
## 场景使用
|
||||
- 动态添加的枚举项支持数组和对象
|
||||
|
||||
- 枚举项为对象时，可以指定keyName和valueName属性名
|
||||
- 动态添加的枚举项支持数组和对象
|
||||
|
||||
- 导出枚举值，可指定取值的路径
|
||||
- 枚举项为对象时，可以指定 keyName 和 valueName 属性名
|
||||
|
||||
- 导出枚举值，可指定取值的路径
|
||||
|
||||
- 导出枚举可扩展属性
|
||||
|
||||
- 导出枚举可扩展属性
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<!-- 遍历枚举status -->
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">
|
||||
{{item.value}}：{{item.key}}
|
||||
</div>
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">{{ item.value }}：{{ item.key }}</div>
|
||||
<!-- 遍历枚举扩展后的roles -->
|
||||
<div v-for="item in roles" :key="item.key">
|
||||
{{item.name}}：{{item.disabled}}
|
||||
</div>
|
||||
<div v-for="item in roles" :key="item.key">{{ item.name }}：{{ item.disabled }}</div>
|
||||
<!-- 获取枚举roles为2的英文名 -->
|
||||
<div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
|
||||
<div>{{ enumsGet('roles', '2', { dir: 'eName' }) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -65,64 +75,70 @@ import { enums } from '@fesjs/fes';
|
||||
export default {
|
||||
setup() {
|
||||
// 动态添加枚举，枚举项是对象，并指定key的属性名为id
|
||||
enums.push('roles', [
|
||||
{
|
||||
id: '1',
|
||||
cName: '系统管理员',
|
||||
eName: 'System',
|
||||
perm: ['1', '2', '3']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
cName: '业务管理员',
|
||||
eName: 'Business',
|
||||
perm: ['1', '2']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
cName: '普通用户',
|
||||
eName: 'User',
|
||||
perm: ['1']
|
||||
}
|
||||
], { keyName: 'id' });
|
||||
enums.push(
|
||||
'roles',
|
||||
[
|
||||
{
|
||||
id: '1',
|
||||
cName: '系统管理员',
|
||||
eName: 'System',
|
||||
perm: ['1', '2', '3'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
cName: '业务管理员',
|
||||
eName: 'Business',
|
||||
perm: ['1', '2'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
cName: '普通用户',
|
||||
eName: 'User',
|
||||
perm: ['1'],
|
||||
},
|
||||
],
|
||||
{ keyName: 'id' },
|
||||
);
|
||||
// 导出定制格式的roles，扩展枚举项新的属性name、disabled
|
||||
const roles = enums.get('roles', {
|
||||
extend: [
|
||||
{
|
||||
key: 'name',
|
||||
dir: 'cName' // 指定取值路径，取属性cName的值
|
||||
dir: 'cName', // 指定取值路径，取属性cName的值
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
// 传入函数，获取结果值
|
||||
transfer: item => item.value.perm.some(i => i >= 2)
|
||||
}
|
||||
]
|
||||
transfer: (item) => item.value.perm.some((i) => i >= 2),
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log(roles);
|
||||
// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
|
||||
return {
|
||||
enumsGet: enums.get,
|
||||
roles
|
||||
roles,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### get
|
||||
* `get(name: string)` 获取指定名字的枚举
|
||||
|
||||
* `get(name: string, key: string)` 获取指定名字及键枚举默认值
|
||||
- `get(name: string)` 获取指定名字的枚举
|
||||
|
||||
* `get(name: string, opt: {extend: Array<Object>})` 获取指定名字的自定义格式枚举，[查看extend配置](#extend配置)
|
||||
- `get(name: string, key: string)` 获取指定名字及键枚举默认值
|
||||
|
||||
* `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir规则](#dir规则)的值
|
||||
- `get(name: string, opt: {extend: Array<Object>})` 获取指定名字的自定义格式枚举，[查看 extend 配置](#extend配置)
|
||||
|
||||
- `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir 规则](#dir规则)的值
|
||||
|
||||
```js
|
||||
get('status')
|
||||
get('status', '1')
|
||||
get('status');
|
||||
get('status', '1');
|
||||
get('status', {
|
||||
extend: [
|
||||
{
|
||||
@ -131,51 +147,60 @@ get('status', {
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
transfer: item => item === '0'
|
||||
}
|
||||
]
|
||||
})
|
||||
get('status', '1', {dir: 'value'})
|
||||
transfer: (item) => item === '0',
|
||||
},
|
||||
],
|
||||
});
|
||||
get('status', '1', { dir: 'value' });
|
||||
```
|
||||
|
||||
### push
|
||||
|
||||
动态添加枚举，重复添加会覆盖
|
||||
* `push(name: string, _enum: Array<Array>)`
|
||||
* `push(name: string, _enum: Array<Object>, opt?: Object)`
|
||||
* opt.keyName 指定key的取值属性，默认是key
|
||||
* opt.valueName 指定value的取值属性
|
||||
|
||||
枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value
|
||||
- `push(name: string, _enum: Array<Array>)`
|
||||
- `push(name: string, _enum: Array<Object>, opt?: Object)`
|
||||
- opt.keyName 指定 key 的取值属性，默认是 key
|
||||
- opt.valueName 指定 value 的取值属性
|
||||
|
||||
枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，`如果valueName未设置则value就是枚举项`
|
||||
枚举项为数组，枚举项的[0]解析为 key，枚举项的[1]解析为 value
|
||||
|
||||
枚举项为对象时，根据 opt 配置 keyName、valueName 取枚举项属性值分别作为 key 和 value，`如果valueName未设置则value就是枚举项`
|
||||
|
||||
### remove
|
||||
* remove(name: string)
|
||||
|
||||
- remove(name: string)
|
||||
|
||||
移除指定的枚举
|
||||
|
||||
### concat
|
||||
|
||||
基于现有的枚举，连接上新的枚举后返回新的枚举
|
||||
* `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
* opt.keyName 指定key的取值属性，默认是key
|
||||
* opt.valueName 指定value的取值属性
|
||||
* opt.before 是否添加在现有的之前，默认是false
|
||||
* opt.extend：返回的枚举[extend配置](#extend配置)
|
||||
|
||||
- `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
- opt.keyName 指定 key 的取值属性，默认是 key
|
||||
- opt.valueName 指定 value 的取值属性
|
||||
- opt.before 是否添加在现有的之前，默认是 false
|
||||
- opt.extend：返回的枚举[extend 配置](#extend配置)
|
||||
|
||||
### convert
|
||||
将传入的枚举格式转换为{key, value}的形式
|
||||
* `convert(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
* opt.keyName 指定key的取值属性，默认是key
|
||||
* opt.valueName 指定value的取值属性
|
||||
|
||||
### extend配置
|
||||
将传入的枚举格式转换为{key, value}的形式
|
||||
|
||||
- `convert(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
- opt.keyName 指定 key 的取值属性，默认是 key
|
||||
- opt.valueName 指定 value 的取值属性
|
||||
|
||||
### extend 配置
|
||||
|
||||
扩展枚举项属性的配置
|
||||
* `extend: Array<Object>`
|
||||
* `key` 指定扩展的属性名
|
||||
* `dir` 指定该属性的取值路径
|
||||
* `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值
|
||||
::: tip
|
||||
同时设置[dir](#dir规则)和transfer，transfer优先
|
||||
:::
|
||||
|
||||
- `extend: Array<Object>`
|
||||
_ `key` 指定扩展的属性名
|
||||
_ `dir` 指定该属性的取值路径 \* `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值
|
||||
::: tip
|
||||
同时设置[dir](#dir规则)和 transfer，transfer 优先
|
||||
:::
|
||||
|
||||
```js
|
||||
get('status', {
|
||||
@ -186,18 +211,19 @@ get('status', {
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
transfer: item => item.key === '0'
|
||||
}
|
||||
]
|
||||
})
|
||||
transfer: (item) => item.key === '0',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### dir 规则
|
||||
|
||||
### dir规则
|
||||
dir是指定枚举项value的取值方式，规则如下：
|
||||
* 对象属性 `A`、`A.B`
|
||||
* 数组 `[0]`、`[0][1]`
|
||||
* 混合 `A[0]`、`[0].A`、`A[0].B`
|
||||
dir 是指定枚举项 value 的取值方式，规则如下：
|
||||
|
||||
- 对象属性 `A`、`A.B`
|
||||
- 数组 `[0]`、`[0][1]`
|
||||
- 混合 `A[0]`、`[0].A`、`A[0].B`
|
||||
|
||||
```js
|
||||
// 假如枚举项value的结构如下
|
||||
@ -221,6 +247,7 @@ dir value
|
||||
'role[0]' => {id: 1, name: '管理员'}
|
||||
'role[1].id' => 2
|
||||
```
|
||||
|
||||
::: tip
|
||||
枚举项value如果是基本类型，则规则不生效，value就是当前值
|
||||
:::
|
||||
枚举项 value 如果是基本类型，则规则不生效，value 就是当前值
|
||||
:::
|
||||
|
||||
@ -3,15 +3,17 @@
|
||||
## 介绍
|
||||
|
||||
提供以 `component` 的方式，直接使用 svg icon 的能力。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-icon": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-icon": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -25,8 +27,8 @@
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| :-----| :---- | :---- |
|
||||
| type | svg 文件名 | `string` |
|
||||
| spin | 是否无限旋转 | `boolean` |
|
||||
| rotate | 旋转角度 | `number` |
|
||||
| 属性 | 说明 | 类型 |
|
||||
| :----- | :----------- | :-------- |
|
||||
| type | svg 文件名 | `string` |
|
||||
| spin | 是否无限旋转 | `boolean` |
|
||||
| rotate | 旋转角度 | `number` |
|
||||
|
||||
@ -3,22 +3,25 @@
|
||||
集成 [Jest](https://www.jestjs.cn/) 测试框架，目前只支持单元测试和覆盖测试。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-jest": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-jest": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 约定
|
||||
|
||||
- 项目根目录下 `tests` 和 `__tests__` 文件夹中的 `js` 或者 `jsx` 文件为测试文件。
|
||||
- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}`
|
||||
- 项目根目录下 `tests` 和 `__tests__` 文件夹中的 `js` 或者 `jsx` 文件为测试文件。
|
||||
- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}`
|
||||
|
||||
例如测试文件 `add.js`：
|
||||
|
||||
```
|
||||
fes-template
|
||||
├── __tests__
|
||||
@ -28,22 +31,26 @@ fes-template
|
||||
└── utils
|
||||
└── sum.js
|
||||
```
|
||||
|
||||
内容如下：
|
||||
|
||||
```js
|
||||
import sum from '@/utils/sum';
|
||||
test('adds 1 + 2 to equal 3', () => {
|
||||
expect(sum(1, 2)).toBe(3);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## 命令
|
||||
## 命令
|
||||
|
||||
在 `fes` 上注册 `test` 命令：
|
||||
|
||||
```bash
|
||||
$ fes test
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
插件实现 Jest 的全部配置，具体请查看 [文档-configuration](https://www.jestjs.cn/docs/configuration#reference)。 也可以使用 `-h` 打印配置帮助信息：
|
||||
|
||||
### args 变量
|
||||
@ -51,7 +58,9 @@ $ fes test
|
||||
```bash
|
||||
$ fes test -h
|
||||
```
|
||||
|
||||
打印配置帮助信息:
|
||||
|
||||
```
|
||||
$ fes test -h
|
||||
Usage: fes test [options]
|
||||
@ -342,14 +351,15 @@ Options:
|
||||
```
|
||||
|
||||
比如覆盖测试：
|
||||
|
||||
```
|
||||
fes test --coverage
|
||||
```
|
||||
|
||||
### 配置文件
|
||||
除了插件内置的默认配置之外，插件遵循 `Jest`的配置文件规范，约定项目根目录下的 `jest.config.js` 为用户配置文件，约定 `packages.json` 的 `jest` 属性内容也是配置。
|
||||
|
||||
除了插件内置的默认配置之外，插件遵循 `Jest`的配置文件规范，约定项目根目录下的 `jest.config.js` 为用户配置文件，约定 `packages.json` 的 `jest` 属性内容也是配置。
|
||||
|
||||
### 优先级
|
||||
|
||||
`args` 配置 > `package.json`中的 `jest` > `jest.config.js` > 默认配置
|
||||
`args` 配置 > `package.json`中的 `jest` > `jest.config.js` > 默认配置
|
||||
|
||||
@ -1,92 +1,109 @@
|
||||
# @fesjs/plugin-layout
|
||||
|
||||
## 介绍
|
||||
为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
|
||||
- 侧边栏菜单数据根据路由中的配置自动生成。
|
||||
- 布局，提供 `side`、 `top`、`mixin` 三种布局。
|
||||
- 主题，提供 `light`、`dark` 两种主题。
|
||||
- 默认实现对路由的 404、403 处理。
|
||||
- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
|
||||
- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
|
||||
- 支持自定义头部区域。
|
||||
- 菜单支持配置icon
|
||||
- 菜单标题支持国际化
|
||||
|
||||
- 可配置页面是否需要 layout。
|
||||
|
||||
为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
|
||||
|
||||
- 侧边栏菜单数据根据路由中的配置自动生成。
|
||||
- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
|
||||
- 主题，提供 `light`、`dark` 两种主题。
|
||||
- 默认实现对路由的 404、403 处理。
|
||||
- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
|
||||
- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
|
||||
- 支持自定义头部或者侧边栏区域。
|
||||
- 菜单支持配置 icon。
|
||||
- 菜单标题支持国际化。
|
||||
- 可配置页面是否需要 layout。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^4.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-layout": "^5.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 布局类型
|
||||
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
|
||||
```js
|
||||
export default {
|
||||
layout: {
|
||||
navigation: 'side'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 、`top` 和 `left-right`， 默认是 `side`。
|
||||
|
||||
### side
|
||||
|
||||
<!--  -->
|
||||
<img :src="$withBase('side.png')" alt="side">
|
||||
|
||||
### top
|
||||
|
||||
<!--  -->
|
||||
<img :src="$withBase('top.png')" alt="top">
|
||||
|
||||
### mixin
|
||||
|
||||
<!--  -->
|
||||
<img :src="$withBase('mixin.png')" alt="mixin">
|
||||
|
||||
### 页面禁用布局
|
||||
布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
|
||||
### left-right
|
||||
|
||||
<!--  -->
|
||||
<img :src="$withBase('left-right.png')" alt="left-right">
|
||||
|
||||
### 页面个性化
|
||||
|
||||
可以为页面单独设置布局类型：
|
||||
|
||||
```js
|
||||
import { defineRouteMete } from '@fesjs/fes';
|
||||
|
||||
defineRouteMeta({
|
||||
layout: {
|
||||
navigation: null,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
当设置为 `null` 时，页面不使用布局。
|
||||
|
||||
## 页面缓存
|
||||
|
||||
支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存：
|
||||
|
||||
```js
|
||||
import { defineRouteMete } from '@fesjs/fes';
|
||||
|
||||
defineRouteMeta({
|
||||
'keep-alive': true,
|
||||
});
|
||||
```
|
||||
|
||||
### 处理嵌套路由
|
||||
|
||||
Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，layout.vue 中必须实现 `<RouterView/>`。如果嵌套路由下的页面设置了 `keep-alive`，则需要用 `<Page/>` 替换 `<RouterView/>`，`<Page/>`实现了页面缓存。
|
||||
|
||||
```vue
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": false
|
||||
}
|
||||
</config>
|
||||
```
|
||||
如果只是不想展示`sidebar`，则：
|
||||
```
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": {
|
||||
"sidebar": false
|
||||
}
|
||||
}
|
||||
</config>
|
||||
```
|
||||
`layout`的可选配置有：
|
||||
|
||||
- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
|
||||
|
||||
- **header**： 头部区域，从v4.0.0开始，之前名称叫`top`
|
||||
|
||||
- **logo**：logo和标题区域。
|
||||
|
||||
|
||||
## keep-alive
|
||||
从 4.0.7 开始支持配置路由页面缓存：
|
||||
```
|
||||
<config lang="json">
|
||||
{
|
||||
"keep-alive": true
|
||||
}
|
||||
</config>
|
||||
<template>
|
||||
<Page></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Page } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
Page,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 编译时配置
|
||||
## 配置
|
||||
|
||||
#### 编译时配置方式
|
||||
|
||||
在 `.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
layout: {
|
||||
@ -95,17 +112,7 @@ export default {
|
||||
// 底部文字
|
||||
footer: 'Created by MumbleFE',
|
||||
// 主题light
|
||||
theme: 'dark'
|
||||
// 是否开启 tabs
|
||||
multiTabs: false,
|
||||
// 布局类型
|
||||
navigation: 'side',
|
||||
// 是否固定头部
|
||||
fixedHeader: false,
|
||||
// 是否固定sidebar
|
||||
fixedSideBar: true,
|
||||
// sidebar的宽度
|
||||
sideWidth: 200,
|
||||
theme: 'dark',
|
||||
menus: [{
|
||||
name: 'index'
|
||||
}, {
|
||||
@ -115,209 +122,198 @@ export default {
|
||||
}, {
|
||||
name: 'simpleList'
|
||||
}],
|
||||
menuConfig: {
|
||||
defaultExpandAll: false,
|
||||
expandedKeys: [],
|
||||
accordion: false
|
||||
}
|
||||
|
||||
},
|
||||
```
|
||||
|
||||
### footer
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`null`
|
||||
#### 运行时配置方式
|
||||
|
||||
- **详情**：页面底部的文字。
|
||||
|
||||
### theme
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`dark`
|
||||
|
||||
- **详情**：主题，可选有 `dark`、`light`
|
||||
|
||||
### navigation
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`side`
|
||||
|
||||
- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
|
||||
|
||||
### fixedHeader
|
||||
- **类型**：`Boolean`
|
||||
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：是否固定头部，不跟随页面滚动。
|
||||
|
||||
### fixedSideBar
|
||||
- **类型**：`Boolean`
|
||||
|
||||
- **默认值**：`true`
|
||||
|
||||
- **详情**：是否固定sidebar，不跟随页面滚动。
|
||||
|
||||
### title
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`name` in package.json
|
||||
|
||||
- **详情**：产品名，会显示在 Logo 旁边。
|
||||
|
||||
### logo
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：默认提供 fes.js 的 Logo
|
||||
|
||||
- **详情**：Logo的链接
|
||||
|
||||
|
||||
### multiTabs
|
||||
- **类型**：`boolean`
|
||||
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：是否开启多页。
|
||||
|
||||
### menus
|
||||
- **类型**：`Array`
|
||||
|
||||
- **默认值**：`[]`
|
||||
|
||||
- **详情**：菜单配置，子项具体配置如下：
|
||||
|
||||
- **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
|
||||
|
||||
- **path**：菜单的路径，可配置第三方地址。
|
||||
|
||||
- **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
|
||||
|
||||
```
|
||||
{
|
||||
path: '/product',
|
||||
match: ['/product/*', '/product/create']
|
||||
}
|
||||
```
|
||||
|
||||
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
|
||||
|
||||
- **icon**: 菜单的图标，只有一级标题展示图标。
|
||||
- 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，在这里使用组件名称。
|
||||
```js
|
||||
{
|
||||
icon: "AppstoreOutlined"
|
||||
}
|
||||
```
|
||||
- 图标使用本地或者远程svg图片。
|
||||
```js
|
||||
{
|
||||
icon: "/wine-outline.svg"
|
||||
}
|
||||
```
|
||||
|
||||
- **children**：子菜单配置。
|
||||
|
||||
### menusConfig
|
||||
- **类型**：`Object`
|
||||
|
||||
- **默认值**：`{}`
|
||||
|
||||
- **详情**：菜单的配置：
|
||||
|
||||
- **defaultExpandAll**：是否默认展开全部菜单。
|
||||
|
||||
- **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
|
||||
|
||||
- **accordion**：是否只保持一个子菜单的展开。
|
||||
|
||||
## 运行时配置
|
||||
在 `app.js` 中配置：
|
||||
|
||||
```js
|
||||
import UserCenter from '@/components/UserCenter';
|
||||
export const layout = {
|
||||
customHeader: <UserCenter />
|
||||
renderCustom: () => <UserCenter />,
|
||||
menus: [
|
||||
{
|
||||
name: 'index',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### menus
|
||||
- **类型**：`(defaultMenus: [] )=> Ref | []`
|
||||
|
||||
- **详情**：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个`Ref`或者数组。
|
||||
在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。
|
||||
。
|
||||
|
||||
```js
|
||||
import { ClusterOutlined } from '@fesjs/fes-design/icon'
|
||||
export const layout = layoutConfig => ({
|
||||
...layoutConfig,
|
||||
customHeader: <UserCenter />,
|
||||
menus: (defaultMenuData) => {
|
||||
const menusRef = ref(defaultMenuData);
|
||||
watch(() => layoutConfig.initialState.userName, () => {
|
||||
menusRef.value = [{
|
||||
name: 'store',
|
||||
icon: <ClusterOutlined />
|
||||
}];
|
||||
});
|
||||
export const layout = (layoutConfig, { initialState }) => ({
|
||||
renderCustom: () => <UserCenter />,
|
||||
menus: () => {
|
||||
const menusRef = ref(layoutConfig.menus);
|
||||
watch(
|
||||
() => initialState.userName,
|
||||
() => {
|
||||
menusRef.value = [
|
||||
{
|
||||
name: 'store',
|
||||
},
|
||||
];
|
||||
},
|
||||
);
|
||||
return menusRef;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
```
|
||||
`layoutConfig.initialState` 是 `beforeRender.action`执行后创建的应用初始状态数据。
|
||||
|
||||
如果菜单需要根据某些状态动态改变，则返回`Ref`，否则只需要返回数组。
|
||||
最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。
|
||||
|
||||
:::tip
|
||||
在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。
|
||||
:::
|
||||
实际上运行配置能做的事情更多，推荐用运行时配置方式。
|
||||
|
||||
### footer
|
||||
|
||||
### header
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`true`
|
||||
- **类型**：`String`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：是否显示 header 区域。
|
||||
- **详情**：页面底部的文字。
|
||||
|
||||
### sidebar
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`true`
|
||||
### theme
|
||||
|
||||
- **详情**：是否显示 sidebar 区域。
|
||||
- **类型**：`String`
|
||||
- **默认值**：`dark`
|
||||
|
||||
- **详情**：主题，可选有 `dark`、`light`
|
||||
|
||||
### navigation
|
||||
|
||||
- **类型**：`String`
|
||||
- **默认值**：`side`
|
||||
|
||||
- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
|
||||
|
||||
### isFixedHeader
|
||||
|
||||
- **类型**：`Boolean`
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：是否固定头部，不跟随页面滚动。
|
||||
|
||||
### isFixedSidebar
|
||||
|
||||
- **类型**：`Boolean`
|
||||
- **默认值**：`true`
|
||||
|
||||
- **详情**：是否固定 sidebar，不跟随页面滚动。
|
||||
|
||||
### title
|
||||
|
||||
- **类型**：`String`
|
||||
- **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
|
||||
|
||||
- **详情**：产品名。
|
||||
|
||||
### logo
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`true`
|
||||
|
||||
- **详情**：是否显示 logo 区域。
|
||||
- **类型**：`String`
|
||||
- **默认值**：默认提供 `fes.js` 的 Logo
|
||||
|
||||
### customHeader
|
||||
- **类型**：Vue Component
|
||||
|
||||
- **默认值**：`null`
|
||||
- **详情**：Logo 的链接
|
||||
|
||||
- **详情**：top的区域部分位置提供组件自定义功能。
|
||||
### multiTabs
|
||||
|
||||
- **类型**：`boolean`
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：是否开启多页。
|
||||
|
||||
### menus
|
||||
|
||||
- **类型**：`[] | () => Ref<[]> | () => []`
|
||||
- **默认值**：`[]`
|
||||
|
||||
- **详情**：菜单配置
|
||||
|
||||
子项具体配置如下：
|
||||
|
||||
- **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
|
||||
|
||||
- **path**：菜单的路径，可配置第三方地址。
|
||||
|
||||
- **match (v4.0.0+）**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。
|
||||
|
||||
```
|
||||
{
|
||||
path: '/product',
|
||||
match: ['/product/*', '/product/create']
|
||||
}
|
||||
```
|
||||
|
||||
- **title**：菜单的标题。
|
||||
|
||||
- 如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
|
||||
|
||||
- title支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。
|
||||
|
||||
- **icon**: 菜单的图标，只一级标题展示图标。
|
||||
|
||||
- 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
|
||||
|
||||
- 图标使用本地或者远程 svg 图片。
|
||||
|
||||
```js
|
||||
{
|
||||
icon: '/wine-outline.svg';
|
||||
}
|
||||
```
|
||||
|
||||
- **children**：子菜单配置。
|
||||
|
||||
:::tip
|
||||
函数类型仅在运行时可用，可以实现动态变更菜单。
|
||||
:::
|
||||
|
||||
### menuProps
|
||||
|
||||
- **类型**：`Object`
|
||||
- **默认值**：`{}`
|
||||
|
||||
- **详情**：菜单的配置：
|
||||
|
||||
- **defaultExpandAll**：是否默认展开全部菜单。
|
||||
|
||||
- **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
|
||||
|
||||
- **accordion**：是否只保持一个子菜单的展开。
|
||||
|
||||
### sideWidth
|
||||
|
||||
- **类型**：`Number`
|
||||
- **默认值**：`200`
|
||||
|
||||
- **详情**：sidebar 的宽度
|
||||
|
||||
### renderCustom
|
||||
|
||||
- **类型**： `()=> VNodes`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**： 自定义区域内容，仅运行时。
|
||||
|
||||
### unAccessHandler
|
||||
- **类型**：`Function`
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
- **类型**：`({ to, from, next})=> void`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
export const layout = {
|
||||
unAccessHandler({ to, next }) {
|
||||
const accesssIds = accessApi.getAccess();
|
||||
if (to.path === '/404') {
|
||||
@ -328,46 +324,65 @@ export const access = {
|
||||
accessApi.setAccess(accesssIds.concat(['/403']));
|
||||
}
|
||||
next('/403');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### noFoundHandler
|
||||
- **类型**：函数
|
||||
|
||||
- **默认值**：null
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
- **类型**：`({ to, from, next})=> void`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
export const layout = {
|
||||
noFoundHandler({ next }) {
|
||||
const accesssIds = accessApi.getAccess();
|
||||
if (!accesssIds.includes('/404')) {
|
||||
accessApi.setAccess(accesssIds.concat(['/404']));
|
||||
}
|
||||
next('/404');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### logoUrl
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：默认提供 fes.js 的 Logo
|
||||
## API
|
||||
|
||||
- **详情**：Logo的链接。
|
||||
### useTabTitle
|
||||
类型定义如下：
|
||||
```ts
|
||||
function useTabTitle(title: string | Ref<string>): void;
|
||||
```
|
||||
|
||||
|
||||
当使用多页签模式时，在页面中使用 `useTabTitle` 可以自定义页面标签：
|
||||
```vue
|
||||
<script setup>
|
||||
import { useRoute, useTabTitle } from '@fesjs/fes';
|
||||
|
||||
const titleRef = useTabTitle(`详情-${route.params?.id}`);
|
||||
|
||||
//如果要更新
|
||||
titleRef.value = "changed"
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### 其他运行时配置 (> 4.1.0)
|
||||
编译时配置的内容同样支持在运行时配置，但是`logo`除外，用`logoUrl`替代。
|
||||
|
||||
|
||||
## 4.x 升级到 5.x
|
||||
|
||||
1. 个性化 layout 配置改为使用传入 navigation
|
||||
2. customHeader 改为 renderCustom
|
||||
3. fixedHeader 改为 isFixedHeader
|
||||
4. menusConfig 改为 menuProps
|
||||
5. fixedSideBar 改为 isFixedSidebar
|
||||
6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right
|
||||
|
||||
@ -1,23 +1,28 @@
|
||||
# @fesjs/plugin-locale
|
||||
|
||||
## 介绍
|
||||
|
||||
国际化插件，基于 [Vue I18n](https://github.com/intlify/vue-i18n-next)，用于解决 i18n 问题。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-locale": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-locale": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 配置
|
||||
|
||||
### 约定式配置
|
||||
|
||||
Fes.js 约定如下目录，项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换：
|
||||
|
||||
```
|
||||
src
|
||||
├── locales
|
||||
@ -27,49 +32,55 @@ src
|
||||
│ └── index.vue
|
||||
└── app.js
|
||||
```
|
||||
|
||||
多语言文件的命名规范：`<lang>-<COUNTRY>.js`
|
||||
|
||||
多语言文件的内容规范：键值组成的字面量，如下：
|
||||
|
||||
```js
|
||||
// src/locales/zh-CN.js
|
||||
export default {
|
||||
menu: {
|
||||
interface: '接口'
|
||||
interface: '接口',
|
||||
},
|
||||
overview: '概述',
|
||||
i18n: {
|
||||
internationalization: '国际化，基于',
|
||||
achieve: '实现。',
|
||||
ui: 'UI组件'
|
||||
}
|
||||
ui: 'UI组件',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```js
|
||||
// src/locales/en-US.js
|
||||
export default {
|
||||
menu: {
|
||||
interface: 'interface'
|
||||
interface: 'interface',
|
||||
},
|
||||
overview: 'Overview',
|
||||
i18n: {
|
||||
internationalization: 'internationalization，base on',
|
||||
achieve: 'to achieve.',
|
||||
ui: 'UI components'
|
||||
}
|
||||
ui: 'UI components',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
想了解更多语言信息配置、匹配规则，请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
|
||||
|
||||
|
||||
### 编译时配置
|
||||
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
locale: {
|
||||
}
|
||||
}
|
||||
locale: {},
|
||||
};
|
||||
```
|
||||
|
||||
默认配置为：
|
||||
|
||||
```js
|
||||
export default {
|
||||
locale: {
|
||||
@ -77,106 +88,112 @@ export default {
|
||||
fallbackLocale: 'zh-CN', // set fallback locale
|
||||
baseNavigator: true, // 开启浏览器语言检测
|
||||
legacy: false, // 用户是否需要 Legacy API 模式
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
所有配置项如下：
|
||||
|
||||
#### locale
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`zh-CN`
|
||||
|
||||
- **详情**：当前的语言。
|
||||
- **类型**：`String`
|
||||
- **默认值**：`zh-CN`
|
||||
|
||||
- **详情**：当前的语言。
|
||||
|
||||
#### fallbackLocale
|
||||
- **类型**：`String`
|
||||
|
||||
- **默认值**：`zh-CN`
|
||||
|
||||
- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
|
||||
- **类型**：`String`
|
||||
- **默认值**：`zh-CN`
|
||||
|
||||
- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
|
||||
|
||||
#### baseNavigator
|
||||
- **类型**：`Boolean`
|
||||
|
||||
- **默认值**：`true`
|
||||
|
||||
- **详情**：开启浏览器语言检测。
|
||||
- **类型**：`Boolean`
|
||||
- **默认值**：`true`
|
||||
|
||||
- **详情**：开启浏览器语言检测。
|
||||
|
||||
默认情况下，当前语言环境的识别按照：`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
|
||||
|
||||
#### legacy
|
||||
- **类型**：`Boolean`
|
||||
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：用户是否需要 Legacy API 模式
|
||||
- **类型**：`Boolean`
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：用户是否需要 Legacy API 模式
|
||||
|
||||
### 运行时配置
|
||||
|
||||
暂无。
|
||||
|
||||
## API
|
||||
|
||||
### locale
|
||||
|
||||
插件 API 通过 `@fesjs/fes` 导出：
|
||||
|
||||
```js
|
||||
import { locale } from '@fesjs/fes'
|
||||
import { locale } from '@fesjs/fes';
|
||||
```
|
||||
|
||||
#### locale.messages
|
||||
- **类型**：`Object`
|
||||
|
||||
- **详情**：当前的配置的语言信息。
|
||||
|
||||
- **类型**：`Object`
|
||||
- **详情**：当前的配置的语言信息。
|
||||
|
||||
#### locale.setLocale
|
||||
- **类型**：`Function`
|
||||
|
||||
- **详情**：设置当前的语言。
|
||||
- **参数**：
|
||||
- locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- **返回值**：`null`
|
||||
|
||||
- **类型**：`Function`
|
||||
- **详情**：设置当前的语言。
|
||||
- **参数**：
|
||||
- locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- **返回值**：`null`
|
||||
|
||||
```js
|
||||
import { locale } from '@fesjs/fes';
|
||||
locale.setLocale({ locale: 'en-US' });
|
||||
```
|
||||
|
||||
#### locale.addLocale
|
||||
- **类型**：`Function`
|
||||
|
||||
- **详情**：手动添加语言配置。
|
||||
- **参数**：
|
||||
- locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- messages, 语言信息。
|
||||
- **返回值**：`null`
|
||||
|
||||
- **类型**：`Function`
|
||||
- **详情**：手动添加语言配置。
|
||||
- **参数**：
|
||||
- locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- messages, 语言信息。
|
||||
- **返回值**：`null`
|
||||
|
||||
```js
|
||||
import { locale } from '@fesjs/fes'
|
||||
import { locale } from '@fesjs/fes';
|
||||
locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
|
||||
```
|
||||
|
||||
|
||||
#### locale.getAllLocales
|
||||
- **类型**：`Function`
|
||||
|
||||
- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
|
||||
- **参数**：null
|
||||
- **返回值**：`Array`
|
||||
|
||||
- **类型**：`Function`
|
||||
- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
|
||||
- **参数**：null
|
||||
- **返回值**：`Array`
|
||||
|
||||
```js
|
||||
import { locale } from '@fesjs/fes';
|
||||
console.log(locale.getAllLocales());
|
||||
// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]
|
||||
```
|
||||
|
||||
|
||||
### useI18n
|
||||
|
||||
Composition API, 只能在 `setup` 函数中使用，更多细节参考 [Vue I18n](https://vue-i18n.intlify.dev/api/composition.html#usei18n)。
|
||||
举个 🌰：
|
||||
举个 🌰：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form>
|
||||
<label>{{ t('language') }}</label>
|
||||
</form>
|
||||
<p>message: {{ t('hello') }}</p>
|
||||
<form>
|
||||
<label>{{ t('language') }}</label>
|
||||
</form>
|
||||
<p>message: {{ t('hello') }}</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
34
docs/reference/plugin/plugins/login.md
Normal file
34
docs/reference/plugin/plugins/login.md
Normal file
@ -0,0 +1,34 @@
|
||||
# @fesjs/plugin-login
|
||||
|
||||
## 介绍
|
||||
|
||||
管理自定义 login 页面，包括 login 页面权限问题，跳转登陆问题。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-login": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 运行时配置
|
||||
|
||||
```js
|
||||
import { defineRuntimeConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
login: {
|
||||
loginPath: '/login', // 登陆页面路径，默认 /login，也可以用路由的 name
|
||||
hasLogin() {
|
||||
// 进入页面前判断是否登陆的逻辑，每次跳转非登陆页面都会检测，直到为 true，支持异步
|
||||
return true;
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -1,60 +1,69 @@
|
||||
# @fesjs/plugin-model
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 package.json 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-model": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 介绍
|
||||
一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。
|
||||
|
||||
一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动 UI 更新，提供 `reactive` 、 `ref` 等 API 把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。
|
||||
|
||||
我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。
|
||||
|
||||
文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。
|
||||
|
||||
### Model 文件
|
||||
|
||||
**src/models/useAuthModel.js**
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue'
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default function useAuthModel() {
|
||||
const user = reactive({});
|
||||
const user = reactive({});
|
||||
|
||||
const signin = ()=>{
|
||||
// todo
|
||||
}
|
||||
const signin = () => {
|
||||
// todo
|
||||
};
|
||||
|
||||
const signout = ()=>{
|
||||
// todo
|
||||
}
|
||||
const signout = () => {
|
||||
// todo
|
||||
};
|
||||
|
||||
return {
|
||||
user,
|
||||
signin,
|
||||
signout
|
||||
}
|
||||
return {
|
||||
user,
|
||||
signin,
|
||||
signout,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 在组件中使用 Model
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { useModel } from "@fesjs/fes"
|
||||
import { useModel } from '@fesjs/fes';
|
||||
export default {
|
||||
setup(){
|
||||
const { user, signin, signout } = useModel("useAuthModel")
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
const { user, signin, signout } = useModel('useAuthModel');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### @@initialState
|
||||
|
||||
在`beforeRender`的返回的内容会写入`@@initialState`
|
||||
|
||||
```js
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -65,17 +74,19 @@ export const beforeRender = {
|
||||
setRole('admin');
|
||||
// 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
|
||||
resolve({
|
||||
userName: 'harrywan'
|
||||
userName: 'harrywan',
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
````
|
||||
```
|
||||
|
||||
然后我们可以在其他组件中使用：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="right">{{initialState.userName}}</div>
|
||||
<div class="right">{{ initialState.userName }}</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useModel } from '@fesjs/fes';
|
||||
@ -84,24 +95,21 @@ export default {
|
||||
setup() {
|
||||
const initialState = useModel('@@initialState');
|
||||
return {
|
||||
initialState
|
||||
initialState,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scope>
|
||||
</style>
|
||||
<style scope></style>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### useModel
|
||||
|
||||
**useModel(name)**
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。
|
||||
- **参数**：
|
||||
- name，传入 Model 文件名
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**: 获取 Model 数据， 也就是 Model 文件默认导出函数执行的结果。
|
||||
- **参数**：
|
||||
- name，传入 Model 文件名
|
||||
|
||||
@ -1,32 +1,36 @@
|
||||
# @fesjs/plugin-pinia
|
||||
|
||||
## 介绍
|
||||
集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。
|
||||
|
||||
集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义 store 使用。
|
||||
|
||||
为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的 API，相关 API 直接从 `pinia` 导出：
|
||||
|
||||
为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出：
|
||||
```js
|
||||
import { defineStore } from 'pinia';
|
||||
```
|
||||
|
||||
约定 `plugin` 定义放在 `stores` 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
|
||||
约定 `plugin` 定义放在 `stores` 目录下，文件名包含 plugin 被解析为插件，无需额外配置，定义即可用。
|
||||
|
||||
```
|
||||
└── src
|
||||
├── pages
|
||||
│ └── index.vue
|
||||
└── stores
|
||||
│ ├── plugin-logger.js
|
||||
└── stores
|
||||
│ ├── plugin-logger.js
|
||||
│ ├── user.js
|
||||
└── app.js
|
||||
```
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-pinia": "^2.0.0",
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-pinia": "^3.0.0",
|
||||
"pinia": "^2.0.11"
|
||||
}
|
||||
}
|
||||
@ -35,41 +39,46 @@ import { defineStore } from 'pinia';
|
||||
## API
|
||||
|
||||
### pinia
|
||||
|
||||
`createPinia`执行后创建的实例。
|
||||
|
||||
```js
|
||||
import { pinia } from '@fesjs/fes'
|
||||
import { pinia } from '@fesjs/fes';
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
### 定义 store
|
||||
|
||||
我们在 `src/store/main.js`中：
|
||||
|
||||
```js
|
||||
import { defineStore } from 'pinia'
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
// useStore could be anything like useUser, useCart
|
||||
// the first argument is a unique id of the store across your application
|
||||
export const useStore = defineStore('main', {
|
||||
// other options...
|
||||
})
|
||||
// other options...
|
||||
});
|
||||
```
|
||||
|
||||
### setup
|
||||
|
||||
```js
|
||||
import { useStore } from '@/store/main'
|
||||
import { useStore } from '@/store/main';
|
||||
export default {
|
||||
setup(){
|
||||
const store = useStore()
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
const store = useStore();
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 非setup
|
||||
比如在app.js中:
|
||||
### 非 setup
|
||||
|
||||
比如在 app.js 中:
|
||||
|
||||
```js
|
||||
import { pinia } from '@fesjs/fes'
|
||||
import { pinia } from '@fesjs/fes';
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -80,11 +89,11 @@ export const beforeRender = {
|
||||
const store = useStore(pinia);
|
||||
store.$patch({
|
||||
userName: '李雷',
|
||||
role: 'admin'
|
||||
role: 'admin',
|
||||
});
|
||||
setRole('admin');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
@ -3,17 +3,20 @@
|
||||
Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-qiankun](https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp) 实现，喜欢 React 的同学推荐直接用 Umi。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-qiankun": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-qiankun": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 介绍
|
||||
|
||||
有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~
|
||||
|
||||
可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。
|
||||
@ -21,6 +24,7 @@ Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-q
|
||||
## 主应用配置
|
||||
|
||||
### 第一步：注册子应用
|
||||
|
||||
```js
|
||||
export default {
|
||||
qiankun: {
|
||||
@ -30,7 +34,7 @@ export default {
|
||||
{
|
||||
name: 'app1', // 唯一 id
|
||||
entry: '//localhost:8001', // html entry
|
||||
props: {} // 传递给子应用的数据
|
||||
props: {}, // 传递给子应用的数据
|
||||
},
|
||||
{
|
||||
name: 'app2', // 唯一 id
|
||||
@ -42,66 +46,76 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
当使用 `vite` 构建时需注意，**name** 必须跟子应用 `package.json`的 `name`保持一致。
|
||||
|
||||
### 第二步：装载子应用
|
||||
|
||||
#### 使用路由绑定的方式
|
||||
|
||||
:::warning
|
||||
主应用和子应用需要自行适配路由路径！！！待完善...
|
||||
:::
|
||||
|
||||
假设我们的系统之前有这样的一些路由：
|
||||
|
||||
```js
|
||||
export default {
|
||||
router: {
|
||||
routes: [{
|
||||
"path": "/",
|
||||
"component": () => import('@/src/.fes/plugin-layout/index.js'),
|
||||
"children": [
|
||||
{
|
||||
"path": "/onepiece",
|
||||
"component": () => import('@/pages/onepiece'),
|
||||
"name": "onepiece",
|
||||
"meta": {
|
||||
"name": "onepiece",
|
||||
"title": "onepiece"
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/src/.fes/plugin-layout/index.js'),
|
||||
children: [
|
||||
{
|
||||
path: '/onepiece',
|
||||
component: () => import('@/pages/onepiece'),
|
||||
name: 'onepiece',
|
||||
meta: {
|
||||
name: 'onepiece',
|
||||
title: 'onepiece',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
我们现在想在 `/son` 加载子应用 `app1`，只需要增加这样一些配置即可：
|
||||
```js {16-23}
|
||||
|
||||
```js {16-21}
|
||||
export default {
|
||||
router: {
|
||||
routes: [{
|
||||
"path": "/",
|
||||
"component": () => import('@/src/.fes/plugin-layout/index.js'),
|
||||
"children": [
|
||||
{
|
||||
"path": "/onepiece",
|
||||
"component": () => import('@/pages/onepiece'),
|
||||
"name": "onepiece",
|
||||
"meta": {
|
||||
"name": "onepiece",
|
||||
"title": "onepiece"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "/son",
|
||||
"meta": {
|
||||
"name": "son",
|
||||
"title": "子应用",
|
||||
"microApp": "app1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/src/.fes/plugin-layout/index.js'),
|
||||
children: [
|
||||
{
|
||||
path: '/onepiece',
|
||||
component: () => import('@/pages/onepiece'),
|
||||
name: 'onepiece',
|
||||
meta: {
|
||||
name: 'onepiece',
|
||||
title: 'onepiece',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/son',
|
||||
meta: {
|
||||
name: 'son',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
当前我们依然提倡约定路由的方式，在`src/pages` 目录新建 `son.vue`：
|
||||
|
||||
在`src/pages` 目录新建 `son.vue`：
|
||||
|
||||
```vue
|
||||
<config>
|
||||
{
|
||||
@ -112,11 +126,12 @@ export default {
|
||||
</config>
|
||||
```
|
||||
|
||||
#### 使用 `<MicroApp />` 组件的方式
|
||||
|
||||
#### 使用 `<MicroApp />` 组件的方式
|
||||
:::tip
|
||||
建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" />
|
||||
@ -126,23 +141,23 @@ import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
setup() {
|
||||
const name = 'app1';
|
||||
return {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
name,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||
如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
|
||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||
|
||||
如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据 base 可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
|
||||
|
||||
`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。
|
||||
|
||||
```vue
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" url="/" />
|
||||
</template>
|
||||
@ -151,29 +166,44 @@ import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
setup() {
|
||||
const name = 'app1';
|
||||
return {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
name,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 子应用配置
|
||||
|
||||
### 第一步：插件注册
|
||||
|
||||
```js
|
||||
export default {
|
||||
qiankun: {
|
||||
micro: {},
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
如果使用 `vite` 构建，当执行 `dev` 时需要额外配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
qiankun: {
|
||||
micro: {
|
||||
useDevMode: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 第二步：配置运行时生命周期钩子（可选）
|
||||
|
||||
插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。
|
||||
|
||||
```js
|
||||
export const qiankun = {
|
||||
// 应用加载之前
|
||||
@ -185,7 +215,7 @@ export const qiankun = {
|
||||
console.log('app1 mount', props);
|
||||
},
|
||||
// 当 props 更新时触发
|
||||
async update(props){
|
||||
async update(props) {
|
||||
console.log('app1 update', props);
|
||||
},
|
||||
// 应用卸载之后触发
|
||||
@ -193,7 +223,6 @@ export const qiankun = {
|
||||
console.log('app1 unmount', props);
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
## 父子应用通讯
|
||||
@ -203,18 +232,20 @@ export const qiankun = {
|
||||
### 配合 [useModel](./model.md) 使用
|
||||
|
||||
确保已经安装了 `@fesjs/plugin-model`：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-model": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 主应用传递 props
|
||||
|
||||
- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可：
|
||||
- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" :user="user" />
|
||||
@ -224,26 +255,27 @@ import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
const user = ref("")
|
||||
setup() {
|
||||
const name = 'app1';
|
||||
const user = ref('');
|
||||
return {
|
||||
name,
|
||||
user
|
||||
}
|
||||
}
|
||||
}
|
||||
user,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如：
|
||||
- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如：
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default () => {
|
||||
const state = reactive({ c: 1 });
|
||||
return {
|
||||
state
|
||||
state,
|
||||
};
|
||||
};
|
||||
```
|
||||
@ -255,38 +287,38 @@ export default () => {
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
const mainState = useModel('qiankunStateFromMain');
|
||||
return {
|
||||
mainState
|
||||
mainState,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 基于 props 传递
|
||||
|
||||
- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
|
||||
- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）
|
||||
|
||||
- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
|
||||
- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）
|
||||
|
||||
### MicroApp
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---- | ----------- | ------------- | ---------- |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------------------------- | ------ | ------ |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
|
||||
### MicroAppWithMemoHistory
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---- | ----------- | ------------- | ---------- |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
| url | 子应用的路由地址 | String | - |
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------------------------- | ------ | ------ |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
| url | 子应用的路由地址 | String | - |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# @fesjs/plugin-request
|
||||
|
||||
基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。
|
||||
基于 axios 封装的 request，内置防止重复请求、请求缓存、错误处理等功能。
|
||||
|
||||
## 启用方式
|
||||
|
||||
@ -9,102 +9,86 @@
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-request": "^2.0.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-request": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
## 运行时配置
|
||||
|
||||
### 构建时配置
|
||||
入口文件的全局配置，具体请求的配置参数会覆盖全局配置，支持 [axios](https://axios-http.com/zh/docs/req_config) 所有的参数。
|
||||
|
||||
```js
|
||||
export default {
|
||||
import { defineRuntimeConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
request: {
|
||||
dataField: 'result'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### dataField
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
|
||||
|
||||
#### base(即将废弃)
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`base` 接口前缀。
|
||||
|
||||
::: warning 即将废弃
|
||||
这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
|
||||
:::
|
||||
|
||||
### 运行时配置
|
||||
|
||||
在 `app.js` 中进行运行时配置。
|
||||
|
||||
```js
|
||||
export const request = {
|
||||
// 格式化 response.data (只有 response.data 类型为 object 才会调用)
|
||||
responseDataAdaptor: (data) => {
|
||||
data.code = data.code === '200' ? '0' : data.code;
|
||||
return data;
|
||||
},
|
||||
// 关闭 response data 校验（只判断 xhr status）
|
||||
closeResDataCheck: false,
|
||||
// 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8
|
||||
requestInterceptors: [],
|
||||
// 响应拦截器
|
||||
responseInterceptors: [],
|
||||
// 错误处理
|
||||
// 内部以 reponse.data.code === '0' 判断请求是否成功
|
||||
// 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
|
||||
errorHandler: {
|
||||
11199(response) {
|
||||
// 特殊 code 处理逻辑
|
||||
// API 前缀
|
||||
baseURL: '',
|
||||
dataHandler(data, response) {
|
||||
// 处理响应内容异常
|
||||
if (data.code !== '0') {
|
||||
if (data.code === '10000') {
|
||||
FMesseage.error('hello world');
|
||||
}
|
||||
if (data.code === '20000') {
|
||||
FMesseage.error('hello world');
|
||||
}
|
||||
throw new Error(response);
|
||||
}
|
||||
// 响应数据格式化
|
||||
return data?.result ? data.result : data;
|
||||
},
|
||||
404(error) {},
|
||||
default(error) {
|
||||
// 异常统一处理
|
||||
}
|
||||
// http 异常，和插件异常
|
||||
errorHandler(error) {
|
||||
if (error.response) {
|
||||
// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
|
||||
console.log(error.response.data);
|
||||
console.log(error.response.status);
|
||||
console.log(error.response.headers);
|
||||
} else if (error.request) {
|
||||
// 请求已经成功发起，但没有收到响应
|
||||
// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
|
||||
// 而在node.js中是 http.ClientRequest 的实例
|
||||
console.log(error.request);
|
||||
} else if (error.type) {
|
||||
// 插件异常
|
||||
console.log(error.msg);
|
||||
} else {
|
||||
// 发送请求时出了点问题
|
||||
console.log('Error', error.message);
|
||||
}
|
||||
console.log(error.config);
|
||||
},
|
||||
// 请求拦截器
|
||||
requestInterceptors: [],
|
||||
// 响应拦截器
|
||||
responseInterceptors: [],
|
||||
// 支持其他 axios 配置
|
||||
...otherConfigs,
|
||||
},
|
||||
// 其他 axios 配置
|
||||
...otherConfigs
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
#### skipErrorHandler
|
||||
## API
|
||||
|
||||
- 类型： `boolean | string | number | array<string | number>`
|
||||
- 默认值： ``
|
||||
- 详情：
|
||||
### request
|
||||
|
||||
指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。
|
||||
- **类型**：函数
|
||||
|
||||
- 示列：
|
||||
- **详情**：请求后端接口
|
||||
- **参数**：
|
||||
|
||||
```js
|
||||
import { request } from '@fesjs/fes';
|
||||
- url: 后端接口 url
|
||||
- data: 参数
|
||||
- options: 配置支持 [axios](https://axios-http.com/zh/docs/req_config) 所有的参数，和插件扩展参数。
|
||||
|
||||
request('/api/login', null, {
|
||||
skipErrorHandler: '110'
|
||||
})
|
||||
.then((res) => {
|
||||
// do something
|
||||
})
|
||||
.catch((err) => {
|
||||
// 这里处理 code 为 110 的异常
|
||||
// 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
|
||||
});
|
||||
```
|
||||
- **返回值**: Promise
|
||||
|
||||
### useRequest
|
||||
|
||||
request 的封装，返回响应式 `loading`、`error`、 `data`
|
||||
|
||||
## 使用
|
||||
|
||||
@ -115,7 +99,7 @@ import { request } from '@fesjs/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
password: '123456',
|
||||
})
|
||||
.then((res) => {
|
||||
// do something
|
||||
@ -138,11 +122,11 @@ request(
|
||||
'/api/login',
|
||||
{
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
password: '123456',
|
||||
},
|
||||
{
|
||||
mergeRequest: true // 在一个请求没有回来前，重复发送的请求会合并成一个请求
|
||||
}
|
||||
mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
|
||||
},
|
||||
)
|
||||
.then((res) => {
|
||||
// do something
|
||||
@ -152,12 +136,6 @@ request(
|
||||
});
|
||||
```
|
||||
|
||||
### 请求节流(即将废弃)
|
||||
|
||||
::: warning 即将废弃
|
||||
因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行
|
||||
:::
|
||||
|
||||
### 请求缓存
|
||||
|
||||
```js
|
||||
@ -167,14 +145,14 @@ request(
|
||||
'/api/login',
|
||||
{
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
password: '123456',
|
||||
},
|
||||
{
|
||||
cache: {
|
||||
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
|
||||
}
|
||||
}
|
||||
cacheTime: 1000 * 60 * 3, // 缓存时间：默认3min
|
||||
},
|
||||
},
|
||||
)
|
||||
.then((res) => {
|
||||
// do something
|
||||
@ -195,73 +173,14 @@ export default {
|
||||
setup() {
|
||||
const { loading, data, error } = useRequest('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
password: '123456',
|
||||
});
|
||||
|
||||
return {
|
||||
loading,
|
||||
data,
|
||||
error
|
||||
error,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 配置拦截器
|
||||
|
||||
函数的参数格式：[传送门](http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8);
|
||||
|
||||
```js
|
||||
export const request = {
|
||||
requestInterceptors: [
|
||||
function (config) {
|
||||
// 在发送请求之前做些什么
|
||||
return config;
|
||||
},
|
||||
[
|
||||
function (config) {
|
||||
// 在发送请求之前做些什么
|
||||
return config;
|
||||
},
|
||||
function (error) {
|
||||
// 对请求错误做些什么
|
||||
return Promise.reject(error);
|
||||
}
|
||||
]
|
||||
],
|
||||
// 响应拦截器
|
||||
responseInterceptors: [
|
||||
function (response) {
|
||||
// 对响应数据做点什么
|
||||
return response;
|
||||
},
|
||||
[
|
||||
function (response) {
|
||||
// 对响应数据做点什么
|
||||
return response;
|
||||
},
|
||||
function (error) {
|
||||
// 对响应错误做点什么
|
||||
return Promise.reject(error);
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### request
|
||||
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：请求后端接口
|
||||
- **参数**：
|
||||
- url: 后端接口 url
|
||||
- data: 参数
|
||||
- options: 配置（ 支持 axios 所有配置）
|
||||
- **返回值**: Promise
|
||||
|
||||
### useRequest
|
||||
|
||||
request 的封装，返回响应式 `loading`、`error`、 `data`
|
||||
|
||||
@ -1,27 +1,34 @@
|
||||
# @fesjs/plugin-sass
|
||||
|
||||
|
||||
|
||||
## 介绍
|
||||
Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`
|
||||
|
||||
Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`。
|
||||
|
||||
::: tip webpack 构建 sass 插件
|
||||
如果使用 Vite 构建，直接装 `sass` 依赖即可，不需要安装此插件。
|
||||
:::
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-sass": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-sass": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## global css
|
||||
添加 `src/global.scss` 和 `src/global.sass` 为全局CSS入口，添加一些通用样式内容。
|
||||
|
||||
添加 `src/global.scss` 和 `src/global.sass` 为全局 CSS 入口，添加一些通用样式内容。
|
||||
|
||||
## Vue 单文件组件
|
||||
|
||||
Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`，例如：
|
||||
|
||||
```vue
|
||||
<style lang="scss">
|
||||
</style>
|
||||
```
|
||||
<style lang="scss"></style>
|
||||
```
|
||||
|
||||
30
docs/reference/plugin/plugins/swc.md
Normal file
30
docs/reference/plugin/plugins/swc.md
Normal file
@ -0,0 +1,30 @@
|
||||
# @fesjs/plugin-swc
|
||||
|
||||
## 介绍
|
||||
webpack 启用 swc，构建速度更快！
|
||||
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-swc": "^3.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 编译时配置
|
||||
传对象时使用swc进行编译和压缩，[loader配置](https://swc.rs/docs/configuration/swcrc)，默认usage模式。
|
||||
```js
|
||||
export default {
|
||||
swc: {
|
||||
loader: {
|
||||
env: {
|
||||
coreJs: '3.27',
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
```
|
||||
@ -1,59 +1,76 @@
|
||||
# @fesjs/plugin-vuex
|
||||
|
||||
::: tip
|
||||
vue3+ 官方推荐使用[pinia](./pinia)，不在推荐使用 vuex。
|
||||
:::
|
||||
|
||||
## 介绍
|
||||
集成vuex插件
|
||||
|
||||
增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示
|
||||
集成 vuex 插件
|
||||
|
||||
增强 vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示
|
||||
|
||||
约定模式，module 和 plugin 定义放在 stores 目录下，文件名包含 plugin 被解析为插件，无需额外配置，定义即可用。
|
||||
|
||||
约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
|
||||
```
|
||||
└── src
|
||||
├── pages
|
||||
│ └── index.vue
|
||||
└── stores
|
||||
└── stores
|
||||
│ └── foo
|
||||
│ │ └── bar.js
|
||||
│ ├── counter.js
|
||||
│ ├── plugin-logger.js
|
||||
│ ├── plugin-logger.js
|
||||
│ ├── user.js
|
||||
└── app.js
|
||||
```
|
||||
|
||||
::: tip
|
||||
为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api
|
||||
为了防止`fesjs`与`vuex`的 export 冲突，fesjs 不提供导出 vuex 的任何 api。你可以直接使用 vuex 的 api
|
||||
|
||||
```js
|
||||
import { useStore } from 'vuex';
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-vuex": "^2.0.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-vuex": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
在 `.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
vuex: {
|
||||
strict: true // 开启严格模式
|
||||
}
|
||||
}
|
||||
strict: true, // 开启严格模式
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 场景使用
|
||||
先定义在stores下定义user模块，包含嵌套模块
|
||||
|
||||
先定义在 stores 下定义 user 模块，包含嵌套模块
|
||||
|
||||
stores/user.js
|
||||
|
||||
```js
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: () => ({
|
||||
name: 'aring',
|
||||
age: 20
|
||||
age: 20,
|
||||
}),
|
||||
actions: {
|
||||
login() {
|
||||
@ -63,68 +80,74 @@ export default {
|
||||
reslove('OK');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
address: {
|
||||
state: () => ({
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
zone: '南山区'
|
||||
zone: '南山区',
|
||||
}),
|
||||
getters: {
|
||||
address(state) {
|
||||
return state.province + state.city + state.zone;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
stores/foo/bar.js
|
||||
|
||||
```js
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: () => ({
|
||||
count: 0
|
||||
count: 0,
|
||||
}),
|
||||
mutations: {
|
||||
increment(state) {
|
||||
state.count++;
|
||||
}
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
doubleCount(state) {
|
||||
return state.count * 2;
|
||||
}
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
asyncIncrement({ commit }) {
|
||||
setTimeout(() => {
|
||||
commit('increment');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
::: tip
|
||||
导出的`mutations`、`actions`和`getter`的事件类型，将会按文件命名；
|
||||
|
||||
如`ACTION_TYPES.user.login`指向user模块中actions的login方法
|
||||
如`ACTION_TYPES.user.login`指向 user 模块中 actions 的 login 方法
|
||||
|
||||
如`GETTER_TYPES.user.address`指向user模块中嵌套的address getter
|
||||
如`GETTER_TYPES.user.address`指向 user 模块中嵌套的 address getter
|
||||
|
||||
如`MUTATION_TYPES.fooBar.increment`指向foo/bar模块中mutations的increment方法
|
||||
如`MUTATION_TYPES.fooBar.increment`指向 foo/bar 模块中 mutations 的 increment 方法
|
||||
:::
|
||||
|
||||
在vue文件中使用store
|
||||
在 vue 文件中使用 store
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<h4>Vuex</h4>
|
||||
<div><button :disabled="disabled" @click="login">async login</button></div>
|
||||
<div><button @click="fooBarIncrement">foo/bar：{{fooBarDoubleCount}}</button></div>
|
||||
<div>{{address}}</div>
|
||||
<div>
|
||||
<button @click="fooBarIncrement">foo/bar：{{ fooBarDoubleCount }}</button>
|
||||
</div>
|
||||
<div>{{ address }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
@ -155,38 +178,47 @@ export default {
|
||||
});
|
||||
},
|
||||
fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar
|
||||
fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])
|
||||
fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount]),
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
::: tip
|
||||
由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例
|
||||
由于该插件注册在 onAppCreated 中，如果在 onAppCreated 及之前使用 useStore 时，获取不到 vuex 实例
|
||||
|
||||
`fesjs`导出了 vuex 实例`store`，如在 app.js 文件中
|
||||
|
||||
`fesjs`导出了vuex实例`store`，如在app.js文件中
|
||||
```js
|
||||
import { store, GETTER_TYPES } from '@fesjs/fes';
|
||||
console.log(store.getters[GETTER_TYPES.user.address])
|
||||
console.log(store.getters[GETTER_TYPES.user.address]);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## vuex插件
|
||||
stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html)
|
||||
## vuex 插件
|
||||
|
||||
stores 文件夹下的文件名包含 plugin 被解析为插件，vuex 插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html)
|
||||
|
||||
## API
|
||||
|
||||
### store
|
||||
* 类型 `Object`
|
||||
* vuex实例
|
||||
|
||||
- 类型 `Object`
|
||||
- vuex 实例
|
||||
|
||||
### MUTATION_TYPES
|
||||
* 类型 `Object`
|
||||
* mutation的所有事件类型
|
||||
|
||||
|
||||
- 类型 `Object`
|
||||
- mutation 的所有事件类型
|
||||
|
||||
### GETTER_TYPES
|
||||
* 类型 `Object`
|
||||
* getter的所有方法名
|
||||
|
||||
- 类型 `Object`
|
||||
- getter 的所有方法名
|
||||
|
||||
### ACTION_TYPES
|
||||
* 类型 `Object`
|
||||
* action的所有事件类型
|
||||
|
||||
- 类型 `Object`
|
||||
- action 的所有事件类型
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
# @fesjs/plugin-watermark
|
||||
|
||||
## 介绍
|
||||
|
||||
给页面添加水印效果
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-watermark": "^2.0.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-watermark": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -19,9 +22,9 @@
|
||||
```js
|
||||
export default {
|
||||
watermark: {
|
||||
disabled: false
|
||||
disabled: false,
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### disabled
|
||||
@ -33,9 +36,9 @@ export default {
|
||||
```js
|
||||
export default {
|
||||
watermark: {
|
||||
disabled: true
|
||||
disabled: true,
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@ -52,21 +55,22 @@ destroyWatermark(); // 销毁水印
|
||||
```
|
||||
|
||||
默认参数是：
|
||||
|
||||
```js
|
||||
{
|
||||
content = '请勿外传',
|
||||
container = document.body,
|
||||
width = 300,
|
||||
height = 300,
|
||||
textAlign = 'center',
|
||||
textBaseline = 'middle',
|
||||
fontSize = '14px',
|
||||
fontFamily = 'Microsoft Yahei',
|
||||
fillStyle = 'rgba(184, 184, 184, 0.3)',
|
||||
rotate = 25,
|
||||
zIndex = 99999,
|
||||
timestamp = 'YYYY-MM-DD HH:mm'
|
||||
(content = '请勿外传'),
|
||||
(container = document.body),
|
||||
(width = 300),
|
||||
(height = 300),
|
||||
(textAlign = 'center'),
|
||||
(textBaseline = 'middle'),
|
||||
(fontSize = '14px'),
|
||||
(fontFamily = 'Microsoft Yahei'),
|
||||
(fillStyle = 'rgba(184, 184, 184, 0.3)'),
|
||||
(rotate = 25),
|
||||
(zIndex = 99999),
|
||||
(timestamp = 'YYYY-MM-DD HH:mm');
|
||||
}
|
||||
```
|
||||
|
||||
如果不需要时间戳，则可以设置`timestamp`为`false`。
|
||||
如果不需要时间戳，则可以设置`timestamp`为`false`。
|
||||
|
||||
36
lerna.json
36
lerna.json
@ -1,36 +0,0 @@
|
||||
{
|
||||
"version": "independent",
|
||||
"changelog": {
|
||||
"repo": "WeBankFinTech/fes.js",
|
||||
"cacheDir": ".changelog",
|
||||
"labels": {
|
||||
"PR: Spec Compliance :eyeglasses:": ":eyeglasses: Spec Compliance",
|
||||
"PR: Breaking Change :boom:": ":boom: Breaking Change",
|
||||
"PR: New Feature :rocket:": ":rocket: New Feature",
|
||||
"PR: Bug Fix :bug:": ":bug: Bug Fix",
|
||||
"PR: Polish :nail_care:": ":nail_care: Polish",
|
||||
"PR: Docs :memo:": ":memo: Documentation",
|
||||
"PR: Internal :house:": ":house: Internal",
|
||||
"PR: Performance :running_woman:": ":running_woman: Performance",
|
||||
"PR: Revert :leftwards_arrow_with_hook:": ":leftwards_arrow_with_hook: Revert"
|
||||
}
|
||||
},
|
||||
"command": {
|
||||
"publish": {
|
||||
"ignoreChanges": [
|
||||
"*.md",
|
||||
"**/test/**"
|
||||
],
|
||||
"message": "chore(release): publish"
|
||||
}
|
||||
},
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"ignoreChanges": [
|
||||
"**/test/**",
|
||||
"**/*.md"
|
||||
]
|
||||
}
|
||||
102
package.json
102
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fes.js",
|
||||
"version": "2.0.0",
|
||||
"version": "3.0.0",
|
||||
"description": "一个好用的前端管理台快速开发框架",
|
||||
"preferGlobal": true,
|
||||
"private": true,
|
||||
@ -8,17 +8,16 @@
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "lerna clean",
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"dev": "node scripts/build.js --watch",
|
||||
"build": "node scripts/build.js",
|
||||
"ver": "lerna version --conventional-prerelease --no-changelog --no-commit-hooks --no-private",
|
||||
"release": "node scripts/build.js && lerna publish from-git",
|
||||
"bootstrap": "pnpm i",
|
||||
"dev": "node scripts/build.mjs --watch",
|
||||
"build": "node scripts/build.mjs",
|
||||
"release": "node scripts/release.mjs",
|
||||
"clean": "rm pnpm-lock.yaml & rm -rf ./node_modules & rm -rf packages/**/node_modules & rm -rf packages/**/.cache",
|
||||
"docs:dev": "vuepress dev docs --clean-cache",
|
||||
"docs:build": "vuepress build docs --clean-cache",
|
||||
"docs:build-pages": "BASE=/fes.js/ vuepress build docs --clean-cache",
|
||||
"test": "fes test",
|
||||
"lint": "eslint -c ./.eslintrc.js --ext .js,.jsx,.vue,.ts"
|
||||
"lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
@ -29,36 +28,38 @@
|
||||
"strong"
|
||||
],
|
||||
"dependencies": {
|
||||
"lerna": "^4.0.0"
|
||||
"chalk": "^5.0.1",
|
||||
"conventional-changelog-cli": "^2.2.2",
|
||||
"enquirer": "^2.3.6",
|
||||
"execa": "^6.1.0",
|
||||
"minimist": "^1.2.6",
|
||||
"semver": "^7.3.6",
|
||||
"vuepress": "2.0.0-beta.53"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@babel/core": "^7.21.3",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@commitlint/cli": "^11.0.0",
|
||||
"@commitlint/config-conventional": "^11.0.0",
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-jest": "^2.0.0",
|
||||
"@vuepress/plugin-docsearch": "2.0.0-beta.28",
|
||||
"@vuepress/plugin-pwa": "2.0.0-beta.28",
|
||||
"@vuepress/plugin-pwa-popup": "2.0.0-beta.28",
|
||||
"@vuepress/bundler-webpack": "2.0.0-beta.28",
|
||||
"@webank/eslint-config-webank": "0.3.1",
|
||||
"chalk": "^4.1.2",
|
||||
"@vuepress/plugin-back-to-top": "2.0.0-beta.53",
|
||||
"@vuepress/plugin-docsearch": "2.0.0-beta.53",
|
||||
"@vuepress/plugin-pwa": "2.0.0-beta.53",
|
||||
"@vuepress/plugin-pwa-popup": "2.0.0-beta.53",
|
||||
"@webank/eslint-config-webank": "1.2.7",
|
||||
"chokidar": "^3.5.2",
|
||||
"commitizen": "^4.2.1",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"fs-extra": "^10.0.0",
|
||||
"husky": "^4.3.0",
|
||||
"lint-staged": "^10.4.0",
|
||||
"postcss": "^8.0.0",
|
||||
"postcss-loader": "^5.0.0",
|
||||
"vuepress": "2.0.0-beta.28",
|
||||
"fs-extra": "^11.1.1",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.2.0",
|
||||
"postcss": "^8.4.21",
|
||||
"postcss-loader": "^7.1.0",
|
||||
"yargs-parser": "^20.2.9"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts}": [
|
||||
"eslint --format=codeframe"
|
||||
"npm run lint"
|
||||
]
|
||||
},
|
||||
"husky": {
|
||||
@ -71,52 +72,5 @@
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"changelog": {
|
||||
"bugsUrl": "https://github.com/WeBankFinTech/fes.js/issues/",
|
||||
"authorName": true,
|
||||
"authorEmail": false,
|
||||
"settings": {
|
||||
"feat": {
|
||||
"title": ":rocket: New Feature",
|
||||
"enable": true
|
||||
},
|
||||
"fix": {
|
||||
"title": ":bug: Bug Fix"
|
||||
},
|
||||
"perf": {
|
||||
"title": ":running_woman: Performance"
|
||||
},
|
||||
"revert": {
|
||||
"title": ":leftwards_arrow_with_hook: Revert"
|
||||
},
|
||||
"refactor": {
|
||||
"title": "♻ 代码重构"
|
||||
},
|
||||
"docs": {
|
||||
"title": ":memo: Documentation",
|
||||
"enable": true
|
||||
},
|
||||
"style": {
|
||||
"title": ":eyeglasses: Spec Compliance",
|
||||
"enable": true
|
||||
},
|
||||
"test": {
|
||||
"title": "✅ 测试",
|
||||
"enable": false
|
||||
},
|
||||
"build": {
|
||||
"title": "👷 构建",
|
||||
"enable": false
|
||||
},
|
||||
"ci": {
|
||||
"title": "🔧 CI 配置",
|
||||
"enable": false
|
||||
},
|
||||
"chore": {
|
||||
"title": "🎫 其他更新",
|
||||
"enable": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,73 +1,76 @@
|
||||
|
||||
# 痛点
|
||||
|
||||
在开发一个前端项目之前，我们可能需要做如下准备工作：
|
||||
- 搭建开发环境
|
||||
- 约定代码规范
|
||||
- 封装API请求
|
||||
- 配置路由
|
||||
- 实现布局、菜单、导航
|
||||
- 实现登录
|
||||
- 权限管理
|
||||
- ...
|
||||
|
||||
- 搭建开发环境
|
||||
- 约定代码规范
|
||||
- 封装 API 请求
|
||||
- 配置路由
|
||||
- 实现布局、菜单、导航
|
||||
- 实现登录
|
||||
- 权限管理
|
||||
- ...
|
||||
|
||||
除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
|
||||
|
||||
|
||||
## Fes.js 是什么？
|
||||
Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。
|
||||
|
||||
Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于 Vue.js3.0，充分利用 Vue 丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。
|
||||
|
||||
它主要具备以下功能：
|
||||
- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
|
||||
|
||||
- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
|
||||
|
||||
- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
|
||||
- 🚀 **快速** ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
|
||||
- 🧨 **简单** ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
|
||||
|
||||
- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
- 💪 **健壮** ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
|
||||
|
||||
- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
|
||||
- 📦 **可扩展** ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
|
||||
|
||||
- 📡 **面向未来** ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 提升构建性能和实现微服务，未来会探索 vite 等新技术。
|
||||
|
||||
## 插件
|
||||
|
||||
| 插件 | 介绍 |
|
||||
| ---- | ---- |
|
||||
| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 |
|
||||
| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 |
|
||||
| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 |
|
||||
| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 |
|
||||
| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 |
|
||||
| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 |
|
||||
| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
|
||||
| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
|
||||
| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
|
||||
|
||||
| 插件 | 介绍 |
|
||||
| ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 |
|
||||
| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 |
|
||||
| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 |
|
||||
| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 |
|
||||
| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 |
|
||||
| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 |
|
||||
| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 |
|
||||
| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
|
||||
| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持 sass |
|
||||
| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code 使用的代码编辑器） |
|
||||
| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
|
||||
| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
|
||||
| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
使用 `yarn`：
|
||||
|
||||
使用 `pnpm`：
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
yarn create @fesjs/fes-app myapp
|
||||
pnpm create @fesjs/fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
pnpm i
|
||||
|
||||
# 运行
|
||||
yarn dev
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
使用 `npm`：
|
||||
|
||||
```bash
|
||||
# 创建模板
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
npm install
|
||||
|
||||
# 运行
|
||||
npm run dev
|
||||
@ -75,22 +78,21 @@ npm run dev
|
||||
|
||||
## 反馈
|
||||
|
||||
| Github Issue | 微信群 | Fes.js开源运营小助手 |
|
||||
| --- | --- | --- |
|
||||
| Github Issue | 微信群 | Fes.js 开源运营小助手 |
|
||||
| ------------------------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
||||
| [@fesjs/fes.js/issues](../../issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
|
||||
|
||||
|
||||
## 参与共建
|
||||
|
||||
我们非常欢迎社区同学能提交PR：
|
||||
我们非常欢迎社区同学能提交 PR：
|
||||
|
||||
1. fork项目!
|
||||
1. fork 项目!
|
||||
2. 创建你的功能分支: `git checkout -b my-new-feature`
|
||||
3. 本地提交新代码: `git commit -am 'Add some feature'`
|
||||
4. 推送本地到服务器分支: `git push origin my-new-feature`
|
||||
5. 创建一个PR
|
||||
5. 创建一个 PR
|
||||
|
||||
如果是发现Bug或者期望添加新功能，请提交[issue](../../issues)。
|
||||
如果是发现 Bug 或者期望添加新功能，请提交[issue](../../issues)。
|
||||
|
||||
## 社区活动
|
||||
|
||||
@ -100,6 +102,3 @@ npm run dev
|
||||
|
||||
经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
|
||||
请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@fesjs/create-fes-app",
|
||||
"version": "2.2.3",
|
||||
"version": "3.0.0-rc.4",
|
||||
"description": "create a app base on fes.js",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"bin",
|
||||
"templates"
|
||||
"templates/**/*"
|
||||
],
|
||||
"bin": {
|
||||
"create-fes-app": "bin/create-fes-app.js"
|
||||
@ -30,10 +30,10 @@
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/utils": "^2.0.4",
|
||||
"fs-extra": "^10.0.0",
|
||||
"@fesjs/utils": "3.0.0-rc.2",
|
||||
"fs-extra": "^11.1.1",
|
||||
"inquirer": "^7.3.3",
|
||||
"readline": "^1.3.0",
|
||||
"validate-npm-package-name": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,10 @@
|
||||
import { Generator } from '@fesjs/utils';
|
||||
|
||||
export default class AppGenerator extends Generator {
|
||||
constructor({
|
||||
cwd, args, path, targetDir, name
|
||||
}) {
|
||||
constructor({ cwd, args, path, targetDir, name }) {
|
||||
super({
|
||||
cwd,
|
||||
args
|
||||
args,
|
||||
});
|
||||
this.path = path;
|
||||
this.targetDir = targetDir;
|
||||
@ -17,10 +15,10 @@ export default class AppGenerator extends Generator {
|
||||
this.copyDirectory({
|
||||
context: {
|
||||
version: require('../../package.json').version,
|
||||
name: this.name
|
||||
name: this.name,
|
||||
},
|
||||
path: this.path,
|
||||
target: this.targetDir
|
||||
target: this.targetDir,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,12 +20,14 @@ export default async ({ cwd, args }) => {
|
||||
const result = validateProjectName(name);
|
||||
if (!result.validForNewPackages) {
|
||||
console.error(chalk.red(`Invalid project name: "${name}"`));
|
||||
result.errors && result.errors.forEach((err) => {
|
||||
console.error(chalk.red.dim(`Error: ${err}`));
|
||||
});
|
||||
result.warnings && result.warnings.forEach((warn) => {
|
||||
console.error(chalk.red.dim(`Warning: ${warn}`));
|
||||
});
|
||||
result.errors &&
|
||||
result.errors.forEach((err) => {
|
||||
console.error(chalk.red.dim(`Error: ${err}`));
|
||||
});
|
||||
result.warnings &&
|
||||
result.warnings.forEach((warn) => {
|
||||
console.error(chalk.red.dim(`Warning: ${warn}`));
|
||||
});
|
||||
throw new Error('Process exited');
|
||||
}
|
||||
if (fs.pathExistsSync(targetDir) && !args.merge) {
|
||||
@ -37,8 +39,8 @@ export default async ({ cwd, args }) => {
|
||||
{
|
||||
name: 'ok',
|
||||
type: 'confirm',
|
||||
message: 'Generate project in current directory?'
|
||||
}
|
||||
message: 'Generate project in current directory?',
|
||||
},
|
||||
]);
|
||||
if (!ok) {
|
||||
return null;
|
||||
@ -53,9 +55,9 @@ export default async ({ cwd, args }) => {
|
||||
choices: [
|
||||
{ name: 'Overwrite', value: 'overwrite' },
|
||||
{ name: 'Merge', value: 'merge' },
|
||||
{ name: 'Cancel', value: false }
|
||||
]
|
||||
}
|
||||
{ name: 'Cancel', value: false },
|
||||
],
|
||||
},
|
||||
]);
|
||||
if (!action) {
|
||||
return null;
|
||||
@ -77,9 +79,9 @@ export default async ({ cwd, args }) => {
|
||||
{ name: 'PC, suitable for management desk front-end applications', value: 'pc' },
|
||||
{ name: 'H5, suitable for mobile applications', value: 'h5' },
|
||||
{ name: 'Plugin, suitable for fes plugin', value: 'plugin' },
|
||||
{ name: 'Cancel', value: false }
|
||||
]
|
||||
}
|
||||
{ name: 'Cancel', value: false },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
if (template === 'pc' || template === 'h5') {
|
||||
@ -87,14 +89,14 @@ export default async ({ cwd, args }) => {
|
||||
cwd,
|
||||
args,
|
||||
targetDir,
|
||||
path: path.join(__dirname, `../templates/app/${template}`)
|
||||
path: path.join(__dirname, `../templates/app/${template}`),
|
||||
});
|
||||
await generator.run();
|
||||
console.log();
|
||||
console.log(chalk.green(`project ${projectName} created successfully, please execute the following command to use:`));
|
||||
console.log(`$ cd ${projectName}`);
|
||||
console.log('$ yarn');
|
||||
console.log('$ yarn dev');
|
||||
console.log('$ pnpm i');
|
||||
console.log('$ pnpm dev');
|
||||
console.log();
|
||||
} else if (template === 'plugin') {
|
||||
const generator = new PluginGenerator({
|
||||
@ -102,14 +104,14 @@ export default async ({ cwd, args }) => {
|
||||
args,
|
||||
targetDir,
|
||||
path: path.join(__dirname, '../templates/plugin'),
|
||||
name
|
||||
name,
|
||||
});
|
||||
await generator.run();
|
||||
console.log();
|
||||
console.log(chalk.green(`plugin ${projectName} created successfully, please execute the following command to use:`));
|
||||
console.log(`$ cd ${projectName}`);
|
||||
console.log('$ yarn');
|
||||
console.log('$ yarn dev');
|
||||
console.log('$ pnpm i');
|
||||
console.log('$ pnpm dev');
|
||||
console.log();
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
|
||||
module.exports = {
|
||||
extends: [
|
||||
'@webank/eslint-config-webank/vue.js'
|
||||
],
|
||||
extends: ['@webank/eslint-config-webank/vue.js'],
|
||||
globals: {
|
||||
// 这里填入你的项目需要的全局变量
|
||||
// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
|
||||
//
|
||||
// Vue: false
|
||||
__DEV__: false
|
||||
__DEV__: false,
|
||||
},
|
||||
rules: {
|
||||
'vue/comment-directive': 'off',
|
||||
'global-require': 'off',
|
||||
'import/no-unresolved': 'off',
|
||||
'no-restricted-syntax': 'off'
|
||||
}
|
||||
'no-restricted-syntax': 'off',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
// fes.config.js 只负责管理 cli 相关的配置
|
||||
import { defineBuildConfig } from '@fesjs/fes';
|
||||
import pxtoviewport from '@ttou/postcss-px-to-viewport';
|
||||
|
||||
|
||||
export default {
|
||||
export default defineBuildConfig({
|
||||
define: {
|
||||
// __VUE_OPTIONS_API__: true,
|
||||
// __VUE_PROD_DEVTOOLS__: false
|
||||
},
|
||||
request: {
|
||||
dataField: ''
|
||||
},
|
||||
html: {
|
||||
title: '拉夫德鲁'
|
||||
title: '拉夫德鲁',
|
||||
},
|
||||
targets: {
|
||||
chrome: '61',
|
||||
ios: '10',
|
||||
},
|
||||
extraPostCSSPlugins: [
|
||||
pxtoviewport({
|
||||
@ -27,10 +28,7 @@ export default {
|
||||
replace: true,
|
||||
exclude: [],
|
||||
landscape: false,
|
||||
landscapeUnit: 'vw'
|
||||
})
|
||||
landscapeUnit: 'vw',
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
port: 8000
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@ -1 +1,3 @@
|
||||
public-hoist-pattern[]=@babel/*
|
||||
public-hoist-pattern[]=@babel/*
|
||||
# 使用pnpm必须加上
|
||||
shamefully-hoist=true
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
3
packages/create-fes-app/templates/app/h5/.prettierrc.js
Normal file
3
packages/create-fes-app/templates/app/h5/.prettierrc.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
...require("@webank/eslint-config-webank/.prettierrc.js"),
|
||||
};
|
||||
@ -1,3 +1,3 @@
|
||||
# fes h5 模版
|
||||
|
||||
内部测试用，不对外发布
|
||||
移动端建议使用 webpack 构建
|
||||
|
||||
24
packages/create-fes-app/templates/app/h5/index.html
Normal file
24
packages/create-fes-app/templates/app/h5/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="format-detection" content="email=no" />
|
||||
<meta name="viewport"
|
||||
content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
|
||||
<title>
|
||||
<%= title %>
|
||||
</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="./logo.png">
|
||||
</head>
|
||||
|
||||
<body ontouchstart="">
|
||||
<div id="<%= mountElementId %>"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,54 +1,26 @@
|
||||
{
|
||||
"name": "@fesjs/template-h5",
|
||||
"version": "2.0.0",
|
||||
"version": "3.0.0",
|
||||
"description": "fes 移动端项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"dev": "fes dev"
|
||||
},
|
||||
"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-h5"
|
||||
},
|
||||
"author": "qlin",
|
||||
"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": "^1.0.2",
|
||||
"@ttou/postcss-px-to-viewport": "1.1.1"
|
||||
"@webank/eslint-config-webank": "1.2.7",
|
||||
"@ttou/postcss-px-to-viewport": "^2.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-icon": "^2.0.0",
|
||||
"@fesjs/plugin-request": "^2.0.0",
|
||||
"vue": "^3.2.37",
|
||||
"core-js": "^3.27.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-icon": "^3.0.0",
|
||||
"@fesjs/plugin-request": "^3.0.0",
|
||||
"@fesjs/builder-webpack": "^3.0.0",
|
||||
"vue": "^3.2.47",
|
||||
"core-js": "^3.29.1"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<meta name="format-detection" content="email=no"/>
|
||||
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="./logo.png">
|
||||
</head>
|
||||
<body ontouchstart="">
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,44 @@
|
||||
export const request = {
|
||||
errorConfig: {
|
||||
404() {
|
||||
console.log('to 404 page');
|
||||
}
|
||||
}
|
||||
};
|
||||
import { defineRuntimeConfig } from '@fesjs/fes';
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
request: {
|
||||
// API 前缀
|
||||
baseURL: '',
|
||||
dataHandler(data, response) {
|
||||
// 处理响应内容异常
|
||||
if (data.code !== '0') {
|
||||
if (data.code === '20000') {
|
||||
console.log('hello world');
|
||||
}
|
||||
throw new Error(response);
|
||||
}
|
||||
// 响应数据格式化
|
||||
return data?.result ? data.result : data;
|
||||
},
|
||||
// http 异常，和插件异常
|
||||
errorHandler(error) {
|
||||
if (error.response) {
|
||||
// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
|
||||
console.log(error.response.data);
|
||||
console.log(error.response.status);
|
||||
console.log(error.response.headers);
|
||||
} else if (error.request) {
|
||||
// 请求已经成功发起，但没有收到响应
|
||||
// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
|
||||
// 而在node.js中是 http.ClientRequest 的实例
|
||||
console.log(error.request);
|
||||
} else if (error.type) {
|
||||
// 插件异常
|
||||
console.log(error.msg);
|
||||
} else {
|
||||
// 发送请求时出了点问题
|
||||
console.log('Error', error.message);
|
||||
}
|
||||
console.log(error.config);
|
||||
},
|
||||
// 请求拦截器
|
||||
requestInterceptors: [],
|
||||
// 响应拦截器
|
||||
responseInterceptors: [],
|
||||
},
|
||||
});
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
// 手机号、身份证号 等的校验
|
||||
// 数字分割
|
||||
|
||||
|
||||
export function resetContainerHeight(dom) {
|
||||
const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;
|
||||
|
||||
@ -18,12 +17,11 @@ export function resetContainerHeight(dom) {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
export function resetInputBlur() {
|
||||
const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d.]+)/i);
|
||||
if (!isWechat) return;
|
||||
const wechatVersion = isWechat[1];
|
||||
const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
|
||||
const version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
|
||||
|
||||
// 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口
|
||||
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
|
||||
|
||||
@ -3,18 +3,16 @@
|
||||
fes & 拉夫德鲁 <br />
|
||||
<fes-icon :spin="true" class="one-icon" type="smile" @click="clickIcon" />
|
||||
<div v-if="loading" class="loading">loading</div>
|
||||
<div v-else class="data">{{data}}</div>
|
||||
<div v-else class="data">{{ data }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"title": "首页",
|
||||
"layout": "false"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter, useRequest } from '@fesjs/fes';
|
||||
import { useRouter, useRequest, defineRouteMeta } from '@fesjs/fes';
|
||||
|
||||
defineRouteMeta({
|
||||
title: '首页',
|
||||
});
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -34,15 +32,15 @@ export default {
|
||||
data,
|
||||
fes,
|
||||
rotate,
|
||||
clickIcon
|
||||
clickIcon,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/styles/mixins/hairline";
|
||||
@import "~@/styles/mixins/hover";
|
||||
@import '~@/styles/mixins/hairline';
|
||||
@import '~@/styles/mixins/hover';
|
||||
|
||||
div {
|
||||
padding: 20px;
|
||||
@ -56,7 +54,7 @@ div {
|
||||
.hover();
|
||||
}
|
||||
.onepiece {
|
||||
.hairline("top");
|
||||
.hairline('top');
|
||||
background: url('../images/male.png');
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
<template>
|
||||
<div>{{fes}}</div>
|
||||
<div>{{ fes }}</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"title": "onepiece",
|
||||
"layout": "true"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { defineRouteMeta } from '@fesjs/fes';
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineRouteMeta({
|
||||
title: 'one piece',
|
||||
});
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const fes = ref('fes upgrade to vue3');
|
||||
return {
|
||||
fes
|
||||
fes,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -26,8 +26,7 @@ a {
|
||||
|
||||
/* 适配 iPhone X 顶部填充*/
|
||||
@supports (top: env(safe-area-inset-top)){
|
||||
body,
|
||||
.alien-screen-header {
|
||||
body {
|
||||
padding-top: constant(safe-area-inset-top, 40px);
|
||||
padding-top: env(safe-area-inset-top, 40px);
|
||||
padding-top: var(safe-area-inset-top, 40px);
|
||||
@ -36,10 +35,9 @@ a {
|
||||
|
||||
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
|
||||
@supports (bottom: env(safe-area-inset-bottom)){
|
||||
body,
|
||||
.alien-screen-footer {
|
||||
body {
|
||||
padding-bottom: constant(safe-area-inset-bottom, 20px);
|
||||
padding-bottom: env(safe-area-inset-bottom, 20px);
|
||||
padding-top: var(safe-area-inset-bottom, 20px);
|
||||
padding-bottom: var(safe-area-inset-bottom, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
"outDir": "build/dist",
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
"lib": ["esnext", "dom"],
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom"
|
||||
],
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"jsx": "preserve",
|
||||
@ -14,24 +17,28 @@
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true,
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"experimentalDecorators": true,
|
||||
"strict": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@@/*": ["./src/.fes/*"]
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
],
|
||||
"@@/*": [
|
||||
"./src/.fes/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"tests/**/*",
|
||||
"test/**/*",
|
||||
"__test__/**/*",
|
||||
"typings/**/*",
|
||||
"config/**/*",
|
||||
".eslintrc.js",
|
||||
".stylelintrc.js",
|
||||
".prettierrc.js"
|
||||
"*.js",
|
||||
".fes*.js"
|
||||
],
|
||||
"exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
|
||||
}
|
||||
"exclude": [
|
||||
"build",
|
||||
"dist",
|
||||
"scripts",
|
||||
"webpack",
|
||||
"jest",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@ -2,13 +2,10 @@ module.exports = {
|
||||
extends: ['@webank/eslint-config-webank/vue.js'],
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/*.{j,t}s?(x)',
|
||||
'**/tests/unit/**/*.spec.{j,t}s?(x)'
|
||||
]
|
||||
}
|
||||
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
|
||||
},
|
||||
],
|
||||
env: {
|
||||
jest: true
|
||||
}
|
||||
jest: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
// .fes.js 只负责管理编译时配置，只能使用plain Object
|
||||
import { defineBuildConfig } from '@fesjs/fes';
|
||||
|
||||
|
||||
export default {
|
||||
publicPath: './',
|
||||
export default defineBuildConfig({
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["*"],
|
||||
manager: ["/"]
|
||||
}
|
||||
admin: ['*'],
|
||||
manager: ['/'],
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
title: 'Fes.js',
|
||||
footer: 'Created by MumbleFE',
|
||||
navigation: 'mixin',
|
||||
multiTabs: false,
|
||||
menus: [{
|
||||
name: 'index'
|
||||
}]
|
||||
},
|
||||
devServer: {
|
||||
port: 8000
|
||||
menus: [
|
||||
{
|
||||
name: 'index',
|
||||
},
|
||||
],
|
||||
},
|
||||
enums: {
|
||||
status: [['0', '无效的'], ['1', '有效的']]
|
||||
}
|
||||
};
|
||||
status: [
|
||||
['0', '无效的'],
|
||||
['1', '有效的'],
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// .fes.js 只负责管理编译时配置，只能使用plain Object
|
||||
import { defineBuildConfig } from '@fesjs/fes';
|
||||
|
||||
|
||||
export default {
|
||||
publicPath: ''
|
||||
};
|
||||
export default defineBuildConfig({
|
||||
publicPath: './',
|
||||
});
|
||||
|
||||
@ -1 +1,3 @@
|
||||
public-hoist-pattern[]=@babel/*
|
||||
public-hoist-pattern[]=@babel/*
|
||||
# 使用pnpm必须加上
|
||||
shamefully-hoist=true
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
3
packages/create-fes-app/templates/app/pc/.prettierrc.js
Normal file
3
packages/create-fes-app/templates/app/pc/.prettierrc.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
...require("@webank/eslint-config-webank/.prettierrc.js"),
|
||||
};
|
||||
@ -1,3 +1 @@
|
||||
# fes 模版
|
||||
|
||||
内部测试用，不对外发布
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>fes.js</title>
|
||||
<title>
|
||||
<%= title %>
|
||||
</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="./logo.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="<%= mountElementId %>"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@fesjs/template",
|
||||
"version": "2.0.0",
|
||||
"version": "3.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
@ -9,51 +9,22 @@
|
||||
"dev": "fes dev",
|
||||
"test:unit": "fes test:unit"
|
||||
},
|
||||
"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": "^1.0.2"
|
||||
"@webank/eslint-config-webank": "1.2.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-access": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^4.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0",
|
||||
"@fesjs/plugin-enums": "^2.0.0",
|
||||
"@fesjs/fes-design": "^0.5.0",
|
||||
"vue": "^3.2.37",
|
||||
"core-js": "^3.27.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-access": "^3.0.0",
|
||||
"@fesjs/plugin-layout": "^5.0.0",
|
||||
"@fesjs/plugin-model": "^3.0.0",
|
||||
"@fesjs/plugin-enums": "^3.0.0",
|
||||
"@fesjs/fes-design": "^0.7.23",
|
||||
"@fesjs/builder-webpack": "^3.0.0",
|
||||
"vue": "^3.2.47",
|
||||
"core-js": "^3.29.1"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
|
||||
|
||||
import { access } from '@fesjs/fes';
|
||||
import PageLoading from '@/components/PageLoading';
|
||||
import UserCenter from '@/components/UserCenter';
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
action() {
|
||||
const { setRole } = access;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
setRole('admin');
|
||||
// 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
|
||||
resolve({
|
||||
userName: '李雷'
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const layout = {
|
||||
customHeader: <UserCenter />
|
||||
};
|
||||
25
packages/create-fes-app/templates/app/pc/src/app.jsx
Normal file
25
packages/create-fes-app/templates/app/pc/src/app.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { access, defineRuntimeConfig } from '@fesjs/fes';
|
||||
|
||||
import PageLoading from '@/components/pageLoading.vue';
|
||||
import UserCenter from '@/components/userCenter.vue';
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
beforeRender: {
|
||||
loading: <PageLoading />,
|
||||
action() {
|
||||
const { setRole } = access;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
setRole('admin');
|
||||
// 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
|
||||
resolve({
|
||||
userName: '李雷',
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
renderCustom: () => <UserCenter />,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<f-spin size="large" stroke="#5384ff" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { FSpin } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FSpin,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.page-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="right">{{initialState.userName}}</div>
|
||||
<div class="right">{{ initialState.userName }}</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useModel } from '@fesjs/fes';
|
||||
@ -8,9 +8,9 @@ export default {
|
||||
setup() {
|
||||
const initialState = useModel('@@initialState');
|
||||
return {
|
||||
initialState
|
||||
initialState,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scope>
|
||||
@ -1,21 +1,12 @@
|
||||
<template>
|
||||
<div style="padding: 32px;">
|
||||
hello world
|
||||
</div>
|
||||
<div style="padding: 32px">hello world</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import { defineRouteMeta } from '@fesjs/fes';
|
||||
|
||||
<config>
|
||||
{
|
||||
"name": "index",
|
||||
"title": "首页"
|
||||
}
|
||||
</config>
|
||||
defineRouteMeta({
|
||||
name: 'index',
|
||||
title: '首页',
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
"outDir": "build/dist",
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
"lib": ["esnext", "dom"],
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom"
|
||||
],
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"jsx": "preserve",
|
||||
@ -14,24 +17,30 @@
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true,
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"experimentalDecorators": true,
|
||||
"strict": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@@/*": ["./src/.fes/*"]
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
],
|
||||
"@@/*": [
|
||||
"./src/.fes/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"*.js",
|
||||
".fes*.js",
|
||||
"src/**/*",
|
||||
"tests/**/*",
|
||||
"test/**/*",
|
||||
"__test__/**/*",
|
||||
"typings/**/*",
|
||||
"config/**/*",
|
||||
".eslintrc.js",
|
||||
".stylelintrc.js",
|
||||
".prettierrc.js"
|
||||
"config/**/*"
|
||||
],
|
||||
"exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
|
||||
}
|
||||
"exclude": [
|
||||
"build",
|
||||
"dist",
|
||||
"scripts",
|
||||
"webpack",
|
||||
"jest",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@ -1,14 +1,11 @@
|
||||
|
||||
module.exports = {
|
||||
extends: [
|
||||
'@webank/eslint-config-webank/vue.js'
|
||||
],
|
||||
extends: ['@webank/eslint-config-webank/vue.js'],
|
||||
globals: {
|
||||
// 这里填入你的项目需要的全局变量
|
||||
// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
|
||||
//
|
||||
// Vue: false
|
||||
__DEV__: false
|
||||
__DEV__: false,
|
||||
},
|
||||
rules: {
|
||||
'vue/comment-directive': 'off',
|
||||
@ -16,9 +13,9 @@ module.exports = {
|
||||
'import/no-unresolved': 'off',
|
||||
'no-restricted-syntax': 'off',
|
||||
'no-undefined': 'off',
|
||||
'vue/valid-template-root': 'off'
|
||||
'vue/valid-template-root': 'off',
|
||||
},
|
||||
env: {
|
||||
jest: true
|
||||
}
|
||||
jest: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
module.exports = {
|
||||
copy: ['runtime']
|
||||
copy: ['runtime'],
|
||||
};
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
{
|
||||
"name": "fes-plugin-{{{name}}}",
|
||||
"version": "2.0.0",
|
||||
"version": "3.0.0",
|
||||
"description": "一个fes.js插件",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"README.md"
|
||||
"README.md",
|
||||
"types.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node scripts/build.js --watch",
|
||||
@ -18,20 +19,20 @@
|
||||
"dependencies": {
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@webank/eslint-config-webank": "0.3.1",
|
||||
"@babel/core": "^7.21.3",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@webank/eslint-config-webank": "1.2.7",
|
||||
"chalk": "^4.1.2",
|
||||
"chokidar": "^3.5.2",
|
||||
"deepmerge": "^4.2.2",
|
||||
"fs-extra": "^10.0.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"husky": "^4.3.0",
|
||||
"lint-staged": "^10.4.0",
|
||||
"yargs-parser": "^20.2.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.2.37"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"vue": "^3.2.47"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts}": [
|
||||
@ -43,5 +44,6 @@
|
||||
"pre-commit": "lint-staged",
|
||||
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
||||
}
|
||||
}
|
||||
},
|
||||
"typings": "./types.d.ts"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user