可搭配 cy-react-cli使用，cy-react-cli默认模板为此模板
1. 环境配置
2. 相关技术栈
3. 目录说明
4. mock说明
5. 编辑器插件列表
6. 编辑器配置
7. 模板说明
node >= v12.0
yarn
.
├── README.md
├── config-overrides.js
├── doc
├── package.json
├── public
├── src
│ ├── App.less
│ ├── App.module.less
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── assets
│ │ └── logo.png
│ ├── components
│ ├── config
│ │ └── Constant.ts
│ ├── index.css
│ ├── index.tsx
│ ├── mock
│ │ ├── data
│ │ │ ├── loginUser.ts
│ │ │ └── user.ts
│ │ └── mock.ts
│ ├── modal
│ │ ├── loginUser.ts
│ │ ├── page.ts
│ │ └── user.ts
│ ├── react-app-env.d.ts
│ ├── routers
│ │ └── Router.ts
│ ├── serviceWorker.ts
│ ├── store
│ │ ├── Actions.ts
│ │ ├── Reducer.ts
│ │ └── Store.ts
│ ├── theme
│ │ └── theme.less
│ ├── utils
│ │ ├── request.ts
│ │ └── util.ts
│ └── views
│ ├── home
│ │ └── Home.tsx
│ ├── login
│ │ ├── Login.module.less
│ │ └── Login.tsx
│ ├── logs
│ │ └── userLog
│ │ └── UserLog.tsx
│ └── user
│ ├── User.module.less
│ ├── User.tsx
│ ├── UserModal.tsx
│ └── UserViewModal.tsx
├── tsconfig.json
└── yarn.lock
默认使用mockjs模拟接口
在src/index.tsx中注释掉Mock.bootstrap()即可访问真实接口
// mock请求启动，若有接口，可注释此行。请求代理在package.json中proxy字段
Mock.bootstrap()接口代理配置在package.json中的proxy字段
- TSLint (deprecated)
- ESLint
- Prettier - Code formatter
- autoprefixer
- Path Intellisense
- GitLens — Git supercharged
- Auto Rename Tag
- Auto Close Tag
- Bracket Pair Colorizer
- EditorConfig for VS Code
- gitignore
- Guides
- IntelliSense for CSS class names in HTML
使用 VS Code 编辑器
// 将设置放入此文件中以覆盖默认设置
{
"editor.fontSize": 14,
"workbench.activityBar.visible": false,
"editor.renderWhitespace": "boundary",
"window.zoomLevel": 0,
"editor.wordWrap": "bounded",
"editor.insertSpaces": true,
"editor.rulers": [120],
"editor.scrollBeyondLastLine": true,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.wordWrapColumn": 120,
"editor.minimap.enabled": true,
"search.exclude": {
"**/dist": true
},
"editor.snippetSuggestions": "top",
"window.openFilesInNewWindow": "off",
"html.format.indentInnerHtml": true,
"autoprefixer.findExternalAutoprefixer": true,
"path-intellisense.extensionOnImport": true,
"editor.renderIndentGuides": false,
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.tsx": "typescriptreact"
},
"typescript.check.npmIsInstalled": false,
"auto-rename-tag.activationOnLanguage": ["*", ".vue"],
"html.format.endWithNewline": true,
"html.format.indentHandlebars": true,
"javascript.format.insertSpaceAfterConstructor": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceAfterConstructor": true,
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.minimap.showSlider": "always",
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.implicitProjectConfig.checkJs": true,
"javascript.validate.enable": false,
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": true,
"suppressShowKeyBindingsNotice": true
},
"breadcrumbs.enabled": true,
"scm.alwaysShowProviders": true,
"extensions.autoUpdate": true,
"gitlens.views.repositories.files.layout": "auto",
"gitlens.views.fileHistory.enabled": true,
"gitlens.views.lineHistory.enabled": true,
"eslint.alwaysShowStatus": true,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.suggestSelection": "first",
"bookmarks.useWorkaroundForFormatters": true,
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.reportStyleChecksAsWarnings": false,
"tslint.nodePath": "./node_modules/tslint",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.iconTheme": "vscode-icons",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Monokai",
"search.showLineNumbers": true,
"gitlens.defaultDateStyle": "absolute",
"todo-tree.highlights.enabled": true,
"javascript.updateImportsOnFileMove.enabled": "never",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}常规中后台页面布局如下
