前端技术栈：Vite3+Vue3+TypeScript+Pinia+Element-plus后台管理系统模板-阿里云盘地址：https://www.aliyundrive.com/s/B7VuYPpR1yT提取码: h42hGit地址：https://gitee.com/lingfeng9527/web_admin.git页面截图：（登录，用户管理，权限管理，菜单管理，文章分类，文章列表）等vite3Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。你可以在 为什么选 Vite 中了解更多关于项目的设计初衷。vue3vue3.0 向下兼容 vue2.x 版本，优化了主要核心双向绑定原理和体积大小，并且更加友好的兼容 ts 语法。打包大小减少初次渲染快 , 更新渲染快内存减少TypeScriptTypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。PiniaPinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：dev-tools 支持热模块更换插件：使用插件扩展 Pinia 功能为 JS 用户提供适当的 TypeScript 支持或 autocompletion服务器端渲染支持

1、静态部署//pnpm打包 pnpm run generate代码传到（或Jenkins构建）到linux服务器，用常用的Nginx静态部署就可以2、build 打包 pm2部署pnpm run build在根目录新建pm2配置文件：ecosystem.config.jsmodule.exports = { apps: [ { name: 'blog', exec_mode: 'cluster', instances: 'max', script: '.output/server/index.mjs', env: { NITRO_PORT: 3000, NITRO_HOST: '127.0.0.1', }, }, ], }启用pm2pm2 restart ecosystem.config.js pm2 save pm2 list到此结束就可以访问了。

1、路由跳转变量修改问题想实现根据路由名称的不同修改变量registerRoute的状态，从而通过这个变量来控制某一组件的显示与隐藏因为是在模板文件中添加的，先直接尝试将data中变量设置为registerRoute:this.$route.name === 'gszc'?true:false，然后发现行不通，因为模板文件中路由跳转时页面未刷新，因此data中值的改变并不会立即更新视图，所以需要将修改的方法放在updated钩子函数中，如此点击链接跳转路由时视图就会立即更新了... updated(){ this.registerRoute = this.$route.name === 'gszc'?true:false }2、mand mobile中swiper组件事件监听问题如果要给swiper内部的元素添加事件监听，需要在md-swiper标签上添加is-prevent="false"，因为他默认为true，不设置的话将会阻止默认的事件3、elementUI中el-select传值为对象的问题业务有一个添加和编辑表单的功能，后端要求通过表单接收两个值，一个部门ID一个部门名字，且要求这俩值与其他属性平级，因此将select的option的value绑为一个对象，在提交的方法里再将value的值取出，放入表单的对象中进行传值，el-select中识别对象的标识仅需要添加value-key即可，添加功能没啥问题编辑时需要接受后端传来的值，我本来的想法是将接收到的值处理成和option绑定value一样的对象，但发现死活渲染不上，然后通过console比对俩对象，发现根本不相等，接着就想到根据接收到的部门ID获取当前部门在options数组中的下标，然后将数组中对应下标的对象绑定到v-model，这样就能成功渲染了4、父级html给子级iframe传值跨域问题父级使用PostMessage传值给子document.getElementById('iframe').contentWindow.postMessage('message', '*') //message为传过去的数据，字符串、对象、数组均可，*代表任意域名子级使用window.addEventListener接受数据window.addEventListener('message', function(e){ console.log(e.data) })由于子级iframe加载较慢，使用PostMessage发送数据时要等子级加载完成后方能发送，否则发过去子级也接收不到，因此需要将代码写在window.onload中(此bug困扰我接近1天，实在不应该)5、vue中关于路由拦截与组件生命周期的顺序问题router.beforeEach会比组件的周期先执行，我在组件的destroyed周期中执行了函数，本以为会是它先销毁再执行路由拦截中的方法，没想到是先执行路由拦截的方法，再执行组件的生命周期路由跳转时组件之间的生命周期顺序，先执行to组件的beforeCreate,created,beforeMount以后再执行from组件的destroyed，接着才是to组件的mounted6、vue项目中的代理配置问题vue2的代理配置在vue.config.js中，配置好后axios的baseUrl路径也应该改成'/api'(如果代理配置的前缀是/api的话)，如果baseUrl的路径为全路径的话代理将会不起作用7、点击提交按钮时页面刷新的问题提交按钮的button位于form标签中，没有加type，所以表单会执行提交操作，会刷新页面，需要给button加上type="button"阻止默认提交事件8、换行相关问题在内容中添加\n进行换行时，页面并未渲染\n字符，但也没有换行效果，这里需要给他的父级css加上white-space:pre-line属性，这样就可以生效了9、浏览器preview和response的值不一致浏览器会自动把response中的值转成JSON格式，再显示到preview中，然而JavaScript存在数字精度问题，因此当接口的值（例如id）是多位数字而不是字符串时，转换时会出现数字不一样的问题，因此要以response的值为准

安装包出现类似于Running postinstall script... 等错误Progress: resolved 566, reused 524, downloaded 0, added 0, done node_modules/.pnpm/registry.npmmirror.com+pngquant-bin@6.0.1/node_modules/pngquant-bin: Running postinstall script... node_modules/.pnpm/registry.npmmirror.com+gifsicle@5.2.0/node_modules/gif方案1.只需要找到对应的包名重新安装，在xxx.lock.yaml添加对应包名并锁定版本即可方案2.使用cnpm安装包再使用当前包命令安装一次即可，如yarn-lock，使用的yran，先用cnpm再用yarn