代码拉取完成,页面将自动刷新
vue3-h5-tmp 基于 Vue3.x setup + TypeScript + Vite + Pinia + Vant3 + sass + tailwindcss + Rem 布局适配 + axios(封装)+ Eslint + Prettier + dayjs 等流行技术栈构建移动端模板脚手架,开箱即用。
#通过 npm 安装 pnpm (如果本地已安装pnpm,请忽略)
npm install -g pnpm
#安装项目依赖
pnpm install
#开发环境启动
pnpm start
#打包 test 环境代码
pnpm build:test
#打包生产环境代码
pnpm build or pnpm build:prod
#执行 js 类型检查
pnpm lint:fix
#执行 prettier 批量格式化代码
pnpm lint:prettier
#执行 ts 语法错误检查
pnpm lint:type
##注:详细请阅读package.json 以及对应的环境配置文件(即.env 文件)!
同时在项目根目录下包含一个 run.bat,该文件会列出所有 package.json 中 script 块里面的所有命令,
通过双击该文件,你可以在命令行中输入相应的序号并按 Enter 键,程序将运行你选择的脚本。
如果设计稿的尺寸不是 750,而是 375 或其他大小,请在 .postcssrc.js 中及时调整 rootValue。
基础组件文件命名应该以 base 为前缀命名,以示其唯一性,并且以横线连接。
例子:
src
└─ resources
└─ components
└─ base-button
├─ index.vue //源码
└─ README.md //组件使用说明文档
业务组件文件命名应该以 the 为前缀命名,以示其唯一性,并且以横线连接。
例子:
src
└─ views
└─ components
└─ the-button
├─ index.vue //源码
└─ README.md //组件使用说明文档
为了方便维护与开发,建议路由文件命名与对应的页面文件命名保持一致,尽量简洁明了。
例子:
src
└─ config
└─ router
├─ dev.ts
├─ errpage.ts
└─ index.ts
为了方便维护与开发,建议接口文件命名与对应的页面文件命名保持一致,尽量简洁明了。
例子:
src
└─ config
└─ apis
└─ dev
为了方便维护与开发,建议以当前对应模块或者功能命名文件夹,采用驼峰命名或者烤肉串大小写,尽量简洁明了。
例子:
src
└─ config
└─ store
└─ dev
建议图片文件夹命名与对应的页面文件命名保持一致,公共图片资源放置到 src/assets/img/base 目录下即可。
例子:
src
└─ assets
└─ img
└─ base
一般项目分主分支(master)和其他分支。 当有团队成员要开发新功能(Feather)或改 BUG(Fix) 时,就从 master 分支开一个新的分支。
版本号以 v 开头,根据当前仓库的 tag 编号进行累加,如:v1.10.45。
vue3-h5-tmp
├─ .env.development // 开发环境配置文件
├─ .env.production // 生产环境配置文件
├─ .env.test // 测试环境配置文件
├─ .eslintignore // ESLint 忽略文件配置
├─ .eslintrc-auto-import.json // ESLint 自动导入配置
├─ .eslintrc.cjs // ESLint 配置文件
├─ .npmrc // NPM 配置文件
├─ .postcssrc.js // PostCSS 配置文件
├─ .prettierrc.js // Prettier 配置文件
├─ .vscode // VSCode 编辑器配置文件夹
├─ env.d.ts // TypeScript 环境变量类型声明文件
├─ index.html // 项目入口 HTML 文件
├─ package.json // 项目配置文件
├─ pnpm-lock.yaml // pnpm 包管理锁定文件
├─ public // 静态资源目录
│ └─ static // 静态文件目录
├─ README.md // 项目说明文档
├─ run.bat // Windows 平台下运行脚本文件
├─ src // 源代码目录
│ ├─ App.vue // 应用主组件
│ ├─ assets // 资源文件夹
│ ├─ config // 配置文件夹
│ │ ├─ apis // API 接口配置
│ │ ├─ router // 路由配置
│ │ └─ store // Vuex 状态管理配置
│ ├─ layout // 布局组件
│ ├─ main.ts // 项目入口文件
│ ├─ packages // 包目录
│ │ ├─ request // 网络请求相关
│ │ ├─ router // 路由相关
│ │ └─ vConsole // 移动端调试工具配置
│ ├─ resources // 资源文件夹
│ │ ├─ components // 公共组件
│ │ └─ plugin // 插件配置
│ ├─ types // 类型定义文件夹
│ ├─ utils // 工具函数
│ ├─ views // 视图组件
│ └─ vue.d.ts // Vue 类型声明文件
├─ tailwind.config.js // Tailwind CSS 配置文件
├─ tsconfig.config.json // TypeScript 配置文件
├─ tsconfig.json // TypeScript 编译配置文件
└─ vite.config.ts // Vite 构建工具配置文件
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。