1 Star 0 Fork 1

yuxingming / vite_react_init

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

项目名称

  • 项目名称

下载依赖

npm install

启动服务

npm run start

项目打包

npm run build

提交信息应遵守以下规范:

"[HEAD] 详细信息"

其中 详细信息 应尽可能详细,要能说明问题,[HEAD] 可取:

[初始化]
[依赖]
[文档]
[功能]
[修复]
[优化]

示例:

[初始化] 项目初始化
[依赖] 添加 AntDesign React UI 组件库
[功能] 新添加登陆页面
[功能] 登录页面添加登录信息校验流程
[修复] 主界面白屏修复

git 提交方案

  • 多人协作的情况下,提交 git 的时候就会出现提交分支混乱的情况,为避免这样情况,可以使用如下方案进行提交,可以避免很多意外情况。
git add -A
git commit -m "[描述]"
git pull --rebase
  1. 执行完 git pull --rebase 后如果有 succeed 字样,就表示没有冲突,直接 git push

  2. 执行完 git pull --rebase`后如果有冲突,本地如果有冲突,手动解决冲突后:

git add -A
git rebase --continue ,// 可以线性的连接本地分支与远程分支,无误之后就退出,回到主分支上。
git push

项目功能简介

  • lint-staged husky:用于代码提交时进行eslint prettier代码校验,校验通过后,才能提交代码
  • package.jsonengines用来定义node版本,可根据自己的需要自行修改
  • .npmrc 文件是用来约束 npm 的,package.jsonengines只能限制yarn,所以需要这个文件配置
  • react-dev-inspector 用来通过页面快速定位到代码,在main.jsx中进行了配置,在页面中可使用control + y可跳转到 vscode 中代码对用位置
  • postcss-pxtorem 用来将 css 中的 px 单位转换为 rem,react-jss和行内样式无效
  • viteCompression 用来配置开启 gzip 打包
  • rollup-plugin-visualizer 用来打包时展示包大小细节
  • preinstall 该命令是为了强制包管理器,这里使用的是 npm

项目打包图片优化方案

  • vite-plugin-imagemin:一个压缩图片资产的 vite 插件 (https://github.com/vbenjs/vite-plugin-imagemin)
  • 但项目中并没有引入,因为国内下载极为不便,所以需要在电脑 host 文件加上如下配置:
  • 199.232.4.133 raw.githubusercontent.com
  • 加上配置后执行npm i vite-plugin-imagemin -D
  • vite.config文件中加上插件配置:
import viteImagemin from 'vite-plugin-imagemin'

export default () => {
  return {
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 20,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox',
            },
            {
              name: 'removeEmptyAttrs',
              active: false,
            },
          ],
        },
      }),
    ],
  }
}
  • 对应的配置也可以随项目修改
MIT License Copyright (c) 2022 小磊丶同学 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于vite + react + eslint + prettier 等开箱即用的架构模板 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/yuxingming/vite_react_init.git
git@gitee.com:yuxingming/vite_react_init.git
yuxingming
vite_react_init
vite_react_init
master

搜索帮助