README.md 6.3 KB

vue3 + typeScript + vite 项目

环境依赖

已安装 16.0 或更高版本的 Node.js

推荐使用 pnpm 命令

  1. 执行 npm install -g pnpm 全局安装pnpm
  2. 执行 pnpm install 安装依赖
  3. 执行 pnpm dev 启动项目
  4. 项目启动访问 http://127.0.0.1:5173/ 查看

代码格式化

  1. 执行 pnpm lint 会自动格式化项目中代码,代码风格 “airbnb-base
  2. 格式化不了的控制台会有报错信息及不规范文件索引

打包

  1. pnpm build-development 开发环境
  2. pnpm build-test 测试环境
  3. pnpm build-pre 预发布环境
  4. pnpm build-production 生产环境 ### 打包后预览 执行 pnpm preview 访问 http://127.0.0.1:4173/ 预览

代码提交格式

提交格式 ​ <type>[optional scope]: <description>
说明:
● type :用于表明我们这次提交的改动类型。
● optional scope:可选,用于标识此次提交主要涉及到代码中哪个模块。
● description:一句话描述此次提交的主要内容,做到言简意赅。

目录说明

    |-- .env                                *全局默认,任何环境都加载合并*
    |-- .env.development                    *开发环境下的配置文件*
    |-- .env.pre                            *预发布环境下的配置文件*
    |-- .env.production                     *生产环境下的配置文件*
    |-- .env.test                           *测试环境下的配置文件*
    |-- .eslintrc.cjs                       *eslint配置文件*
    |-- .gitignore                          *git 提交忽略文件*
    |-- .prettierrc.json                    *格式化配置文件*
    |-- components.d.ts                     *自动生成: 自动引入组件(包括项目自身的组件和各种组件库中的组件)类型文件,不需要手动编写import { Button } from 'ant-design-vue'这样的代码了*
    |-- cypress.config.ts                   *单元测试配置文件*
    |-- env.d.ts                            *全局类型文件*
    |-- index.html      
    |-- package.json
    |-- pnpm-lock.yaml                      *pnpm依赖版本文件*
    |-- postcss.config.js                   *postcss配置文件*
    |-- README.md
    |-- tailwind.config.js                  *tailwind配置文件*
    |-- tsconfig.app.json                   *应用的ts配置文件*
    |-- tsconfig.config.json                *ts的配置文件*
    |-- tsconfig.json                       *typeScript配置文件*
    |-- tsconfig.vitest.json                **
    |-- vite.config.ts                      *vite配置文件*
    |-- .vscode
    |   |-- extensions.json
    |-- cypress                             *执行单元测试后的文件夹*
    |-- dist                                *打包后文件夹*
    |-- public                              *公开的静态文件夹*
    |   |-- favicon.ico
    |-- src
        |-- App.vue
        |-- auto-imports.d.ts               *自动生成: 按需自动导入Vue/Vue Router等官方Api的插件, 不需要手动编写import {xxx} from vue*
        |-- main.ts                         *主入口文件*
        |-- api                             *api文件夹-统一在此文件夹下*
        |   |-- index.ts                    *api请求封装文件 get, post...*
        |   |-- user.ts                     *示例:user api请求service*
        |-- assets                          *项目静态资源文件夹*
        |   |-- icons                       *SvgIcon 组件使用的精灵图文件夹 注:只能是svg文件*
        |       |-- logo.svg
        |       |-- tooling.svg
        |-- components                      *项目组件文件夹*
        |   |-- index.ts                    *组件入口文件-所有components中组件均需在此文件中引入*
        |   |-- sys                         *项目本地自定义组件的文件夹*
        |       |-- SvgIcon.vue
        |-- layouts                         *页面布局Layout文件夹*
        |   |-- BlankLayout.vue             *空白layout*
        |   |-- default                     *默认基础layout 包含页头、页尾,可扩展...*
        |       |-- index.vue               *默认基础layout 入口文件*
        |       |-- components              *默认基础layout 子组件文件夹*
        |           |-- DefaultFooter.vue
        |           |-- DefaultHeader.vue
        |-- libs                            *项目工具库文件夹*
        |   |-- emitter.ts                  *mitt库-事件总线对象-使用时均从此文件引入即可*
        |   |-- request                     *axios请求*
        |   |   |-- index.ts                *axios请求主文件*
        |   |   |-- shims.d.ts
        |   |-- utils                       *项目工具文件夹*
        |       |-- baseApiUrl.ts           *根据环境变化获取api地址*
        |       |-- baseStaticUrl.ts        *根据环境变化获取静态资源地址 OSS*
        |       |-- index.ts                *工具主入口文件-自定义工具文件-需在此文件引入导出*
        |       |-- setTitle.ts             *设置网页title*
        |-- pages                           *项目页面文件夹-路由生成默认文件夹*
        |   |-- index.vue                   *主文件*
        |   |-- [...all].vue                *404页面*
        |   |-- home                        **
        |   |   |-- index.vue
        |   |-- user                        *用户相关页面*
        |       |-- index.vue
        |       |-- login
        |       |   |-- index.vue
        |       |-- regist
        |           |-- index.vue
        |-- router                          *项目router目录*
        |   |-- index.ts                    *主配置文件*
        |   |-- permission.ts               *路由拦截文件*
        |-- stores                          *stores文件*
        |   |-- counter.ts
        |   |-- user.ts
        |-- hooks                           *hooks文件夹*
        |-- styles                          *css样式文件夹*
            |-- base.css
            |-- main.css
            |-- tailwind.css                *tailwind 样式文件*