Vite2+Vue3的h5开发模板——开箱即⽤h5-vite-vue3-template
开箱即⽤的 h5 开发模板。技术栈：Vite/Vue3/Scss/
⽬录简介网页app
├── index.html              # index.html 模板
├── jsconfig.json            # JavaScript 配置
├── package.json            # package.json
├── public                  # 静态资源⽬录（不会被处理）
│├── favicon.ico          # 图标
│└── fixIosTitle.html    # ⽤于载⼊iframe以设置ios⽹页title
├── src                      # 主要源代码⽬录
│├── App.vue              # 主要app组件
│├── api                  # api服务⽬录
││├── map.js          # 服务端数据映射
││└── request.js      # ⽹络请求器
│├── assets              # 静态资源（会被vite处理）
│├── components          # 组件⽬录
│├── config              # 静态配置
│├── main.js              # app⼊⼝⽂件
│├── pages                # 页⾯⽬录
│├── router              # 路由
│├── store                # 全局状态
│├── styles              # 全局样式⽬录
││├── base.scss        # 基础样式
││├── iconfont.scss    # 图标字体样式
││├── index.scss      # 全局样式⼊⼝
││├── mixins.scss      # 样式函数
││├── vant.scss        # 复写UI组件样式
││└── vars.scss        # 样式变量
│└── utils                # ⼯具
│├── auth.js          # 权限处理
│├── filters.js      # 渲染⽤的全局⽅法
│├── index.js        # 通⽤的⼯具⽅法
│└── storage.js      # 与存储相关的⽅法
├── fig.js          # vite配置
依赖
⾃作主张地引⼊了觉得好⽤的依赖：
eslint：⽤于代码风格检测
prettier：⽤于代码格式化
vite-plugin-pages：⾃动按⽬录⽣成页⾯路由
unplugin-vue-components：⾃动按需引⼊组件
vant：优秀的移动端 UI 框架，⽀持 Vue3
vite-plugin-style-import：按需引⼊ vant 的样式⽂件
postcss-px2vp：⽤于将设计稿的 px 转换为 vw 单位
IDE 相关
推荐的 VSCODE 插件：
Volar：Vite 官⽅推荐的插件，包含语法提⽰、⾃动补全等姑娘
Prettier：美化代码
Eslint：代码质量检查
推荐 VSCODE setting.json 按如下配置：
{
"l":"\n",
"editor.tabSize":2,
"editor.formatOnSave":true,
"editor.defaultFormatter":"esbenp.prettier-vscode",
"eslint.validate":["javascript","javascriptreact","vue","typescript","typescriptreact"], "deActionsOnSave":{
"source.fixAll.eslint":true
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。