二手车 网站程序,南宁一站网网络技术有限公司,软文广告文案案例,怎么做网站主导航1.创建项目
create-react-app my-project --template typescript // 创建项目并使用typescript2.去除掉没用的文件夹#xff0c;只保留部分有用的文件 3.项目配置#xff1a; 配置项目的icon 配置项目的标题 配置项目的别名等#xff08;craco.config.ts只保留部分有用的文件 3.项目配置 配置项目的icon 配置项目的标题 配置项目的别名等craco.config.ts 配置tsconfig.json 4.安装craco用于扩展webpack配置注意版本号与下方一致
npm install craco/cracoalpha -D项目根目录下创建craco.config.js扩展webpack配置
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)}}
};tsconfig.json配置
{compilerOptions: {allowJs: false,jsx: react-jsx,baseUrl: .,paths: {/*: [src/*]}}
}
启动命令修改为craco 5.代码格式化配置 集成editorconfig editorconfig有助于为不同的IDEA上处理同一项目的多个开发人员维护一致的编码风格 vscode安装插件 根目录新建文件.editorconfig并写入以下内容
# http://editorconfig.orgroot true
[*] #表示所有文件适用
charset utf-8 #设置文件字符集
indent_style space #缩进风格
indent_size 2#缩进大小
end_of_line lf#控制换行类型
trim_trailing_whitespacetrue #去除行尾的任意空白字符
insert_final_newlinetrue#始终在文件末尾插入一个新行[*.md] #表示仅md文件适用以下规则
max_line_lengthoff
trim_trailing_whitespacefalseprettier安装并配置
npm install prettier -D根目录创建文件.prettierrc并写入以下配置如需其他配置可自行网上查阅
{useTabs: false, // 使用tab缩进tabWidth: 2, // tab代表几个空格printWidth: 80, // 当行字符长度singleQuote: false, // 是否使用单引号trailingComma: none, // 多行输入是否添加尾逗号semi: true // 语句末尾是否加分号
}
eslint安装并配置
npm install eslint -D // 安装eslint
npx eslint --init // 初始化配置配置选择 最终目录结构划分 css重置 新建文件src/assets/css/reset.less // 自定义css重置文件
npm install normalize.css // 别人封装的公共css重置文件
npm install craco-less2.1.0-alpha.0 // 引入less支持import normalize.css; // src/index.tsx文件引入
import ./assets/css/reset.less; // src/index.tsx文件引入6.路由配置 src/router/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;
路由使用 App.js
import { useRoutes, Link } from react-router-dom;div classNamenavLink to/discover发现音乐/LinkLink to/mine我的音乐/LinkLink to/focus关注/LinkLink to/download下载客户端/Link/div
{/* Suspense组件还未加载完毕时的应急显示方案 */}Suspense fallbackloading...div classNamemain{useRoutes(routes)}/div/Suspense子组件中使用
import { Outlet, Link } from react-router-dom;divdivLink to/discover/recommend推荐/LinkLink to/discover/ranking排行榜/LinkLink to/discover/songs歌单/LinkLink to/discover/djradio主播电台/LinkLink to/discover/artist歌手/LinkLink to/discover/album新碟上架/Link/divOutlet //div7.集成redux 安装
npm install reduxjs/toolkit react-redux相关文件 使用方法 import store from “./store”; src/index.tsx 引入 需要使用的文件做如下使用 src/index.tsx文件
