上效果
演示地址
源码地址
使用的技术栈
前端
- vite: 一个刚出的构建工具，使用过后都说好，我是使用vite 来进行构建前端项目的。如何构建项目
- vue3: 这个也是刚出不久，许多生态也在慢慢的完善，关于vue2 升级到vue3的不同，可以查看
- element-plus：这是element团队推出支持vue3的ui组件库，我写文章这会儿还是测试版本，只是为了体验一下，顺便提点bug（感受一下不一样的bug）,哈哈
- vue-router: 支持vue3的路由
- scss： css 的预编译处理器
- axios 向后台发送请求的库，既支持服务端，也支持客户端
后台
- express：后台搭建服务的一个库，拥有良好的生态，例如：静态服务器，路由等
- log4js: 用于日志记录
- cors: 用于解决跨域的中间件
问题总结
element-plus form表单中 model 和 ref 的问题
描述： 在form 表单中，model 和 ref 使用相同的值，并且这个值是在setup 函数中对外导出会引起表单的值的改变，导致表单的值不正确，并且无法正确和表单赋值
解决办法：
model 和 ref 使用不一样的变量名称,详情 查看
vue3使用第三方插件需要使用对应vue版本问题
描述： 在vue 的项目中，需要使用第三方的包来实现某个功能, 使用在vue 的SFC中，会报一个警告： [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js",本项目使用 qrcode.vue这个包是可以直接支持vue3的，但是需要使用vue的别名
解决办法：
如果是vite搭建项目的话，在vite.config.js中直接指定vue的别名，如：'vue': 'vue/dist/vue.esm-bundler.js',详情，查看
vue3使用js插件问题(js插件)
描述： 这个js是指原生的js,不能是使用在vue2的插件，因为vue2插件里面的对应的vue实例不一样了。会报一个 插件打包方式的错误。
解决办法：
如果是vite搭建项目的话，在vite.config.js中加入以下配置：
optimizeDeps: { include: ["qrcanvas"] },
作用是：这样 vite 在执行 runOptimize 的时候中会使用 rollup 对 包含的 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules 下的.vite_opt_cache中，然后配合 resolver 对 包含的包 的导入进行处理：使用编译后的包内容代替原来 qrcanvas 的包的内容，这样就解决了 vite 中不能使用 其他js包 的问题，这部分代码在 depOptimizer.ts 里。
vue3在导入依赖问题
本人使用的是 webstorm 编辑器，在导入模块的话，会自动导入，但是导入的模块会报错，原因是，vue3是基于现代的浏览器，导入的每一个模块都需要加入后缀名
解决办法：
每一个模块手动加入后缀名
node中间件的加载顺序
const express = require('express'); const path = require('path'); // 创建一个服务 const app = express(); const {defaultLogger} = require('./../config/logger') // 使用vue页面导航中间件，必须要放在前面,这个是针对的路由模式是history const history = require('connect-history-api-fallback'); app.use(history({ index: '/html/index.html', htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], // 不加这一行，后面有的请求会被拦截 rewrites: [ // 匹配到api开头的，继续向下传递 { from: /^\/api/, to: function (context) { return context.parsedUrl.path; } } ] })); // 使用静态资源的中间件 app.use(express.static(path.resolve(__dirname, '../public'),{ index: ['html/index.html'], redirect: true, setHeaders: function (res, path, stat) { res.set("Access-Control-Allow-Origin","*") }, })); // 使用cors 跨域中间件 const cors = require('cors'); app.options('*', cors()) // 预检请求 app.use(cors({ "origin": "*", // 维护运行的的源头 "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", // 允许的请求方法名 "allowedHeaders": ['Authorization'], // 允许的请求头 "preflightContinue": true, // 解析完后，给下一个中间件 "optionsSuccessStatus": 200 // 响应的结果 })) // 使用urlencode 中间件来获取post contentType= application/x-www-form-urlencoded app.use(express.urlencoded({extended: true})) // 使用json 中间件来获取post contentTpe =application/json app.use(express.json()) // .... 业务逻辑的中间件 // 使用错误中间件 app.use(require('./../middleware/errorMiddleware')); app.listen(9011, () => { defaultLogger.info('服务启动了,正在监听9011端口，请请留意'); })
