Merge branch 'vue3' of https://github.com/WeBankFinTech/fes.js into vue3

2025-04-05 19:41:57 +08:00 · 2021-06-21 17:18:09 +08:00 · 2021-06-21 17:18:09 +08:00 · 4d52e9194a
commit 4d52e9194a
parent 4c53932ae1 51531d3782
15 changed files with 122 additions and 65 deletions
--- a/docs/zh/guide/css.md
+++ b/docs/zh/guide/css.md
@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
 </style>
 ```

+## CSS Modules
+支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
+```vue
+<style module>
+.layout-content {
+  max-width: 1000px;
+}
+```
+如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
+```js
+import style from '@/styles/index.module.css'
+console.log(style)
+```
+
 ## CSS 预处理器
 Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。
--- a/docs/zh/reference/config/README.md
+++ b/docs/zh/reference/config/README.md
@ -296,6 +296,12 @@ export default {

    配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。

+## router
+
+- 类型： `object`
+- 默认值： `{ mode: 'hash' }`
+- 详情： 配置路由，具体请查看指南中关于路由的介绍
+
 ## singular
 - 类型： `boolean`
 - 默认值： `false`
--- a/docs/zh/reference/plugin/plugins/layout.md
+++ b/docs/zh/reference/plugin/plugins/layout.md
@ -19,7 +19,7 @@
 ```js
 export default {
    layout: {
-        navigation: 'side
+        navigation: 'side'
    }
 }
 ```
@ -261,4 +261,4 @@ export const access = {
    }
 };

-```
+```
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.29",
  "changelog": {
    "repo": "WeBankFinTech/fes.js",
    "cacheDir": ".changelog",
--- a/packages/create-fes-app/package.json
+++ b/packages/create-fes-app/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/create-fes-app",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.27",
  "description": "create a app base on fes.js",
  "main": "lib/index.js",
  "files": [
--- a/packages/fes-plugin-qiankun/package.json
+++ b/packages/fes-plugin-qiankun/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-qiankun",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.27",
  "description": "@fesjs/plugin-qiankun",
  "main": "lib/index.js",
  "files": [
--- a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
+++ b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
@ -1,4 +1,4 @@
-import { createMemoryHistory } from '@@/core/coreExports';
+import { createMemoryHistory, getHistory } from '@@/core/coreExports';
 import qiankunRender, { clientRenderOptsStack, history } from './lifecycles';


@ -14,16 +14,18 @@ export function modifyClientRenderOpts(memo) {
    };
 }

-export function modifyHistroy(memo) {
+export function modifyCreateHistroy(memo) {
    if (history.url) {
-        const memoHistroy =  createMemoryHistory();
-        memoHistroy.push(history.url)
-        return memoHistroy
+        return createMemoryHistory
    }
    return memo;
 }

 export function onRouterCreated({ router }) {
+     if(history.url) {
+        const memoryHistory = getHistory();
+        memoryHistory.push(history.url)
+    }
    if(history.onRouterInit){
        history.onRouterInit(router)
    }
--- a/packages/fes-plugin-request/package.json
+++ b/packages/fes-plugin-request/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-request",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.27",
  "description": "@fesjs/plugin-request",
  "main": "lib/index.js",
  "files": [
@ -31,7 +31,7 @@
    "vue": "^3.0.5"
  },
  "dependencies": {
-    "axios": "0.21.1",
-    "@fesjs/compiler": "^2.0.0-rc.5"
+    "@fesjs/compiler": "^2.0.0-rc.5",
+    "axios": "0.21.1"
  }
 }
--- a/packages/fes-preset-built-in/package.json
+++ b/packages/fes-preset-built-in/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/preset-built-in",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.29",
  "description": "@fesjs/preset-built-in",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
@ -21,45 +21,62 @@ function createRules({
    options,
    browserslist
 }) {
+    function applyLoaders(rule, isCSSModules) {
+        if (isDev) {
+            rule.use('extra-css-loader')
+                .loader(require.resolve('style-loader'))
+                .options({
+                });
+        } else {
+            rule.use('extra-css-loader')
+                .loader(require('mini-css-extract-plugin').loader)
+                .options({
+                });
+        }
+
+        rule.use('css-loader')
+            .loader(require.resolve('css-loader'))
+            .options(
+                deepmerge(
+                    {
+                        importLoaders: 1,
+                        // https://webpack.js.org/loaders/css-loader/#onlylocals
+                        ...(isCSSModules
+                            ? {
+                                modules: {
+                                    localIdentName: '[local]___[hash:base64:5]'
+                                }
+                            }
+                            : {})
+                    },
+                    config.cssLoader || {}
+                )
+            );
+
+        rule.use('postcss-loader')
+            .loader(require.resolve('postcss-loader'))
+            .options(deepmerge({
+                postcssOptions: () => ({
+                    plugins: [
+                        // https://github.com/luisrudge/postcss-flexbugs-fixes
+                        require('postcss-flexbugs-fixes'),
+                        require('postcss-safe-parser'),
+                        [require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
+                        ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
+                    ]
+                })
+            }, config.postcssLoader || {}));
+
+        if (loader) {
+            rule.use(loader)
+                .loader(require.resolve(loader))
+                .options(options);
+        }
+    }
+
    const rule = webpackConfig.module.rule(lang).test(test);
-
-    if (isDev) {
-        rule.use('extra-css-loader')
-            .loader(require.resolve('style-loader'))
-            .options({
-            });
-    } else {
-        rule.use('extra-css-loader')
-            .loader(require('mini-css-extract-plugin').loader)
-            .options({
-            });
-    }
-
-    rule.use('css-loader')
-        .loader(require.resolve('css-loader'))
-        .options({
-            ...config.cssLoader
-        });
-
-    rule.use('postcss-loader')
-        .loader(require.resolve('postcss-loader'))
-        .options(deepmerge({
-            postcssOptions: () => ({
-                plugins: [
-                    // https://github.com/luisrudge/postcss-flexbugs-fixes
-                    require('postcss-flexbugs-fixes'),
-                    require('postcss-safe-parser'),
-                    [require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
-                    ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
-                ]
-            })
-        }, config.postcssLoader || {}));
-
-    if (loader) {
-        rule.use(loader)
-            .loader(require.resolve(loader))
-            .options(options);
-    }
+    applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), true);
+    applyLoaders(rule.oneOf('css'), false);
 }

 export default function createCssWebpackConfig({
@ -102,9 +119,7 @@ export default function createCssWebpackConfig({
    if (!isDev) {
        webpackConfig.optimization
            .minimizer('css')
-            .use(require.resolve('css-minimizer-webpack-plugin'), [{
-                sourceMap: config.devtool !== false
-            }]);
+            .use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
    }

    return (options) => {
--- a/packages/fes-preset-built-in/src/plugins/generateFiles/core/plugin/index.js
+++ b/packages/fes-preset-built-in/src/plugins/generateFiles/core/plugin/index.js
@ -28,7 +28,7 @@ export default function (api) {
                // 修改路由
                'patchRoutes',
                // 修改histror
-                'modifyHistroy',
+                'modifyCreateHistroy',
                // 生成router时触发
                'onRouterCreated'
            ]
--- a/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
+++ b/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
@ -20,11 +20,15 @@ export const createRouter = (routes) => {
  if (router) {
    return router;
  }
-  history = plugin.applyPlugins({
-    key: 'modifyHistroy',
+  const createHistory = plugin.applyPlugins({
+    key: 'modifyCreateHistroy',
    type: ApplyPluginsType.modify,
-    initialValue: {{{ CREATE_HISTORY }}}(ROUTER_BASE),
+    args: {
+      base: ROUTER_BASE
+    },
+    initialValue: {{{ CREATE_HISTORY }}},
  });
+  history = createHistory(ROUTER_BASE)
  router = createVueRouter({
    history,
    routes
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@ -80,4 +80,7 @@ export default {
        strict: true,
    },
    dynamicImport: true,
+    extraBabelPlugins: [
+        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
+    ]
 };
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@ -1,5 +1,7 @@
 <template>
-    <div class="haizekuo">
+    <div :class="$style.red">
+        <a-input placeholder="请输入。。。" />
+        <a-button type="primary">Primary</a-button>
        <div>国际化 {{t("test")}}</div>
        fes & 拉夫德鲁 <br />
        <access :id="accessId"> accessOnepicess1 <input /> </access>
@ -22,8 +24,16 @@ import { ref, onMounted } from 'vue';
 import {
    useAccess, useRouter, useI18n, locale, enums, request
 } from '@fesjs/fes';
+import { Button, Input } from 'ant-design-vue';

 export default {
+    components: {
+        [Button.name]: Button,
+        [Input.name]: Input,
+    },
+    mounted(){
+        console.log("$style:", this.$style)
+    },
    setup() {
        const fes = ref('fes upgrade to vue3');
        const accessOnepicess = useAccess('/onepiece1');
@ -123,8 +133,11 @@ export default {
 };
 </script>

-<style scoped>
-.haizekuo {
-    /* background: url('../images/icon.png'); */
+<style module>
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
 }
 </style>
--- a/packages/fes/package.json
+++ b/packages/fes/package.json
@ -1,6 +1,6 @@
 {
    "name": "@fesjs/fes",
-    "version": "2.0.0-rc.26",
+    "version": "2.0.0-rc.29",
    "description": "一个好用的前端管理台快速开发框架",
    "preferGlobal": true,
    "scripts": {
@ -40,7 +40,7 @@
    ],
    "dependencies": {
        "@fesjs/compiler": "^2.0.0-rc.5",
-        "@fesjs/preset-built-in": "^2.0.0-rc.26",
+        "@fesjs/preset-built-in": "^2.0.0-rc.29",
        "@fesjs/runtime": "^2.0.0-rc.5",
        "@umijs/utils": "3.3.3",
        "resolve-cwd": "^3.0.0"