开箱即用的Vue3Web移动端开发模板

大家好，我是dyb-dev，今天给大家带来一款非常好用的移动端h5开发模板，该模板目前已开源，大家可放心使用！

话不多说先看实战效果：

也可前往站点地址或者GitHub地址查看

模板简介：

该模板集成了前端众多最新的技术栈，由 Vue3 + TS + Scss + Vite5 + Pinia  + Axios + Vant + @dyb-dev/vant-pro + PWA + VConsole + VSCode 组成

1. 插件方面内置了 markdownlint + eslint + prettier + stylelint + husky + prettier-eslint + vue-tsc 等插件，能够让你保证良好的代码格式规范和极高的开发效率

2. 配置方面内置了 markdownlint + eslint + vscode + prettier + stylelint 等配置，无需自己手动配置规则，另外还额外内置了众多非常实用的vscode插件推荐，并且你无需手动配置对应插件的配置

3. 工具包方面内置了 @vueuse/core + pinia-plugin-persistedstate + dayjs + query-string 等工具包，能够让你在组件封装、持久化状态储存、处理日期时间、处理URL上有优异的表现

4. 组件方面内置了通用的日历、列表加载、选择器、加载盒子、过渡盒子等组件，对于弹窗、对话框组件的提供了函数式调用等方式使用，并且内置了使用示例

5. 页面方面内置了通用的登录页，无需手动书写重定向逻辑，还内置了通用的 404 页面，这在访问不存在路由的场景下非常有用，并且你无需关注其实现，使用起来非常简单

6. 工具函数方面内置了 URL路径、表单验证、浏览器缓存、设备信息 等相关工具函数，使用起来非常简单高效，并且支持完善的TS类型提示

7. 构建工具方面内置了诸多工具方法，例如已经对代码块拆分、资源自定义、文件处理等方面已经做了完整的封装，只需更改相应配置即可，一般来说除特殊情况下不需要更改

请注意如果想感受最佳的开发体验，推荐VSCode编辑器，因为该模块内置了一套VSCode生态链插件拥有极佳的开发体验，最重要的是该模板统一在 .env 文件中进行配置，且配置简单，这代表着开发者无需注重代码环境，更专注于业务的开发，还等什么快快使用起来吧!

模板安装步骤：

1. 新建一个文件然后在终端中打开该文件，执行以下命令行：

// 如果你使用的是 npm 或者 yarn，那么只需把 pnpm 替换即可
pnpm create @dyb-dev/create-project@latest

2. 如果你能够看到以下界面就代表执行成功了

​​

3. 接下来继续输入 `.` ，然后选择 vue-web-template 模板

4. 如果下载成功将会呈现以下结果：

 好的到现在为止你已经讲模板拉取到你的本地了

 5. 这个时候只需执行一下命令便可运行起来了

// 初始化所有依赖包
pnpm install

// 本地运行
pnpm dev

使用期间还请大家多多关注 .env 和 .env.development 和 .env.production 等文件，大部分常用配置都包含在其中，详细使用还请查看源码，里面已有完整的注释提示

本文到这里就结束啦，希望能够帮助到大家！