# vue3+typescript+vite+element **Repository Path**: weiting7010/vue3-typescript-vite-element ## Basic Information - **Project Name**: vue3+typescript+vite+element - **Description**: 基于vue3+typescript+vite+element开发的一个后台管理系统 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: https://blog.csdn.net/qq_40190624/article/details/124935423?spm=1001.2014.3001.5501 - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 3 - **Created**: 2022-09-07 - **Last Updated**: 2022-09-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue 3 + TypeScript + Vite ### 启动项目 npm run dev ### 打包项目 npm run build ### 具体项目的搭建步骤地址 http://t.csdn.cn/kfAIU ### 当前req_1.1分支为页面主布局 > 左侧菜单收缩与展开 > 面包屑导航制作 > watch、computed的使用 > element plus组件Tabs标签的使用 > tabs选项卡制作点击左菜单对应的切换及高亮 ### tabs选项卡制作点击左菜单对应的切换及高亮 #### 功能分析 1、点击左侧菜单，右侧内容展示区显示对应的选项卡； 2、点击右侧选项卡，左侧对应菜单也要相应的选中； 3、解决刷新后，Tabs数据丢失的问题； window.addEventListener("beforeunload") #### 实现原理 1、点击菜单，显示对应的选项卡； watch监听路由path的变化，把当前路由的title 和 path 放到 Tabs选项卡对应的数据里面； 2、选项卡的激活设置: 把当前激活的选项卡v-model绑定项设为当前路由的path 3、点击选项卡，左侧对应菜单激活； 点击选项卡，跳转到对应的路由；只需要把选项卡的v-model绑定项设为当前路由的path，左侧菜单便可自动激活； 4、关闭选项卡 首页不能关闭；关闭时，删除当前选项卡；重新设置vuex里面的选项卡数据；并跳转到新的路由； 5、刷新浏览器时，选项卡数据丢失 window.addEventListener('beforeunload') ### 配置多人页面应入口 >在我们的生产项目中，系统的用户前台和管理后台放在了同一个代码仓库进行管理，这样两者可以共享系项目公共配置。 >但其实两个端之间基本没有业务关联，也不需要互相跳转，因此也没必要采用微前端那一套东西，更何况微前端是拆分仓库并且有强关联的项目采用的组织方式。 #### mono1 > 模块用来开发vue3页面 ### mono2 >模块我准备用来练习ts >如果页面都抽离成模块后记得改变，记得要修改文件之间的引用关系，接下来我们详细看项目配置方面的修改。 >首先，我们需要修改打包入口的配置。配置两个入口，分别对应各自的index.html文件所在位置。 #### vite.config.ts ``` build: { rollupOptions: { input: { main: path.resolve(__dirname, 'src/packages/mono1/index.html'), mono2: path.resolve(__dirname, 'src/packages/mono2/index.html'), }, }, }, ``` #### 修改package.json文件如下： // package.json ``` "scripts": { "mono1": "vite serve src/packages/mono1/ --config ./vite.config.ts", "mono2": "vite serve src/packages/mono2/ --config ./vite.config.ts", } ```