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

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` 插件的形式支持。

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`

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 = {
     }
 };
 
-```
+```

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",

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": [

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": [

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();
+        return createMemoryHistory
-        memoHistroy.push(history.url)
-        return memoHistroy
     }
     return memo;
 }
 
 export function onRouterCreated({ router }) {
+     if(history.url) {
+        const memoryHistory = getHistory();
+        memoryHistory.push(history.url)
+    }
     if(history.onRouterInit){
         history.onRouterInit(router)
     }

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"
   }
 }

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",

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);
-
+    applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), true);
-    if (isDev) {
+    applyLoaders(rule.oneOf('css'), false);
-        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);
-    }
 }
 
 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'), [{
+            .use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
-                sourceMap: config.devtool !== false
-            }]);
     }
 
     return (options) => {

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'
             ]

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({
+  const createHistory = plugin.applyPlugins({
-    key: 'modifyHistroy',
+    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

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'],
+    ]
 };

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>
+<style module>
-.haizekuo {
+.red {
-    /* background: url('../images/icon.png'); */
+  color: red;
+}
+.bold {
+  font-weight: bold;
 }
 </style>

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"