UMIJS3剖析

于 2024-09-13 19:23:03 发布
阅读量601 收藏 6
点赞数 17
分类专栏： React.js 文章标签： 前端 react.js 前端框架 reactjs react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588441/article/details/142218413
版权

UMIJS3剖析

约定式路由

  • umijs是可扩展的企业级前端应用框架。Umi 以路由为基础的，并以此进行功能扩展。然后配以生命周期完善的插件体系，支持各种功能扩展和业务需求
  • 约定式路由
  • umi

初始化项目

mkdir hs-umi3
npm init -y
cnpm i umi -D

运行项目

pages\index.js

src\pages\index.js

import React from 'react';
const Index = ()=><div>首页</div>
export default Index
pages\profile.js

src\pages\profile.js

import React from 'react';
const Profile = ()=><div>个人中心</div>
export default Profile;
pages\user_layout.js

src\pages\user_layout.js

import React from 'react';
const UserLayout = (props)=>(
    <div>
        <ul>
            <li><a href="/user/add">添加用户</a></li>
            <li><a href="/user/list">用户列表</a></li>
        </ul>
        <div>{props.children}</div>
    </div>
)
export default UserLayout;
pages\user\add.js

src\pages\user\add.js

import React from 'react';
const UserAdd = ()=><div>添加用户</div>
export default UserAdd;
pages\user\list.js

src\pages\user\list.js

import React from 'react';
const UserList = ()=><div>用户列表</div>
export default UserList;
package.json

package.json

  "scripts": {
    "dev": "umi dev"
  }
启动
npm run dev

调试

  • debugging
    • --inspect-brk 指定在第一行就设置断点。也就是说，一开始运行，就是暂停的状态

image-20240909200335668

NPM调试

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via NPM",
            "request": "launch",
            "runtimeArgs": [
                "run-script",
                "dev"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }
    ]
}

attach调试

package.json

package.json

  "scripts": {
    "dev": "umi dev",
+   "debug": "node --inspect-brk=9229  ./node_modules/_umi@3.3.1@umi/bin/umi.js dev"
  }
launch.json

.vscode\launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to UMI",
            "port": 9230,
            "request": "attach",
            "type": "node"
        }
    ]
}

.vscode\launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Remote",
            "port": 9230,
            "request": "attach",
            "type": "node"
        }
    ]
}

运行时

安装

cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin  babel-loader @babel/core @babel/preset-env @babel/preset-react webpack-dev-middleware express mustache cnpm react react-dom react-router-dom -S

.umi2\core\history.js

src.umi2\core\history.js

import { createBrowserHistory } from 'history';
let history = createBrowserHistory();
export default history;

.umi2\core\routes.js

src.umi2\core\routes.js

export function getRoutes() {
  const routes = [
    {
      "path": "/",
      "exact": true,
      "component": require('@/pages/index.js').default
    },
    {
      "path": "/profile",
      "exact": true,
      "component": require('@/pages/profile.js').default
    },
    {
      "path": "/user",
      "routes": [
        {
          "path": "/user/add",
          "exact": true,
          "component": require('@/pages/user/add.js').default
        },
        {
          "path": "/user/list",
          "exact": true,
          "component": require('@/pages/user/list.js').default
        }
      ],
      "component": require('@/pages/user/_layout.js').default
    }
  ];
  return routes;
}

.umi2\umi.js

src.umi2\umi.js

import React from 'react';
import { render } from 'react-dom';
import { Router,Route,Switch } from 'react-router-dom';
import history from './core/history';
import { getRoutes } from './core/routes';
function renderRoutes(routes){
  return routes.map(({path,exact,component:Component,routes:childRoutes=[]},index)=>(
    <Route key={index} path={path} exact={exact} render={
      props=>(
        <Component {...props}>
          <Switch>
            {renderRoutes(childRoutes)}
          </Switch>
        </Component>
      )
    }/>
  ))
}
// 渲染Route有三种方式 component(不能传参) render children
function renderClient(opts) {
  render(
  <Router history={opts.history}>
   {renderRoutes(opts.routes)}
  </Router>
  ,document.getElementById(opts.rootElement));
}
const opts = {
  routes:getRoutes(),
  history,
  rootElement: 'root'
}
renderClient(opts);

src.umi2\index.html

src.umi2\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>umi3</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const cwd = process.cwd();
module.exports = {
  mode: "development",
  entry:'./src/.umi2/umi.js',
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    publicPath:'/'
  },
  devtool: false,
  resolve:{
    alias:{
      '@':path.join(cwd,'src')
    }
  },
  devServer:{
    historyApiFallback:{
      index:'index.html'
    }
  },
  module:{
    rules:[
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets:['@babel/preset-env','@babel/preset-react']
        },
        exclude:/node_modules/
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/.umi2/index.html'
    })
  ]
};

启动

// webpack5启动的方式
webpack serve 

// webapck4则使用webpack-dev-serve

编译时插件

bin\umi.js

bin\umi.js

#!/usr/bin/env node
require('../lib/cli');

lib\cli.js

lib\cli.js

let Service = require('./Service');
let dev = require('./plugins/commands/dev');
(async()=>{
    const service = new Service({
        plugins:[{id:'dev',apply:dev}]
    });
    await service.run({name: 'dev'});
})();

lib\PluginAPI.js

lib\PluginAPI.js

class PluginAPI {
    constructor(opts) {
        this.id = opts.id;
        this.service = opts.service;
    }
    registerCommand(command) {
      const { name } = command;
      this.service.commands[name] = command;
    }
}
module.exports = PluginAPI;

lib\Service.js

Service就是插件的核心了，也就是微内核

lib\Service.js

const PluginAPI = require('./PluginAPI');
class Service {
  constructor(opts) {
    this.commands={};
    this.plugins = opts.plugins;
  }
  async init() {
    for(let plugin of this.plugins){
      const pluginAPI = new PluginAPI({id:plugin.id,service: this });
      plugin.apply(pluginAPI);
    }
  }
  async run(args) {
    this.init();
    return this.runCommand(args);
  }
  async runCommand({name}) {
    const command = this.commands[name];
    const { fn } = command;
    return fn();
  }
}
module.exports = Service;

commands\dev.js

lib\plugins\commands\dev.js

let Server = require('../../Server');
const dev = (api) => {
  api.registerCommand({
    name: "dev",
    description: "启动开发服务器",
    fn: async function () {
      new Server().start();
    }
  });
};
module.exports = dev;

lib\Server.js

lib\Server.js

let express = require('express');
let http = require('http');
class Service {
    constructor(){
        this.app = express();
    }
    async start() {
        this.listeningApp = http.createServer(this.app);
        this.listeningApp.listen(8000, () => {
            console.log(`http server started at port 8000`);
        })
    }
}
module.exports = Service;

启动服务

node ./bin/umi.js

生成临时目录

lib\Service.js

lib\Service.js

const PluginAPI = require('./PluginAPI');
+const {AsyncParallelHook} = require('tapable');
class Service {
  constructor(opts) {
    this.commands={};
    this.plugins = opts.plugins;
+    this.hooksByPluginId = {};
+    this.hooks = {};
  }
  async init() {
    for(let plugin of this.plugins){
      const pluginAPI = new PluginAPI({id:plugin.id,service: this });
+      pluginAPI.onGenerateFiles=(fn)=>{
+        pluginAPI.register({pluginId:plugin.id,key:"onGenerateFiles",fn})
+      }
      plugin.apply(pluginAPI);
    }

+    Object.keys(this.hooksByPluginId).forEach((id) => {
+      const hooks = this.hooksByPluginId[id];
+      hooks.forEach((hook) => {
+        const { key } = hook;
+        hook.pluginId = id;
+        this.hooks[key] = (this.hooks[key] || []).concat(hook);
+      });
+    });
  }
+  async applyPlugins(opts) {
+    const hooks = this.hooks[opts.key] || [];
+    const tEvent = new AsyncParallelHook(["_"]);
+    for (const hook of hooks) {
+      tEvent.tapPromise({ name: hook.pluginId },hook.fn);
+    }
+    return await tEvent.promise();
+  }
  async run(args) {
    this.init();
    return this.runCommand(args);
  }
  async runCommand({name}) {
    const command = this.commands[name];
    const { fn } = command;
    return fn();
  }
}
module.exports = Service;

lib\PluginAPI.js

lib\PluginAPI.js

class PluginAPI {
    constructor(opts) {
        this.id = opts.id;
        this.service = opts.service;
    }
    registerCommand(command) {
      const { name } = command;
      this.service.commands[name] = command;
    }
+   register(hook) {
+      this.service.hooksByPluginId[this.id] = (
+        this.service.hooksByPluginId[this.id] || []
+      ).concat(hook);
+   }
}
module.exports = PluginAPI;

lib\cli.js

lib\cli.js

let Service = require('./Service');
let dev = require('./plugins/commands/dev');
+let history = require('./plugins/generateFiles/history');
+let routes = require('./plugins/generateFiles/routes');
+let umi = require('./plugins/generateFiles/umi');
(async()=>{
    const service = new Service({
        plugins:[
            {id:'dev',apply:dev},
+           {id:'history',apply:history},
+           {id:'routes',apply:routes},
+           {id:'umi',apply:umi}
        ]
    });
    await service.run({name: 'dev'});
})();

webpack.config.js

webpack.config.js

module.exports = {
   mode: "development",
+  entry:'./src/.umi3/umi.js'
}

lib\plugins\commands\dev.js

lib\plugins\commands\dev.js

let Server = require('../../Server');
const dev = (api) => {
  api.registerCommand({
    name: "dev",
    description: "启动开发服务器",
    fn: async function () {
+      await api.service.applyPlugins({
+        key: 'onGenerateFiles'
+      });
      new Server().start();
    }
  });
};

module.exports = dev;

lib\getPaths.js

lib\getPaths.js

const {existsSync,statSync} = require('fs');
const {join} = require('path');
function isDirectoryAndExist(path) {
    return existsSync(path) && statSync(path).isDirectory();
}
let cwd = process.cwd();
let absSrcPath = cwd;
if (isDirectoryAndExist(join(cwd, 'src'))) {
    absSrcPath = join(cwd, 'src');
}
const absPagesPath=join(absSrcPath,'pages');
const tmpDir = '.umi3';
const absTmpPath = join(absSrcPath, tmpDir);
module.exports = {
    absSrcPath,
    absPagesPath,
    tmpDir,
    absTmpPath
}

lib\utils.js

lib\utils.js

function winPath(path) {
    return path.replace(/\\/g, "/");
}
exports.winPath = winPath;

lib\writeTmpFile.js

lib\writeTmpFile.js

let mkdirp = require('mkdirp');
let {writeFileSync} = require('fs');
let {dirname,join} = require('path');
const {absTmpPath} = require('./getPaths');
function writeTmpFile({path,content}) {
    const absPath = join(absTmpPath, path);
    mkdirp.sync(dirname(absPath));
    writeFileSync(absPath, content, 'utf8');
}
module.exports = writeTmpFile;

generateFiles\history.js

lib\plugins\generateFiles\history.js

let { readFileSync } = require("fs");
let { join } = require("path");
let writeTmpFile = require("../../writeTmpFile");
let Mustache = require("mustache");

const plugin = (api) => {
  api.onGenerateFiles(async () => {
    const historyTpl = readFileSync(join(__dirname, "history.tpl"), "utf8");
    writeTmpFile({
      path: "core/history.js",
      content: Mustache.render(historyTpl),
    });
  });
};

module.exports = plugin;

generateFiles\history.tpl

lib\plugins\generateFiles\history.tpl

import { createBrowserHistory } from 'history';
let history = createBrowserHistory();
export default history;

generateFiles\umi.js

lib\plugins\generateFiles\umi.js

let { readFileSync } = require("fs");
let { join } = require("path");
let writeTmpFile = require("../../writeTmpFile");
let Mustache = require("mustache");

const plugin = (api) => {
  api.onGenerateFiles(async () => {
    const umiTpl = readFileSync(join(__dirname, "umi.tpl"), "utf8");
    writeTmpFile({
      path: "umi.js",
      content: Mustache.render(umiTpl),
    });
  });
};
module.exports = plugin;

generateFiles\umi.tpl

lib\plugins\generateFiles\umi.tpl

import React from 'react';
import { render } from 'react-dom';
import { Router,Route,Switch } from 'react-router-dom';
import history from './core/history';
import { getRoutes } from './core/routes';
function renderRoutes(routes){
  return routes.map(({path,exact,component:Component,routes:childRoutes=[]},index)=>(
    <Route key={index} path={path} exact={exact} render={
      props=>(
        <Component {...props}>
          <Switch>
            {renderRoutes(childRoutes)}
          </Switch>
        </Component>
      )
    }/>
  ))
}
function renderClient(opts) {
  render(
  <Router history={opts.history}>
   {renderRoutes(opts.routes)}
  </Router>
  ,document.getElementById(opts.rootElement));
}
const opts = {
  routes:getRoutes(),
  history,
  rootElement: 'root'
}
renderClient(opts);

lib\getRoutes.js

lib\getRoutes.js

const { existsSync, readdirSync, readFileSync, statSync } = require("fs");
const { basename,extname,join,relative } = require("path");
const {winPath} = require('./utils');
const {absPagesPath} = require('./getPaths');
function getRoutes(opts={}) {
  const { root, relDir = "" } = opts;
  const files = getFiles(join(root, relDir));
  const routes = files.reduce(fileToRouteReducer.bind(null, opts), []);
  return routes;
}

function fileToRouteReducer(opts, routes, file) {
  const { root, relDir = "" } = opts;
  const absFile = join(root, relDir, file);
  const stats = statSync(absFile);
  if (stats.isDirectory()) {
    const relFile = join(relDir, file);
    const layoutFile = join(root,relFile,'_layout.js');
    routes.push({
        path: normalizePath(relFile),
        routes: getRoutes({
          ...opts,
          relDir: relFile
        }),
        ...(existsSync(layoutFile)?{ component: toComponentPath(root,layoutFile)}:{})
      });
  } else {
    const bName = basename(file, extname(file));
    routes.push(
        {
            path: normalizePath(join(relDir, bName)),
            exact: true,
            component: toComponentPath(root,absFile),
        }
    );
  }
  return routes;
}
const normalizePath = (path)=>{
  path= winPath(path);
  path = `/${path}`;
  path = path.replace(/\/index$/, '/');
  return path;
}
const toComponentPath= (root,absFile)=>{
   return `@/${winPath(relative(join(root, ".."), absFile))}`;
}


function getFiles(root) {
  if (!existsSync(root)) return [];
  return readdirSync(root).filter((file) => {
    if (file.charAt(0) === '_') return false;
    return true;
  });
}

let routes = getRoutes({root:absPagesPath});
module.exports = routes;

generateFiles\routes.js

lib\plugins\generateFiles\routes.js

let { readFileSync } = require("fs");
let { join } = require("path");
let writeTmpFile = require("../../writeTmpFile");
let Mustache = require("mustache");
let routes = require('../../getRoutes');
const plugin = (api) => {
  api.onGenerateFiles(async () => {
    const routesTpl = readFileSync(join(__dirname, "routes.tpl"), "utf8");
    writeTmpFile({
      path: "core/routes.js",
      content: Mustache.render(routesTpl, {
        routes: JSON.stringify(routes, replacer, 2).replace(/\"component\": (\"(.+?)\")/g, (global, m1, m2) => {
          return `"component": ${m2.replace(/\^/g, '"')}`;
        }),
      }),
    });
  });
};
function replacer(key, value) {
  switch (key) {
    case "component":
      return `require('${value}').default`;
    default:
      return value;
  }
}
module.exports = plugin;

generateFiles\routes.tpl

lib\plugins\generateFiles\routes.tpl

注意三个{{{}}}代表不转义

export function getRoutes() {
  const routes = {{{ routes }}};
  return routes;
}

启动

webpack serve

启动服务器

lib\Service.js

const express = require('express');
const http = require('http');
+const webpack = require('webpack');
+const {join} = require('path');
+const webpackDevMiddleware = require('webpack-dev-middleware'); // webpack中间件
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const webpackConfig = require('./webpack.config.js');
+const {absTmpPath,absSrcPath} = require('./getPaths');
class Service {
    constructor(){
        this.app = express();
    }
+    setupDevMiddleware(){
+        webpackConfig.entry = join(absTmpPath, 'umi.js');
+        webpackConfig.resolve.alias['@']=absSrcPath;
+        webpackConfig.plugins.push(new HtmlWebpackPlugin({template:join(__dirname, "index.html")}));
+        const compiler = webpack(webpackConfig);
         // 默认是放在硬盘里的
+        const devMiddleware = webpackDevMiddleware(compiler,{writeToDisk:true});
+        this.app.use(devMiddleware);
+        this.app.use((req,res)=>{
             // 类似于fs.readFileSync
+            res.send(compiler.outputFileSystem.readFileSync(join(__dirname,'dist/index.html'),'utf8'));
+        });
+        return devMiddleware;
+    }
    async start() {
+        const devMiddleware = this.setupDevMiddleware();
+        devMiddleware.waitUntilValid(() => {
+            this.listeningApp = http.createServer(this.app);
+            this.listeningApp.listen(8000, () => {
+                console.log(`http server started at port 8000`);
+            })
+        });
    }
}
module.exports = Service;

lib\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>umi3</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

lib\webpack.config.js

lib\webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const cwd = process.cwd();
module.exports = {
  mode: "development",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    publicPath:'/'
  },
  devtool: false,
  resolve:{
    alias:{}
  },
  devServer:{
    historyApiFallback:{
      index:'index.html'
    }
  },
  module:{
    rules:[
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets:['@babel/preset-env','@babel/preset-react']
        },
        exclude:/node_modules/
      },
    ]
  },
  plugins: []
};

运行时插件

UMI的插件系统分为编译时插件、运行时插件

src\app.js

src\app.js

export function patchRoutes({routes}) {
  routes.unshift({
    path: '/foo',
    exact: true,
    component: require('@/foo').default,
  });
}

src\foo.js

src\foo.js

import React from 'react';
const Foo = (props) => {
  return (
    <div>Foo</div>
  )
}
export default Foo;

src.umi3\core\plugin.js

src.umi3\core\plugin.js

class Plugin {
    constructor(){
        this.hooks = {};
    }
    register(plugin) {
        Object.keys(plugin.apply).forEach((key) => {
            if (!this.hooks[key]) this.hooks[key] = [];
            this.hooks[key] = this.hooks[key].concat(plugin.apply[key]);
        });
    }
    applyPlugins({ key, args }) {
        const hooks = this.hooks[key]  || [];
        hooks.forEach((hook) => {
            hook(args);
        });
    }
}

const plugin = new Plugin();
import * as PluginApp from 'C:/aprepare/hs-umi3-prepare3/src/app.js';
plugin.register({
    apply: PluginApp,
    path: 'C:/aprepare/hs-umi3-prepare3/src/app.js',
});

export { plugin }

src.umi3\core\routes.js

src.umi3\core\routes.js

+import { plugin } from './plugin';
export function getRoutes() {
  const routes = [
   {
    "path": "/",
    "exact": true,
    "component": require('@/pages/index.js').default
   },
   {
    "path": "/profile",
    "exact": true,
    "component": require('@/pages/profile.js').default
   }
 ];
+ plugin.applyPlugins({
+    key: 'patchRoutes',
+    args: { routes }
+ });
  return routes;
}

实现运行时插件

plugin.js

lib\plugins\generateFiles\plugin.js

let { readFileSync,existsSync } = require("fs");
let { join } = require("path");
let writeTmpFile = require("../../writeTmpFile");
let Mustache = require("mustache");
const {winPath} = require('../../utils');
const {absSrcPath} = require('../../getPaths');

const plugin = (api) => {
  api.onGenerateFiles(async () => {
    const pluginTpl = readFileSync(join(__dirname, "plugin.tpl"), "utf8");
    const plugins = [join(absSrcPath,'app.js')];
    writeTmpFile({
      path: "core/plugin.js",
      content: Mustache.render(pluginTpl,{
        plugins: plugins.map((plugin, index) => {
          return {
            index,
            path: winPath(plugin)
          };
        })
      }),
    });
  });
};
module.exports = plugin;

plugin.tpl

lib\plugins\generateFiles\plugin.tpl

import { plugin } from './plugin';
class Plugin {
    constructor(){
        this.hooks = {};
    }
    register(plugin) {
        Object.keys(plugin.apply).forEach((key) => {
            if (!this.hooks[key]) this.hooks[key] = [];
            this.hooks[key] = this.hooks[key].concat(plugin.apply[key]);
        });
    }
    applyPlugins({ key, args }) {
        const hooks = this.hooks[key]  || [];
        hooks.forEach((hook) => {
            hook(args);
        });
    }
}

const plugin = new Plugin();
{{#plugins}}
import * as Plugin_{{{ index }}} from '{{{ path }}}';
{{/plugins}}

{{#plugins}}
  plugin.register({
    apply: Plugin_{{{ index }}},
    path: '{{{ path }}}',
  });
{{/plugins}}

export { plugin }

routes.tpl

lib\plugins\generateFiles\routes.tpl

+import {plugin} from './plugin';
export function getRoutes() {
  const routes = {{{ routes }}};
+  plugin.applyPlugins({
+    key: 'patchRoutes',
+    args: { routes },
+  });
  return routes;
}
若梦plus
关注
专栏目录
利用umiJS对项目进行转码，以及下载react developer谷歌拓展包
qq_45736175的博客
05-24 334
利用umiJS对项目进行转码，将 ES6 代码转为 ES5 代码，从而在浏览器或其他环境执行。 1.打开项目所在文件位置，然后在红色框所在位置，输入cmd，就可以打开所在项目的cmd 2.分别输入tyarn init -y对其进行初始化，会在项目中生成package.json；然后再输入umi g page index ，会在项目生成pages文件夹 3.打开IDE的控制台，打开terminal，然后输入 umi dev 4.在index.js中输入自己的测试代码，然后打开自己上面的lo
151. 精读《@umijs/use-request》源码
前端精读周刊
05-18 1108
1 引言与组件生命周期绑定的 Utils 非常适合基于 React Hooks 来做，比如可以将 “发请求” 这个功能与组件生命周期绑定，实现一些便捷的功能。这次以@umijs/use...
Umijs笔记
m0_65519288的博客
08-04 947
umijs笔记
umijs登录鉴权
m0_65545080的博客
02-16 397
umijs
UmiJS上手
fmk1023的博客
02-22 2824
文章目录UmiJS上手一、安装环境二、目录结构2.1 目录结构2.2 根目录2.2.1 package.json2.2.2 .umirc.ts2.2.3 .env2.2.4 dist 目录2.2.5 mock 目录2.2.6 public 目录2.3 /src 目录2.3.1 .umi 目录2.3.2 layouts/index.tsx2.3.3 pages 目录2.3.4 app.ts三、配置3.1 配置文件3.2 TypeScript 提示3.3 本地临时配置3.4 多环境多份配置3.5 运行时配置3.
umijs3引入xlsx-style ./cptable模块找不到问题
星宇大前端
12-17 968
功能需求：同事在做antd-table 导出功能，使用js-export-excel 插件。但是无法导出样式，集成xlsx-style 可以实现但是出现了如下bug 环境背景 框架UmiJS yarn antd-table 导出，依赖js-export-excel 库   出现问题 ERROR Failed to compile with 1 errors 下午4:51:30 This relative m.
vue3和vite
s8806479的博客
05-15 1040
客户端渲染效率比vue2提升了1.3~2倍SSR渲染效率比vue2提升了2~3倍。
基于umijs+arcgis API的webGIS前端开发框架源码+运行说明.zip
08-22
实现丰富GIS功能：通过ArcGIS API集成地图展示、图层管理、空间查询、空间分析等功能，满足用户多样化的GIS需求。 提升用户体验：优化前端界面设计，提高系统响应速度，增强用户交互体验。 【说明】 【1】项目代码...
umi3 antDesignPro布局layout配置快速搭建项目
ass_ace
10-12 9811
umi3 快速搭建项目1. 环境准备2. 创建项目3. 修改配置，应用antd layout布局1. 安装antd layout插件2. 修改.umirc.文件配置路由3. 根据配置文件中component新建路由对应的组件 1. 环境准备 安装nodejs 安装yarn 安装umi node -v npm install -g yarn npm install -g umi 2. 创建项目 创建myapp文件夹 mkdir umiapp && cd umiapp yarn
UMI3源码解析系列之插件化架构核心
大转转FE
05-17 1148
插件化架构插件化架构（Plug-in Architecture），也被称为微内核架构（Microkernel Architecture），是一种面向功能进行拆分的可扩展性架构，在如今的许多前端主流框架中都能看到它的身影。今天我们以 umi 框架为主，来看看插件化架构的实现思路，同时对比一下不同框架中插件化实现思路的异同。各个主流框架插件化异同二话不说先上结论。触发方式插件...
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 288
【代码】easyexcel模板导出并且公式自动计算的方法。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 651
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 891
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 593
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1111
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
一文读懂 JS 中的 Set 结构
最新发布
沐爸的博客
09-11 834
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 2022
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 897
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
React第三章(tsx语法入门 )
qq1195566313的博客
09-06 815
答: 基本没有没有区别只是在jsx语法上增加了类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值