Vue3接口封装（配合请求封装） {mtitle title="使用教程"/}配合使用： Vue3请求封装{mtitle title="新建一个api.js"/}/* * @Author: lzx * @Date: 2022-05-09 13:16:58 * @LastEditors: lzx * @LastEditTime: 2022-05-09 15:05:02 * @Description: Fuck Bug * @FilePath: \signature_vue_h5\src\api\api.ts */ import request from '../utils/request' /** * @description 用户登录 * @param {Object} data, **/ export async function Login (data) { return await request({ url: '/loginAdmin', method: 'post', data }) }

Vue3使用mitt.js传值接收 引入：npm i mitt -S 封装：mitt.js // mitt.ts用于兄弟间传递数据 import mitt from'mitt' export default mitt() 一些操作 mitt.emit('test', 方法/值/内容) // 传值方法 mitt.on('test', res => {接收}) // 接收传值方法 mitt.all.clear() // 卸载掉所有传值方法 mitt.all.clear() // 卸载掉所有传值方法 mitt.off('foo', onFoo) // 移除事件 // mitt.js的用法，通过 emit 方法添加事件，on方法接收，off 方法移除，clear清空所有(*监听所有)。

安装postcss-px-to-viewport，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件（有更新postcss弃用，附带vite.config.ts文件） 2022年6月6日vite编译显示插件弃用postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration解决方式：1、安装新的postcss-px-to-viewport-8-pluginnpm install postcss-px-to-viewport-8-plugin --save-dev 其他配置如下 也可以新建： module.exports = { plugins: { 'postcss-px-to-viewport-8-plugin': { unitToConvert: 'px', // 需要转换的单位，默认为"px" viewportWidth: 750, // 设计稿的视口宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 // 下面配置表示类名中含有'keep-px'都不会被转换 selectorBlackList: ['keep-px'], minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1338, // 横屏时使用的视口宽度 }, }, }; {mtitle title="vite.config.js文件配置"/}import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'; const resolve = str => path.resolve(__dirname, str) export default defineConfig(({ mode }) => { const ENV = loadEnv(mode, __dirname) const IS_DEV = ENV.VITE_APP_ENV !== 'production' return { base: './', resolve: { alias: { '@': resolve('src'), '@components': resolve('src/components'), '@utils': resolve('src/utils'), '@views': resolve('src/views'), '@assets': resolve('src/assets') }, extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, build: { // 公共路径(必须有的，不然打包css和js路径问题不加载) publicPath: './', // 打包构建输出路径 outDir: 'dist', // 生成静态资源的存放路径 assetsDir: 'static', // 构建后是否生成 source map 文件 sourcemap: IS_DEV, // chunk 大小警告的限制 chunkSizeWarningLimit: 700, // 生产环境移除 console minify: 'terser', terserOptions: { compress: { drop_console: !IS_DEV, drop_debugger: !IS_DEV } }, rollupOptions: { output: { manualChunks: { vlib: ['vue', 'vue-router', 'vuex'] } } } }, server: { port: 8088, open: true, proxy: { '/api': 'http://127.0.0.1:3000' }, cors: true }, css: { // 处理打包出现警告 "@charset" must be the first postcss: { plugins: [ /* require('postcss-px-to-viewport-8-plugin')({ * 2022年8月17日更新，使用require('postcss-px-to-viewport-8-plugin')引入 * vite报错：error when starting dev server:Error: * Dynamic require of "postcss-px-to-viewport-8-plugin" is not supported * 故此改为postcsspxtoviewport8plugin({ */ postcsspxtoviewport8plugin({ unitToConvert: 'px', // 需要转换的单位，默认为"px" viewportWidth: 1920, // 视窗的宽度，对应pc设计稿的宽度，一般是1920 // viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度 unitPrecision: 6, // 单位转换后保留的精度 propList: [ // 能转化为vw的属性列表 '*' ], viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: ['el-switch', 'is-checked'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。cretae minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 }), { postcssPlugin: 'internal:charset-removal', AtRule: { charset: atRule => { if (atRule.name === 'charset') { atRule.remove() } } } } ] } }, plugins: [ vue() ], } }) {mtitle title="postcss-px-to-viewport配置"/}安装postcss-px-to-viewport，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fpostcss%2Fpostcss) 插件. npm install postcss-px-to-viewport --save-dev 相应配置参数 { unitToConvert: "px", // 默认值`px`，需要转换的单位 viewportWidth: 375, // 视窗的宽度,对应设计稿宽度 viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定需要转换成视窗单位 fontViewportUnit: "vw", // 字体使用的视窗单位 selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 mediaQuery: false, // 允许在媒体查询中转换`px` minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位 replace: true, // 是否直接更换属性值而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件 landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1134 // 横屏时使用的视窗宽度 } unitToConvert: "px", // 默认值`px`，需要转换的单位 viewportWidth: 375, // 视窗的宽度,对应设计稿宽度 viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定需要转换成视窗单位 fontViewportUnit: "vw", // 字体使用的视窗单位 selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 mediaQuery: false, // 允许在媒体查询中转换`px` minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位 replace: true, // 是否直接更换属性值而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件 landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1134 // 横屏时使用的视窗宽度

Vue3配置开发环境和生产环境 1、创建开发环境项目根目录下创建.env.development文件# 页面标题 VUE_APP_TITLE = 标题 # 开发环境配置 ENV = 'development' # 连接地址 VUE_APP_API= "http://192.168.4.67:17000/sign/" 2、创建生产环境项目根目录下创建.env.production文件# 页面标题 VUE_APP_TITLE = 标题 # 测试环境配置 ENV = 'staging' # 连接地址 VUE_APP_API= "/sign/" 3、使用process.env.VUE_APP_API

Vue2/3实现dom拖动，Ctrl+鼠标滚轮放大缩小 1、在Vue2/3中dom拖动，Ctrl+鼠标滚轮放大缩小dom，可以使用@panzoom/panzoom库实现具体实现2、npm下载插件包 npm install @panzoom/panzoom -S 3、在需要的页面按需引入（也可以全局引入）,详细见下文代码块4、通过@wheel事件监听鼠标滚轮，调整dom大小（@wheel是只有当我们滚动鼠标滚轮的时候，才会触发）{mtitle title="Vue2实现方式"/}<template> // 需要拖动的dom <div ref="dom" @wheel="wheel"></div> </template> <script> import Panzoom from "@panzoom/panzoom"; // 页面挂载的时候就调用方法 export default { data () { return { panzoom: null } } mounted () { this.getPanzoomElement() }, methods: { // 拖动方法 getPanzoomElement () { // 存放Panzoom用于后面的其他操作 this.panzoom = Panzoom(this.$refs.dom, { // origin: "0 0", // 位置 maxScale: 2, // 最大比例 minScale: 0, // 最小比例 overflow: "auto", // 溢出 canvas: true, // 是否视为canvas }); } // 监听鼠标滚轮 wheel (event) { // 修改为根据鼠标位置缩放 if (event.ctrlKey) { // 这里可以扩展，比如按下其他案件+滚轮放大缩小等 const scaleResult = this.panzoom.zoomWithWheel(event); } } } } <script>{mtitle title="Vue3实现方式"/}<template> // 需要拖动的dom <div ref="wheelDom" @wheel="wheel"></div> </template> <script setup> // 按需引入 import { onMounted, reactive, toRefs,ref } from "vue"; import Panzoom from "@panzoom/panzoom"; // 引入插件 const wheelDom = ref(null); // ref获取dom // 响应式数据 const state = reactive({ panzoom: null }) // 拖动方法 const getPanzoomElement = () => { // 存放Panzoom用于后面的其他操作 state.panzoom = Panzoom(wheelDom.value, { // origin: "0 0", // 位置 maxScale: 2, // 最大比例 minScale: 0, // 最小比例 overflow: "auto", // 溢出 canvas: true, // 是否视为canvas }); } // 监听鼠标滚轮 const wheel = (event) => { // 修改为根据鼠标位置缩放 if (event.ctrlKey) { // 这里可以扩展，比如按下其他案件+滚轮放大缩小等 const scaleResult = this.panzoom.zoomWithWheel(event); } } // 页面挂载的时候就调用方法 onMounted(() => { getPanzoomElement() }); <script>