随笔分类 - vue
摘要：
前言 前端导出表格有很多种方案，但是表格样式一旦复杂了，那么就得用代码写excel的样式，还是比较麻烦的。每次样式不一样，就得重新写，这时使用表格模板的优势就体现出来了，想导出不同样式的表格直接修改表格模板即可。 方案 我找了两种方案： 1、使用xlsx-template，利用模板语法在xlsx中占
阅读全文
前言 前端导出表格有很多种方案，但是表格样式一旦复杂了，那么就得用代码写excel的样式，还是比较麻烦的。每次样式不一样，就得重新写，这时使用表格模板的优势就体现出来了，想导出不同样式的表格直接修改表格模板即可。 方案 我找了两种方案： 1、使用xlsx-template，利用模板语法在xlsx中占
阅读全文
摘要：
前言 最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
阅读全文
前言 最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
阅读全文
摘要：前言 之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的，想了下，前端其实可以直接canvas实现，减轻服务器压力。 实现 子组件，允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接
阅读全文
摘要：
前言 在公司年会期间我做了个抽奖小项目，我把它分享出来，有用得着的可以看下。 浏览链接：http://xisite.top/original/other/luckDraw/index.html 项目链接：https://gitee.com/xi1213/luck-draw (欢迎star!) 项目截
阅读全文
前言 在公司年会期间我做了个抽奖小项目，我把它分享出来，有用得着的可以看下。 浏览链接：http://xisite.top/original/other/luckDraw/index.html 项目链接：https://gitee.com/xi1213/luck-draw (欢迎star!) 项目截
阅读全文
摘要：
前言 这段时间一直在做可视化，在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单，我将其单独抽离出来形成一个demo，为保密demo中数据非真实数据。先看效果。 具体效果 链接相关 浏览链接：http://xisite.top/original/bigScreen/29/index.
阅读全文
前言 这段时间一直在做可视化，在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单，我将其单独抽离出来形成一个demo，为保密demo中数据非真实数据。先看效果。 具体效果 链接相关 浏览链接：http://xisite.top/original/bigScreen/29/index.
阅读全文
摘要：
具体需求 在我的疫情可视化项目中有一个功能需要导出word文档，在页面点击按钮后处理数据生成word文件，然后自动下载文档。 实现步骤 多番查询后发现前端导出word，使用docxtemplater较为方便。具体使用步骤如下： 安装docxtemplater：npm i docxtemplater
阅读全文
具体需求 在我的疫情可视化项目中有一个功能需要导出word文档，在页面点击按钮后处理数据生成word文件，然后自动下载文档。 实现步骤 多番查询后发现前端导出word，使用docxtemplater较为方便。具体使用步骤如下： 安装docxtemplater：npm i docxtemplater
阅读全文
摘要：
发现问题 在使用vue开发大屏时，发现了一个很好用的可视化组件库DataV，不是阿里那个DataV哈，用vue2开发时都一切顺利，直到有一天升级项目到vue3时，发现一堆报错，后面查了下，好像是DataV不兼容vue3。 解决办法 查了github的pull requests，处理办法也挺简单： 1
阅读全文
发现问题 在使用vue开发大屏时，发现了一个很好用的可视化组件库DataV，不是阿里那个DataV哈，用vue2开发时都一切顺利，直到有一天升级项目到vue3时，发现一堆报错，后面查了下，好像是DataV不兼容vue3。 解决办法 查了github的pull requests，处理办法也挺简单： 1
阅读全文
摘要：
跨域是什么 简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。 解决跨域 我是用vue开发的，就vue代理模式解决跨域说明一下。 1、在vue.config.js中这样写： let devProxy = { //获取ip
阅读全文
跨域是什么 简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。 解决跨域 我是用vue开发的，就vue代理模式解决跨域说明一下。 1、在vue.config.js中这样写： let devProxy = { //获取ip
阅读全文
摘要：
前言 前端在开发过程中若是管理系统之类的业务系统，则大多都会涉及到表格的处理，其中最为常见的就是表格的导入导出。有很多办法都可以实现，其中最简单的还是使用插件xlsx。 实现目标 1、对表格数据进行增加、删除。 2、表格数据的导出、导入。 具体逻辑 增加、删除功能比较简单，直接利用vue数据的响应式
阅读全文
前言 前端在开发过程中若是管理系统之类的业务系统，则大多都会涉及到表格的处理，其中最为常见的就是表格的导入导出。有很多办法都可以实现，其中最简单的还是使用插件xlsx。 实现目标 1、对表格数据进行增加、删除。 2、表格数据的导出、导入。 具体逻辑 增加、删除功能比较简单，直接利用vue数据的响应式
阅读全文
摘要：
前言 由于业务需求，需要有一个图片标记功能，其实就是对图片画框画线做标记，类似微信的图片编辑 但是需要存下标记图及其标记的具体数据,。功能其实很简单，但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo，作为记录，同时你们在开发过程中有类似需求的话也可以参考一下该思路，其
阅读全文
前言 由于业务需求，需要有一个图片标记功能，其实就是对图片画框画线做标记，类似微信的图片编辑 但是需要存下标记图及其标记的具体数据,。功能其实很简单，但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo，作为记录，同时你们在开发过程中有类似需求的话也可以参考一下该思路，其
阅读全文
摘要：
发现问题 vue项目完成打包出dist后准备打开index.html，发现居然页面是一片空白，f12一片报红。 分析问题 经过多次网上查询后发现这是由于vue打包时，脚手架会帮你配置好大量参数，但其中路径publicPath被配置为了"/",需要手动修改。 解决办法 1、将vue.config.js
阅读全文
发现问题 vue项目完成打包出dist后准备打开index.html，发现居然页面是一片空白，f12一片报红。 分析问题 经过多次网上查询后发现这是由于vue打包时，脚手架会帮你配置好大量参数，但其中路径publicPath被配置为了"/",需要手动修改。 解决办法 1、将vue.config.js
阅读全文
摘要：
在vue开发过程中为了减少重复代码，很多时候都需要将重复的部分写成一个组件，方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写，事件则会失效： 正确写法应该是这样：
阅读全文
在vue开发过程中为了减少重复代码，很多时候都需要将重复的部分写成一个组件，方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写，事件则会失效： 正确写法应该是这样：
阅读全文
摘要：
每次点击方块时通过三元表达式，改变对应的class，每一个不同的class对应不同的样式，从而通过改变class实现样式的切换。 实现代码 <template> <div class="container"> <!--通过三元表达式选择class使用对应的样式--> <div v-for="item
阅读全文
每次点击方块时通过三元表达式，改变对应的class，每一个不同的class对应不同的样式，从而通过改变class实现样式的切换。 实现代码 <template> <div class="container"> <!--通过三元表达式选择class使用对应的样式--> <div v-for="item
阅读全文
摘要：
父传子 利用props传值，子组件中规定props数据类型，然后父组件使用子组件时需要绑定数据在子组件上： 父组件 <template> <div class="parents-div"> <!--绑定msg传入子组件--> <Children :msg='msg'/> </div> </templ
阅读全文
父传子 利用props传值，子组件中规定props数据类型，然后父组件使用子组件时需要绑定数据在子组件上： 父组件 <template> <div class="parents-div"> <!--绑定msg传入子组件--> <Children :msg='msg'/> </div> </templ
阅读全文
摘要：
vuex是什么 vuex是一个专门为vue开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态，其核心是state。 vuex中有什么 state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。 gett
阅读全文
vuex是什么 vuex是一个专门为vue开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态，其核心是state。 vuex中有什么 state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。 gett
阅读全文
摘要：
1、vscode中打开：文件>首选项>用户片段>输入vue按下回车 2、复制下面代码并保存。 点击查看代码 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=''></div>", "</tem
阅读全文
1、vscode中打开：文件>首选项>用户片段>输入vue按下回车 2、复制下面代码并保存。 点击查看代码 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=''></div>", "</tem
阅读全文
摘要：
安装npm 1、检查node，未安装在这里下载最新版安装。 2、检查npm，node自带npm但不是最新版本，需要命令更新：npm install -g npm 安装vue脚手架 1、在国内下载时网络会出问题,建议淘宝镜像下载，配置镜像：npm install -g cnpm --registry=
阅读全文
安装npm 1、检查node，未安装在这里下载最新版安装。 2、检查npm，node自带npm但不是最新版本，需要命令更新：npm install -g npm 安装vue脚手架 1、在国内下载时网络会出问题,建议淘宝镜像下载，配置镜像：npm install -g cnpm --registry=
阅读全文
摘要：
安装 1、安装element-ui：npm i element-ui -S。 2、安装babel-plugin-component：npm install babel-plugin-component -D。 修改 1、在项目根目录下新建.babelrc文件： 2、在.babelrc中写入： 点击查
阅读全文
安装 1、安装element-ui：npm i element-ui -S。 2、安装babel-plugin-component：npm install babel-plugin-component -D。 修改 1、在项目根目录下新建.babelrc文件： 2、在.babelrc中写入： 点击查
阅读全文
摘要：
安装 1、安装sass：npm i sass。 2、安装sass-loader：npm i sass-loader@10.1.1。(安装sass-loader时会出现版本报错，建议使用10.1.1) 使用 在style标签中写入lang='scss'(勿误写为sass)，样式代码直接嵌套编写，更加直
阅读全文
安装 1、安装sass：npm i sass。 2、安装sass-loader：npm i sass-loader@10.1.1。(安装sass-loader时会出现版本报错，建议使用10.1.1) 使用 在style标签中写入lang='scss'(勿误写为sass)，样式代码直接嵌套编写，更加直
阅读全文
