vue3 + typeScript + vite 项目
环境依赖
已安装 16.0 或更高版本的 Node.js
pnpm 命令
推荐使用- 执行
npm install -g pnpm
全局安装pnpm - 执行
pnpm install
安装依赖 - 执行
pnpm dev
启动项目 - 项目启动访问 http://127.0.0.1:5173/ 查看
代码格式化
- 执行
pnpm lint
会自动格式化项目中代码,代码风格 “airbnb-base” - 格式化不了的控制台会有报错信息及不规范文件索引
打包
-
pnpm build-development
开发环境 -
pnpm build-test
测试环境 -
pnpm build-pre
预发布环境 -
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 样式文件*