React 项目模板----配置好Antd4按需引入和主题定制

ReactSpring

已于 2022-02-18 20:13:14 修改

阅读量575

点赞数

分类专栏：全栈平台系列教程文章标签： react.js javascript 前端

于 2022-01-04 19:44:40 首次发布

本文链接：https://blog.csdn.net/weixin_45607293/article/details/122310100

版权

全栈平台系列教程专栏收录该内容

19 篇文章 1 订阅

订阅专栏

创建基本框架

$ mkdir app && cd ./app
$ mkdir public src && cd ./src
$ mkdir api assets components config pages utils

||

npx create-react-app yourProjectName --template typescript

编写 package.json

{
  "name": "jira_new",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.22",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "antd": "^4.18.2",
    "axios": "^0.24.0",
    "craco-less": "^2.0.0",
    "dayjs": "^1.10.7",
    "jsonp": "^0.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "store": "^2.0.12",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

在项目跟路径下编写 craco.config.ts

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

在public下创建一个空的 index.html 文件并且加一个div#root

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React项目</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

我猜估计没人学到这里还会去手写上面的代码吧!!!

编写 App.tsx

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>
                App
            </div>
        )
    }
}

编写 index.ts

import React from 'react';
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>,document.getElementById('root'))

保证你安装了node.js执行以下命令

$ npm i yarn -g
$ yarn
$ yarn start

jira 项目后台

yarn add jira-dev-tool@1.7.61
npx msw init ./public

ReactSpring

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 项目模板----配置好Antd4按需引入和主题定制

创建基本框架$ mkdir app && cd ./app$ mkdir public src && cd ./src$ mkdir api assets components config pages utils编写 package.json{ "name": "React项目名称,需修改", "version": "版本号,自己写,默认0.1.0", "private": true, "dependencies": {.
复制链接

扫一扫