vue3+vant+vite移动端H5前端项目
vue3+vant4
项目地址
react项目代码:react项目代码
环境版本
nuc 16.10.9 (ncu -u)
nvm 1.1.11
node 20.0.0
npm 9.6.4
项目重要知识点
1. 采用 vue3 + vite + pinia
2.可通过配置路由实现页面缓存效果(路由插件+中央事件总线+keep-alive组件+component组件构成)
3. 使用 unplugin-auto-import
插件实现自动导入库、方法、函数、自定义等,以$global为前缀作为全局自动导入
4.使用unplugin-vue-components 插件实现自动导入UI库、指定文件下自动全局导入作为组件
5.通过模块化配置vite插件,在vite-config/plugins文件夹下配置vite插件
6.全局方法、变量有:$globalReady、$globalStore、$globalRegisterStore、$globalEventBus
$globalLang、$globalConfigure、$globalHttp、$globalRequestUrl、$globalRequest
$globalConstant、$globalRouter、$globalRouterModules、$globalExpandRouter
脚手架
master 分支使用 vite + pinia
项目安装
npm install 或 cnpm install
项目启动
npm run vite
项目打包
npm run build:dev
npm run build:prod
项目目录结构
|-- src
| |-- api // api地址
| |-- assets // 样式以及图片
| |-- common // 公用模块
| | |-- globalConfigure.js // 全局自动导入页面缓存初始化函数
| | |-- globalConstant.js // 全局自动导入常量
| | |-- globalEventBus.js // 全局通知实例
| | |-- globalExpandRouter.js // 全局自动导入路由处理方法
| | |-- globalHttp.js // 全局自动导入请求处理函数
| | |-- globalInitialize.js // 全局自动导入初始化方法
| | |-- globalLocales.js // 全局自动导入国际化方法
| | |-- globalRequest.js // 全局自动导入请求拦截方法
| | |-- globalRouter.js // 全局自动导入路由配置
| | |-- globalStore.js // 全局自动导入pinia处理函数
| |-- components // 全局自动注册组件
| |-- constant // 全局自动注册常量
| |-- locales // 多语言配置
| |-- router // 路由模块
| |-- store // pinia
| |-- util // 工具类
| |-- views // 页面
| |-- App.vue // 入口文件
| |-- main.js // 入口js文件
|--vite-config // vite配置
| |--plugins // vite插件配置
| |--index.js // vite处理配置
|--vite-env // vite环境配置
| |-- .env // 本地环境配置
| |-- .env.dev // 测试环境配置
| |-- .env.prod // 生产环境配置
|
|-- .eslintrc.js // es配置
|-- babel.config.js // babel配置
|-- vite.config.js // 脚手架配置
项目全局导入自定义函数、UI 库、自定义组件
(1)安装 unplugin-vue-components 插件用于导入组件库和自定义组件,安装 unplugin-auto-import 用于导入方法、变量等
(2)vite.config.js 配置说明
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { baseCfg, pluginCfg } from "./vite-config";
export default async ({ mode }) => {
const { VITE_BASE_URL } = loadEnv(mode, process.cwd());
return defineConfig({
...baseCfg({ VITE_BASE_URL }),
plugins: [vue(), ...(await pluginCfg({ VITE_BASE_URL }))],
});
};
(3) 对于vite.config.js配置,通过在vite-config/plugins文件夹下建js文件,在index.js会自动加载,在index.js文件内也可配置vite的基本配置
(4) 对于unplugin-auto-import.js的配置, 针对vue、vue-router、vue-i18n、pinia页面无需使用例如: import { useRouter } from "vue-router";
可以直接使用 const route = useRouter()
(5) 对于unplugin-auto-import.js的配置,针对对象内的配置自定义导入的,key为路径,值为数组的形式,
数组内的名称必须要与路径配置的文件export {}导
出的名称一致
(6) 针对unplugin-auto-import.js的自定义配置导出名称建议都以:$global作前缀定义,以说明是通过插件全局自动导入,
配置则在unplugin-auto-import.js文件内
(7) 对于unplugin-vue-components.js配置,会读取dirs项数组内的路径加载以extensions项配置的后缀名的文件,
目前以加载src/components下的所有.vue文件作为组件:
在文件夹内的index.vue文件时,组件会以文件夹名称作为组件名,例如:components/footer-nav/index.vue
组件名为<footer-nav></footer-nav>, 除index.vue以外的文件则以vue文件名作为组件。
(8) 规范化建议在components文件夹下的组件文件夹以分割号作为间隔命名文件夹名称,文件夹内建一个index.vue文件
(9) vue文件同名机制是以外层的文件优先作为组件,以文件排在前面的文件优先
项目路由原理
注意:本地调试时,在缓存页面进行刷新时可能会导致不触发路由通知初始化的情况 (缓存路由配置只能使用push、replace方式跳转)。
路由大体分为两种:缓存页面、不缓存页面
1.通过路由配置+路由插件+中央事件总线+keep-alive组件+component组件共同构成
2.配置不缓存组件:配置isKeepAlive为fasle或者不配置
{
path: "/setting",
name: "setting",
component: () => import("@/views/common/setting.vue"),
meta: {},
},
3.配置缓存路由:
(1)只要在src/router 内的所有模块js文件内的isKeepAlive设置为true,则页面起缓存效果
{
path: "/addressList",
name: "addressList",
component: () => import("@/views/common/addressList.vue"),
meta: {
isKeepAlive: true,
},
},
(2)在使用页面(缓存页面)的生命周期使用($globalConfigure已插件全局导入可直接使用),页面实现再次进入重载可定义一个变量(isReload)和在根元素配合v-if使用起到页面重新渲染效果
<template>
<div v-if="isReload"></div>
</template>
const isReload = ref(false)
onMounted(() => {
$globalConfigure(() => {
isReload = false
console.log("缓存页面时--总监听事件接收--用于初始化操作");
nextTick(()=>{
isReload = true
})
});
});
(3)在(2)的$globalConfigure内做当前页面初始化操作
通过以上四步配置达到效果是:使用push()、replace()方法跳进页面会初始化当前页面,在当前页面再跳入其他页面后,
再返回当前页面当前页面不会初始化起到缓存效果。例子:A->B->C, B页面缓存,C倒回B不初始化B页面,
当C倒回B倒回A后再由A-B页面会执行初始化函数$globalConfigure
4.配置无限A页面跳A页面缓存路由:
(1)只要在src/views/router 内的所有模块js文件内的isRouterKeepAlive需要设置为true,则页面起缓存效果
{
path: "/goodsDetail",
name: "goodsDetail",
component: () => import("@/views/common/goodsDetail.vue"),
meta: {
isRouterKeepAlive: true
},
},
(2) 在使用页面(缓存页面)的生命周期使用($globalConfigure已插件全局导入可直接使用),页面实现再次进入重载可定义一个变量(isReload)和在根元素配合v-if使用起到页面重新渲染效果 同上3.点
(3)使用push()、replace() 在query或parmas上带唯一标识(业务Id或时间戳)
(4)该配置实现的效果,A页面内有链接,点击跳转还是跳到A页面,但当业务id改变时,跳转后会触发页面初始化函数,在点击回退上一页面时,
上一页面缓存的是跳转前的页面数据。
5. 针对isKeepAlive与isRouterKeepAlive的优先级问题,isRouterKeepAlive优先级高于isKeepAlive
6.路由(编程式)传参
(1)使用query传参
跳转:
const router = useRouter();
router.push({
name: "路由名称",
query: { 参数 },
});
接收:
const router = useRouter();
const queryParmas = router?.currentRoute?.value?.query
(2) 使用state传参 (用于传较多参数)
跳转:
const router = useRouter();
router.push({
name: "路由名称",
state: { 参数 },
});
接收:
const stateParmas = history.state
项目国际化配置
src/locales文件夹下:
1.ZH-CN文件夹配置中文json
2.US-EN文件夹配置英文json
3.ZH-CN/common.json、US-EN/common.json 中配置时使用:$t("文件名.json文件内定义的key") 如 $t("common.home")
4. 远程接口配置国际化覆盖本地配置:接口返回的json格式要与本地配置的json格式一致才能起到远程覆盖本地的效果
项目 pinia 配置
1.src/store文件夹下的每个js文件代表一个模块
2.模块命名规则:use+文件名首字母大写(store唯一ID),如:Common.js,处理后模块为useCommon
3.本地起项目,若store中模块store唯一ID存在重复时,调试中会提示报错重复的具体store的ID
4.pinia持久化使用pinia-plugin-persistedstate插件,配置参考pinia-plugin-persistedstate官网
5.在Common.js内
export default defineStore("store唯一ID", {
state: () => ({}),
getters: {},
actions: {},
});
5.页面使用:
(1)const { useCommon } = $globalStore; // 已用插件导入全局(vue文件内可结构)
(2) 通过 $globalStore.模块名.(state/getters/actions)的变量或方法进行使用。
useCommon.subMsgKey; // 使用state
useCommon.SET_GOODS_NUM(); //调用actions
项目组件 name 属性设置
1.安装vite-plugin-vue-setup-extend插件,在vite.config.js进行插件配置,
在vite-config/plugins下建vite-plugin-vue-setup-extend.js文件
import setupExtend from "vite-plugin-vue-setup-extend"; //组件命名插件
const vueSetupExtend = (viteEnv = {}) => {
return setupExtend();
};
export { vueSetupExtend };
2.在页面组件内使用:
<script setup name="wc-test-global-2">
onMounted(() => {});
</script>
项目图片