Vue事件中心管理传递--组件传值--传值 {mtitle title="新建js文件Bus.js"/}// 事件中心 import Vue from 'vue' export default new Vue(){mtitle title="A页面"/} // 引入事件中心传递 import Bus from '../../util/Bus' // 发送 Bus.$emit('名称', 数据){mtitle title="B页面"/}// 引入事件中心传递 import Bus from '../../util/Bus' // 接收，最好放在created里接收 Bus.$on('treeData', treeData => { this.treeData = treeData // console.log('我是树形：' + treeData) })

Vue简单封装Axios {mtitle title="新建api.js文件"/}/* * @Author: lzx * @Date: 2021-10-12 13:12:08 * @LastEditors: lzx * @LastEditTime: 2021-10-12 14:20:44 * @Description: Fuck Bug * @FilePath: \xsy-auth\src\util\api.js */ // 引入axios import axios from 'axios' // axios.defaults.baseURL = 'http://127.0.0.1:8000' // 设置请求后端的URL地址 axios.defaults.timeout = 2000 // axios请求超时时间 // // 头部携带token axios.defaults.headers.common.token = sessionStorage.getItem('token') // get请求 const get = (url, param) => { return new Promise((resolve, reject) => { axios.get(url, { param }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // put请求 const put = (url, data) => { return new Promise((resolve, reject) => { axios.put(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // delete请求 const del = (url, data) => { return new Promise((resolve, reject) => { axios.delete(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // post请求 const post = (url, data) => { return new Promise((resolve, reject) => { axios.post(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } export { get, put, del, post } {mtitle title="main.js中引用"/}// 引入封装的Axios import { get, put, del, post } from './util/api.js' // 使用封装的Axios Vue.prototype.$get = get Vue.prototype.$put = put Vue.prototype.$delete = del Vue.prototype.$post = post{mtitle title="全局页面中使用方式"/}// 1、get请求 thi.$get('url').then(res => { console.log(res.data) }) // 2、put请求 this.$put('url', {有携带 | 没有可以直接如下}).then(res => { console.log(res.data) }) this.$put('url').then(res => { console.log(res.data) }) //this.$delete...如上 //this.$post...如上

Vue2/3导出PDF或图片 1、npm引入相应的包npm i html2canvas -S npm i jspdf -S // 导出图片无需安装jspdf2、使用：引入封装的js，直接调用封装的方法并传入获取的dom和文件名字（封装好的方法见下文）<div ref="exportPDF"></div> // 需要导出的dom import exportPdf from '@utils/exportPDF' // 引入封装好的导出方法（见下文） // Vue3写法直接使用ref获取dom const exportPDF = ref(null) // 通过ref获取dom exportPdf(exportPDF.value, '排名列表统计') // 使用封装好的PDF方法 // Vue2写法通过this.$refs获取dom let dom = this.$refs.exportPDF.$el exportPdf(dom, '排名列表统计') // 使用封装好的PDF方法{mtitle title="封装的导出PDF方法"/}/* * @Author: lzx * @Date: 2022-04-06 13:39:55 * @LastEditors: lzx * @LastEditTime: 2022-04-06 14:51:34 * @Description: Fuck Bug * @FilePath: \cs_talk_admin\src\utils\exportPDF.js */ /** * 封装导出PDF方法 */ import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export function exportPdf (dom, title) { html2Canvas(dom,{ backgroundColor: "#ffffff", // 背景颜色 dpi: 96, // 将分辨率提高到特定的dpi,默认值为96 allowTaint: true, // 开启跨域 useCORS: true, // 是否尝试使用CORS从服务器加载图像(跨域) scrollY: 0, // Y轴偏移 scrollX: 0, // X轴偏移 scale: 1, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2 }).then((canvas) => { var contentWidth = canvas.width var contentHeight = canvas.height // 一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth // 未生成pdf的html页面高度 var leftHeight = contentHeight // 页面偏移 var position = 0 // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28 var imgHeight = (592.28 / contentWidth) * contentHeight var pageData = canvas.toDataURL('image/jpeg', 1.0) var PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(title + '.pdf') // 这里是导出的文件名 }) } {mtitle title="封装的导出图片方法"/}/* * @Author: lzx * @Date: 2022-04-06 13:39:55 * @LastEditors: lzx * @LastEditTime: 2022-04-06 13:39:55 * @Description: Fuck Bug * @FilePath: \tree\src\utils\exportImg.js */ /** * 封装导出图片方法 */ import html2Canvas from 'html2canvas' export function exportImg (dom, title) { html2Canvas(dom,{ backgroundColor: "#ffffff", // 背景颜色 dpi: 96, // 将分辨率提高到特定的dpi,默认值为96 allowTaint: true, // 开启跨域 useCORS: true, // 是否尝试使用CORS从服务器加载图像(跨域) scrollY: 0, // Y轴偏移 scrollX: 0, // X轴偏移 scale: 1, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2 }).then((canvas) => { // 生成图片，设置导出质量（0-1） var imgURL = canvas.toDataURL('image/jpeg', 1.0) // 创建a标签，模拟点击下载 const $a = document.createElement("a"); $a.setAttribute("download", title); $a.href = imgURL; $a.click(); }) }特别注意：网络图片存在跨越问题的，导出后会不显示图片，解决方法修改图片跨越问题，或者图片转换为Base64格式（本地图片也可），相应html2Canvas配置（跨域）见代码！

Vue3使用Ctrl+enter换行&组合键 执行 @keyup.enter.exact="send" // 发送消息，回车 @keyup.ctrl.enter="lineFeed" // 执行换行 const lineFeed = () => state.sendMessage = state.sendMessage + '\n' } 打印键盘事件，其中有个ctlKey的值，ctlKey是false的话就说明ctrl未按下，可以以此作为判断如下// 13是键盘回车值 if (e.ctlKey === true && e.keyCode = 13) { console.log("执行了我") }

创建一个Vue3+TS+vite项目 1、首先使用npm init vite@latest安装2、安装vue-router，npm install vue-router --save，src目录下创建router文件夹router文件夹内创建index.ts，配置如下import {createRouter, createWebHashHistory} from 'vue-router' const routes = [{ path: '/', name: 'Home', component: () => import('../views/home/index.vue'), meta: {title: '首页'} }]; const router = createRouter({ history: createWebHashHistory(), routes }); export default router 3、安装vuex，npm install vuex --save，src目录下创建store文件夹router文件夹内创建index.ts，配置如下import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } }) 4、main.ts中引入router如下import { createApp } from 'vue' import App from './App.vue' import router from './router' // 引入router import store from './store' // 引入vuex createApp(App).use(router).use(store).mount('#app') // 链式引入router和vuex 5、其他配置一、如需使用scss 1、npm i sass-loader 2、npm i node-sass 二、如需使用安装postcss-px-to-viewport，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 插件. 1、npm install postcss-px-to-viewport --save-dev 2、相应配置参数如下 { 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 // 横屏时使用的视窗宽度 } 三、安装element-plus及引入配置 npm i elem main.ts追加以下配置 import ElementPlus from 'element-plus' import zhCn from 'element-plus/es/locale/lang/zh-cn' import 'element-plus/theme-chalk/index.css' createApp(App).use(store).use(router).use(ElementPlus, { locale: zhCn }).mount('#app')6、注意事项一、vite引入scss报错 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it? 使用npm安装sass npm install sass --save-dev 二、element-plus的汉化问题 如果main.js引入的汉化无效的情况下，需要去往app.vue配置汉化，如下配置 <template> <test-vue /> <!-- 设置汉化 --> <el-config-provider :locale="locale"> <router-view/> </el-config-provider> </template> <script lang="ts"> import { ElConfigProvider } from 'element-plus' import zhCn from 'element-plus/lib/locale/lang/zh-cn' export default { components: { [ElConfigProvider.name]: ElConfigProvider }, setup () { return { locale: zhCn } } } </script>