React+redux项目搭建流程 - IT评测·应用市场-qidao123.com

create-react-app my-project --template typescript // 创建项目并使用typescript

复制代码

npm install @craco/craco@alpha -D

复制代码

const CracoLessPlugin = require("craco-less");
const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
plugins: [{ plugin: CracoLessPlugin }],
webpack: {
alias: {
//别名配置
"@": resolve("src")
}
}
};

复制代码

{
"compilerOptions": {
"allowJs": false,
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}

复制代码

# http://editorconfig.org
root = true
[*] #表示所有文件适用
charset = utf-8 #设置文件字符集
indent_style = space #缩进风格
indent_size = 2#缩进大小
end_of_line = lf#控制换行类型
trim_trailing_whitespace=true #去除行尾的任意空白字符
insert_final_newline=true#始终在文件末尾插入一个新行
[*.md] #表示仅md文件适用以下规则
max_line_length=off
trim_trailing_whitespace=false

复制代码

npm install prettier -D

复制代码

{
"useTabs": false, // 使用tab缩进
"tabWidth": 2, // tab代表几个空格
"printWidth": 80, // 当行字符长度
"singleQuote": false, // 是否使用单引号
"trailingComma": "none", // 多行输入是否添加尾逗号
"semi": true // 语句末尾是否加分号
}

复制代码

npm install eslint -D // 安装eslint
npx eslint --init // 初始化配置

复制代码

npm install normalize.css // 别人封装的公共css重置文件
npm install craco-less@2.1.0-alpha.0 // 引入less支持
import "normalize.css"; // src/index.tsx文件引入
import "./assets/css/reset.less"; // src/index.tsx文件引入

复制代码

import type { RouteObject } from "react-router-dom";
import { Navigate } from "react-router-dom";
import React, { lazy } from "react";
// import Discover from "@/views/discover";
// import Mine from "@/views/mine";
// import Focus from "@/views/focus";
// import Download from "@/views/download";
// 懒加载模式，打包时会分包
const Discover = lazy(() => import("@/views/discover"));
const Recommend = lazy(() => import("@/views/discover/c-views/recommend"));
const Ranking = lazy(() => import("@/views/discover/c-views/ranking"));
const Songs = lazy(() => import("@/views/discover/c-views/songs"));
const DJradio = lazy(() => import("@/views/discover/c-views/djradio"));
const Artist = lazy(() => import("@/views/discover/c-views/artist"));
const Album = lazy(() => import("@/views/discover/c-views/album"));
const Mine = lazy(() => import("@/views/mine"));
const Focus = lazy(() => import("@/views/focus"));
const Download = lazy(() => import("@/views/download"));
const routes: RouteObject[] = [
{
path: "/",
element: <Navigate to="/discover"></Navigate>
},
{
path: "/discover",
element: <Discover />,
children: [
{
path: "/discover",
element: <Navigate to="/discover/recommend"></Navigate>
},
{
path: "/discover/recommend",
element: <Recommend />
},
{
path: "/discover/ranking",
element: <Ranking />
},
{
path: "/discover/songs",
element: <Songs />
},
{
path: "/discover/djradio",
element: <DJradio />
},
{
path: "/discover/artist",
element: <Artist />
},
{
path: "/discover/album",
element: <Album />
}
]
},
{
path: "/mine",
element: <Mine />
},
{
path: "/focus",
element: <Focus />
},
{
path: "/download",
element: <Download />
}
];
export default routes;

复制代码

import { useRoutes, Link } from "react-router-dom";
<div className="nav">
<Link to="/discover">发现音乐</Link>
<Link to="/mine">我的音乐</Link>
<Link to="/focus">关注</Link>
<Link to="/download">下载客户端</Link>
</div>
{/* Suspense：组件还未加载完毕时的应急显示方案 */}
<Suspense fallback="loading...">
<div className="main">{useRoutes(routes)}</div>
</Suspense>

复制代码

import { Outlet, Link } from "react-router-dom";
<div>
<div>
<Link to="/discover/recommend">推荐</Link>
<Link to="/discover/ranking">排行榜</Link>
<Link to="/discover/songs">歌单</Link>
<Link to="/discover/djradio">主播电台</Link>
<Link to="/discover/artist">歌手</Link>
<Link to="/discover/album">新碟上架</Link>
</div>
<Outlet />
</div>

复制代码

npm install @reduxjs/toolkit react-redux

复制代码