1 项目依赖相关
安装依赖
根据根目录lock文件确定依赖安装范式，通常ide也会有UI提示，点击即可
一般为yarn.lock yarn install 或 package-lock.json npm install
npm yarn pnpm 是前端包管理器 不用过多关注
jetbrain系列ide 直接 打开 package.json[scripts=>start] 点击左侧箭头
node版本
尽量不要用太新版本的node 如果老旧项目[比如mgt] 可能还需要node 14以下版本， 否则依赖可能会出问题
此处推荐一个node版本管理工具: nvm一款node多版本并存管理工具
https://github.com/nvm-sh/nvm
$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6
本地开发
环境相关
常规约定：本地开发一般在根目录建 .env.local文件 常规内容如下
SUNMI_ENV=test # 调试环境
PORT=8000 # 服务启动端口
LOCALPROXY=true # 开启本地代理 注意true 是字符串 非空即可
文件其他名称
本地代理
跨域
1 协议、域名[二级及以上域名]、端口不同
2 特殊请求头
需要配置webpack 代理
一般在 ./config/webpack.config.js下
proxy: {
"/v3": {
target: `https://${getClientEnvironment().API_SERVER}`,
secure: true, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
},
}
因webpack代理仅劫持本地的API访问 故需在请求客户端内指定代理的域名为localhost
注意事项
node 执行环境 ； 浏览器执行环境
杂项
.npmrc文件可以配置镜像源
某米私有镜像源地址：https://registry.npm.--.com/
业务开发相关
MGT主子应用
本地调试
主应用操作：
mgt项目./src/mfe/config 新建文件：app.local.ts内容如下：
export default [
{
name: 'mall-operation', // 子应用
entry: '//localhost:8001', // 子应用本地调试端口
base: ['/mall-operation']
}
];
回调模式
切换事件回调思维模式
早期js的异步是通过回调模式[事件回调]实现的
因为需要等待就绪状态（比如后端接口响应） 方可进行下一步操作
异步事件，某些复杂的组件（比如大表单模态框）需要在状态修改后完成渲染，此时建议使用{someState && <components>}方式来控制，否则可能会产生状态没有完全就绪，组件就已经渲染，但此时渲染的可能是错误的状态
状态管理
为什么需要状态管理
本质上是一些变量处理
页面交互状态、后端数据状态[远端数据缓存策略]
React
16.8版本前用class 组件
之后用函数组件配合hooks[推荐尽量使用函数组件]
类组件
需要关注下 props、state
还需要关注下状态管理库： redux、mobx、dva
函数组件
hooks
UI 组件库使用 antd
对着文档copy即可 注意 对应版本 2.x 5.x
类组件
this指向
来复习一下this [#手动滑稽]
类组件中需要留意this问题 [这也是推荐使用函数组件的原因之一]
多用箭头函数 [this可以指向可以向下穿透]
类组件状态管理
类组件本身的 state这里管理局部页面的状态
全局状态通过props 获取： mobx redux dva（redux封装）
页面的loading 状态由于异步处理的原因 也建议放到model层[全局状态]中
也可以用封装好的 loadding方法 [dva项目]
loading={loading.effects['noticeManage/getListTodo']}
其他
项目模块化
CommonJS
● require
● module.exports
● exports
ES Module
● import
● export
● export default
// 导出
module.exports = {
name:'banana',
age:18,
eat:function(){
console.log('I like eating bananas')
}
}
module.exports.userName = 'admin'
// 导入
const obj = require('./module.js')
console.log(obj) // { name: 'banana', age: 18, eat: [Function: eat], userName: 'admin' }
// ------------------------------------
// 导出
const obj = {
name:'banana',
age:18,
eat:()=>{
console.log('I like eating bananas')
}
}
const userName = 'admin'
export { obj,userName }
// 导入
import { obj,userName } from './module.js'
