Skip to content

Latest commit

 

History

History
147 lines (103 loc) · 5.98 KB

README_zh_CN.md

File metadata and controls

147 lines (103 loc) · 5.98 KB

一个基于 Next.js 的简易脚手架，内含ant-design、redux、redux-saga、fetch以及pm2，从开发到部署一站式服务。

Deploy Status Join the community on Spectrum

🏠 主页

Next-Antd-Scaffold-Demo

如果你想用的版本小于 Next.js 11. 可以在这里找到更多版本的脚手架内容 🌲 Versions History.

🌍 Browser Support

Chrome Edge Firefox IE Safari
Chrome 39.0+ ✔ Edge 12.0+ ✔ Firefox 30.0+ ✔ IE 11+ ✔ Safari 9.1+ ✔

📁 目录结构

——————
  | -- assets                    // 样式文件的设置，包括 antd 的主题覆盖
  | -- docs                      // 文档目录
  | -- public                    // 静态资源目录
      | -- static                // 兼容小于 version9 版本的静态资源目录
      | -- favicon.ico           // 一些存放于根路径的资源文件，比如seo文件
      | -- ...
  | -- src                       // source 目录，符合大众习惯
      | -- components            // React UI 组件
      | -- constants             // 系统常量文件夹
          | -- ActionsTypes.js   // 存储 redux 所有的 action 常量
          | -- ApiUrlForBE.js    // 存储所有的后端 API 常量
          | -- ...
      | -- core                  // 核心方法目录
          | -- util.js           // 系统的一些公共方法
          | -- nextFetch.js      // 为了方便使用封装了 unfetch
      | -- middlewares           // 中间件目录
          | -- client            // 客户端中间件，处理 redux 的 actions
          | -- server            // 服务端中间件，处理 node 事件模块
      | -- pages                 // Next.js 路由目录
      | -- redux                 // redux 目录
          | -- actions           // 处理所有的 actions
          | -- reducers          // 处理所有的 reducers
          | -- sagas             // 处理所有的 sagas
          | -- store.js          // 整个系统的 store
  | -- .babelrc                  // babel 配置文件
  | -- .eslintrc                 // eslint 配置文件
  | -- .gitignore
  | -- next.config.js            // Next.js 配置文件
  | -- package.json
  | -- server.js                 // server文件
  | -- pm2.config.js             // pm2 部署文件
  | ...                          // 其他文件

📖 如何使用

开发环境

 1. git clone https://github.com/luffyZh/next-antd-scafflod.git
 2. yarn install
 3. yarn start

服务运行在 http://localhost:3006

生产环境

 1. yarn build
 2. yarn prod

服务运行在 http://localhost:5999

✨ 特性

  • React
  • Next.js
  • Redux
  • Redux-Saga
  • Ant-Design
  • Fetch

🔨 如何通过 pm2 部署项目

# 1. install pm2
$ npm install -g pm2

# 2. build project
$ yarn build

# 3. pm2 deploy project
$ pm2 start pm2.config.js

🪂 通过 now 来进行部署

🌲 版本历史

next_version_11

  • webpack 5

next_version_10

  • Next.js 版本升级到 10 以上
  • 全面拥抱 hooks API (Component/Redux)

next_verion_9.3.5

  • Next.js 版本是 9.3.5
  • 组件是 hooks + class，Redux 还没有用 hooks

next_verion_8.1.0

💐 更多示例

🤔️ 更多相关问题

  • 如何在脚手架里使用 cssModule?

  • 如何监听路由的变化?

  • 关于 min-css-extract-plugin 警告的解决办法!

  • 这个脚手架怎么兼容 IE9/10?

  • ant-design 刷新页面时样式闪动的解决办法！

  • ant-design 在开发时页面样式错乱问题的解决办法！

  • 如何加速build的构建过程？

...

更多问题请查看 Faq 文档