用最新的前端技术开发一个H5的通用架子,让前端同学开箱即用,迅速投入战斗。
项目源码在文章结尾处,记得查收哦~
如果有帮助到你,请点个 star~
- 常用目录别名
- Vant/Rem适配
- scss支持、_mixin.scss、_variables.scss
- 页面标题
- 模块化自动注册:自动注册router/自动注册Vuex
- axios封装、api管理、请求代理
- 生产环境优化
alias: {
'@': '/src',
'assets': '/src/assets',
'components': '/src/components',
'config': '/src/config',
'router': '/src/router',
'api': '/src/api',
}
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字体大小是 37.5
propList: ['*'],
selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换
}
}
}
选择scss作为css预处理,并对 variables、common.scss作全局引入。
css: {
preprocessorOptions: {
// 引入公用的样式
scss: {
additionalData: `@import "@/styles/common.scss";@import "@/styles/variable.scss";`,
}
}
}
vuex, router模块化
使用vite import.meta.globEager 方法获取文件上下文
下面用路由自动注册为例
//模块化路由,将router 文件夹下的ts文件内路由自动导入
const routesModules = import.meta.globEager('./**/*.ts')
const modules:Array<RouteRecordRaw> = []
Object.keys(routesModules).forEach(key => {
modules.push(...routesModules[key].default)
})
routes = routes.concat(modules)
const router = createRouter({
history: createWebHashHistory(),
routes
});
路由meta
内添加元信息,不设置默认为false
is_show_footer
:是否显示底部栏is_show_footer
: 是否显示顶部导航栏keepAlive
:是否缓存页面
配合vue-router
的beforeEach
获取meta信息,不填meta默认为false, 数据保存到veux 内,方便后续业务做更多扩展设置
上线前,得优化一下资源了,该项目做了如下几步操作
- 使用br压缩代码,配置文件见 vite.config.ts
- 移除掉debugger/console