Step 1️：创建一个 Store Model
// ./src/stores/todo.ts
import { action, observable, computed } from 'mobx';
export interface ITodo {
id: number;
name: string;
desc: string;
done?: boolean;
}
let id = 0;
export class TodoStore {
@observable todos: ITodo[] = [];
// 利用计算属性计算完成个未完成个数
@compu...阅读全文>>
settings.json:
"eslint.options": {
"overrideConfig": {
"env": {
"browser": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"no-debugger": "off"
}
}
},阅读全文>>
export default defineConfig({
cssLoader: {
modules: {
auto: true,
},
},
})阅读全文>>
window.location.replace
1
window.location.replace('要转向的页面') //不会有历史记录
1 2 3 4
let backLen = history.length history.forward() history.go(-backLen) // Return at the beginning window.location.replace('/#/home')
...阅读全文>>
原本打包过后是css-in-js,配置完MiniCssExtractPlugin后,可以将css单独打包出来
配置
1,安装npm install --save-dev mini-css-extract-plugin
2,将style-loader替换成MiniCssExtractPlugin.loader (style.loader,支持HMR,但MiniCssExtractPlugin目前正在支持(还没))
3,安装npm install --save-dev optimize-css-assets-webpack-...阅读全文>>
优先通过修改源代码来解决；修改后记得重启，有的依赖需重新处理
其次通过预构建或 CommonJS 插件处理；
为了解决这一问题，我对搜索到的数个 CommonJS 插件进行简单地试用，最终基于成熟、可靠、全面等几方面的考虑，采用 @rollup/plugin-commonjs 。
import commonjs from '@rollup/plugin-commonjs';
export default defineConfig({
plugins: [
commonjs...阅读全文>>
Hi you are using Webpack 4 and Terser ^5.0.0. This version of Terser is for Webpack 5, you need to set version "terser-webpack-plugin": "^4.2.3", in package.json file
您正在使用Webpack 4和精简版^5.0.0。此版本的Terser适用于网页包5，您需要在软件包中设置版本“terser webpack plugin”：“^4.2.3”json文件阅读全文>>
interface IRecipeProps {
ingredients?: string[];
title?: string;
img?: string;
instructions?: string;
}
interface IRecipeState {
}
class Recipe extends Component<IRecipeProps, IRecipeState>&n...阅读全文>>
1.el-table 增加99.9%的宽度
2.
.el-table__header,.el-table__body,.el-table__footer{
border-collapse: collapse!important;
}
3.
将表格外层元素的width宽度减去滚动条的宽度就解决了
类似这样：
<div :style={width: `calc(100% - ${scrollbarWidth})`}> <el-table/> </div>
4.el...阅读全文>>
React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。
所有，可以对组件进行异步加载处理，通常可以使用 React-loadable。
React-loadable 使用
例如，对于项目中的detail组件（/src/pages/detail/），在 detail 目录下新建 loadable.js：
import React from 'react';
import Loadable from 'react-loadable';
const LoadableC...阅读全文>>
