Inshop CRM 项目教程
1. 项目的目录结构及介绍
Inshop CRM 项目的目录结构如下:
inshop-crm-admin/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ ├── pages/
│ ├── store/
│ ├── styles/
│ ├── utils/
│ ├── middleware.ts
│ ├── next.config.js
│ ├── package.json
│ ├── tsconfig.json
│ └── ...
├── .eslintrc.json
├── .gitignore
├── README.md
├── yarn.lock
└── ...
目录介绍
public/
: 存放静态文件,如index.html
。src/
: 项目的主要源代码目录。components/
: 存放 React 组件。pages/
: 存放页面组件。store/
: 存放状态管理相关文件。styles/
: 存放样式文件。utils/
: 存放工具函数。middleware.ts
: 中间件配置文件。next.config.js
: Next.js 配置文件。package.json
: 项目依赖和脚本配置。tsconfig.json
: TypeScript 配置文件。
.eslintrc.json
: ESLint 配置文件。.gitignore
: Git 忽略文件配置。README.md
: 项目说明文档。yarn.lock
: Yarn 依赖锁定文件。
2. 项目的启动文件介绍
项目的启动文件主要是 src/pages/_app.tsx
和 src/pages/_document.tsx
。
_app.tsx
_app.tsx
是 Next.js 应用程序的根组件,负责初始化页面。你可以在这里添加全局样式、状态管理等。
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
_document.tsx
_document.tsx
是 Next.js 应用程序的文档组件,负责自定义 HTML 文档结构。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
3. 项目的配置文件介绍
next.config.js
next.config.js
是 Next.js 的配置文件,可以在这里进行各种配置,如路由、构建优化等。
module.exports = {
reactStrictMode: true,
}
tsconfig.json
tsconfig.json
是 TypeScript 的配置文件,定义了 TypeScript 编译器的选项。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2015"],
"jsx": "preserve",
"module": "commonjs",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": ["src"]
}
package.json
package.json
是 Node.js 项目的配置文件,包含了项目的依赖、脚本等信息。
{
"name": "inshop-crm-admin",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^11.0.0",
"react": "^17.0.2",