Vue
文章平均质量分 51
小火车况且况且
这个作者很懒,什么都没留下…
展开
-
Vue实现列表的无缝滚动功能
【代码】Vue实现列表的无缝滚动功能。原创 2024-05-27 15:40:58 · 567 阅读 · 0 评论 -
Vue3中使用provide和inject依赖注入完成父组件和孙子组件之间参数传递
官网介绍注意以下写法都是使用依赖注入-子组件在页面绑定点击事件之后, 孙子组件就可以给父组件传递参数了原创 2023-11-15 16:33:58 · 413 阅读 · 0 评论 -
通过monorepo管理多个子项目
在 模式下,根目录通常不建议直接安装依赖,而是通过工作区来管理依赖。但是在一些情况下,在根目录安装一些共享依赖也是可以的。创建一个文件, 两个子项目分别是和使用的脚手架创建项目时,可以不用先创建文件夹,通过按照步骤选择自己功能说明: 通过用来在根目录安装共享依赖, 其他子项目可以使用原创 2023-09-25 15:42:49 · 977 阅读 · 0 评论 -
package中添加一条命令,用来自动选择包管理器进行依赖安装
中的添加文件目录为的文件为说明官网地址Node.js 中 child_process 模块的 execSync 方法用于同步执行 shell 命令。execSync 方法的主要特征和用法如下:选项:cwd - 子进程的当前工作目录input - 输入给命令的内容stdio - 子进程 stdin/stdout/stderr 配置env - 环境变量键值对shell - 子进程的 shelluid/gid - 设置用户/组 id和 exec 的区别是 execSync 是同原创 2023-09-21 16:32:01 · 213 阅读 · 0 评论 -
在 Vite 项目中直接使用 Node.js 的 import 会报 Cannot use import statement outside a module 错误
【代码】在 Vite 项目中直接使用 Node.js 的 import 会报 Cannot use import statement outside a module 错误。原创 2023-09-21 14:23:28 · 1554 阅读 · 0 评论 -
Vue绑定自定义属性data, 并且获取数据
data。原创 2023-04-21 09:56:25 · 1526 阅读 · 1 评论 -
在Vue3中使用pdfjs预览pdf文件
主要使用的形式是使用官方的示例文件, 通过引入地址将下载好的文件解压移动和文件到项目的文件夹下封装组件使用效果使用本地资源使用线上地址原创 2023-04-18 18:28:57 · 1121 阅读 · 0 评论 -
Vue的子组件props设置多个校验类型
Vue子组件参数校验原创 2023-03-09 09:39:52 · 324 阅读 · 0 评论 -
Vue-Cli在index.html中进行环境判断
Vue-Cli在index.html中进行环境判断原创 2022-12-28 14:29:13 · 978 阅读 · 0 评论 -
JS读取本地CSV文件数据
文件中的部分数据如图需求是需要提取出文件的数据使用到的模块是 Papa Parse的基本使用可以参考官方demo首先需要注意, 解析本地文件, 需要的文件格式是从中获得的对象, 不能直接使用导入文件以下方法直接导入是不可行的2.1 使用文件上传的形式这里使用的上传组件因为使用的是本地直接导入, 所以数据的结果需要在函数中接受文件格式和数据的结果如下2.2 创建请求, 相当于已经将数据获取, 通过整理需要注意的结果如下,也就是说相当于已经将数据获取XMLHttpRequest.ov原创 2022-12-03 16:02:12 · 6536 阅读 · 1 评论 -
Vite结合Vue删除指定环境的console.log
ViteVue。原创 2022-11-14 20:28:31 · 1184 阅读 · 0 评论 -
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法原创 2022-11-09 20:24:58 · 2370 阅读 · 0 评论 -
vue中的index.html中通过script标签导入的全局变量,eslint提示is not defined
eslint全局变量报错原创 2022-09-14 09:49:02 · 1598 阅读 · 0 评论 -
使用canvas绘制四个角的指定样式
放在一个父盒子中, 通过定位实现视觉效果。进行封装一个公用的组件形式, 将内容。原创 2022-08-29 14:51:55 · 634 阅读 · 0 评论 -
Vue3中setup通过ref获取子组件的属性
子组件通过defineExpose抛出数据 父组件通过 ref 获取数据原创 2022-07-24 16:20:17 · 1117 阅读 · 0 评论 -
PC端的一些简单适配
PC端的一些简单适配原创 2022-07-06 19:17:22 · 3424 阅读 · 0 评论 -
Vue/cli加快打包速度
Vue/cli加快打包速度1. external + CDN的方式Vue 中使用externals和CDN来优化项目的体积, 可以参考老夫之前写的方式2. thread-loader请仅在耗时的操作中使用此 loader!thread-loader文档地址 使用时,需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行安装yarn add thread-loader -D 在vue.config.js中添加l原创 2022-05-14 13:56:49 · 2046 阅读 · 0 评论 -
Vue3.x的版本中build后dist文件中出现legacy的js文件
Vue3.x的版本中build后dist文件中出现legacy的js文件1. 问题描述出现的主要原因可以参照vue脚手架文档的解释(这里是英文文档, 主要是目前老夫写这个博客时, 中文文档没有这个页面)vue现代模式说明老夫的理解其实就是官方目前为了开启<script type="module">的现代模式, 又为了适配低版本的浏览器从而添加<script nomodule>, 其实最直观的感受就是打包的速度变慢了🚨🚨🚨 老夫使用的是yarn各位彦祖可以直接替换为npm的原创 2022-05-14 12:21:08 · 2354 阅读 · 1 评论 -
Vue3中注册全局的组件,并且在 TS 中添加全局组件提示
Vue3中注册全局的组件1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入✨: 如果使用的是 JS 可以删除类型校验import type { Component } from 'vue'import SvgIcon from './SvgIcon/index.vue'// ✨如果使用的是 JS 可以删除类型校验const components: { [propName: string]: Component} = { SvgIcon}e原创 2022-05-13 17:02:42 · 5414 阅读 · 0 评论 -
Vue中在setup下使用自定义指令
Vue中在setup下使用自定义指令1. 局部的自定义指令html中 v-img-rotote为自定义指令<div class="card-item"> <div class="img"> <img v-img-rotote src="~@/assets/images/funny.png" /> </div> <div class="text-title lineEllipsisOne">小火车况且况且</div&g原创 2022-05-13 16:38:44 · 1004 阅读 · 0 评论 -
Vue中使用marked
Vue中使用markedmarked官方文档官方demo地址1. 安装依赖yarn add marked highlight.js -S, 其中 highlight.js用来高亮代码块2. 使用(语法是V3 setup+ TS )import 'highlight.js/styles/monokai-sublime.css' 是用来设置代码块的样式<template> <div class="markdown-box"> <!-- 书写区域 -->原创 2022-04-28 17:27:16 · 3451 阅读 · 0 评论 -
Vue2.x中修改父组件数据的.sync替换为Vue3.x的@update
Vue2.x中修改父组件数据的.sync替换为Vue3.x的@update官方地址2.x语法父组件<!-- 标准写法: --><ChildComponent :title="pageTitle" @change="pageTitle = $event" /><!-- 是以下的简写: --><ChildComponent :title.sync="pageTitle" />export default { data() { retur原创 2022-04-26 15:14:39 · 1671 阅读 · 0 评论 -
Vue3.2 + Vite2.6 + TS 中注册的全局组件添加代码提示
Vue3.2 + Vite2.6 + TS 中注册的全局组件添加代码提示1. 问题说明注册的全局组件直接引用会发现没有之前的代码提示和高亮效果全局组件SvgIcon中的icon-name参数是必填的但是直接引用不会标红提示 如果是局部引用了该组件,就会出现代码标红提示2. 处理方法volar的说明文档地址在main.ts同级中,添加一个components.d.ts文件即可import SvgIcon from '@/components/SvgIcon/index.vue'dec原创 2022-01-17 15:17:00 · 2726 阅读 · 0 评论 -
Vue3.2 +Vite添加Svg的使用
Vue3.2 +Vite2.6添加Svg的使用1. 安装依赖插件vite-plugin-svg-iconsyarn add vite-plugin-svg-icons -D 目前使用的版本是1.1.02. 配置vite.config.tsiconDirs所有的 svg的文件都存放在该文件夹下symbolId指定use标签中href格式import { defineConfig } from 'vite'import { resolve } from 'path'import vitePl原创 2022-01-17 14:52:01 · 965 阅读 · 0 评论 -
Vue项目中添加钉钉登录
钉钉登录说明:目前使用的钉钉后台还在更新中,可能和文章展示的不同1. 准备工作,首先需要有自己管理的部门1. 进入开发者后台扫码登陆,如果是组织的管理者就直接选择进入2. 不是组织管理者首先注册创建团队创建成功进入手机APP查看3. 如果是管理者扫码登陆选择组织创建的个人团队目前只演示企业内部开发,创建应用为H5微应用或者小程序都可以返回首页选择进入,添加回调域名,这里使用的是开发环境,所以添加了当前项目运行的地址和端口号进入工作台4.前端开发过程原创 2021-08-30 21:29:38 · 2348 阅读 · 4 评论 -
Vue路由模式设置为history,nginx的配置
Vue路由模式设置为history,nginx的配置1. Vue的路由模式设置为historyconst router = new Router({ mode: 'history', routes: routes,})2. nginx的配置,主要就是添加try_files $uri $uri/ /index.html;http { include mime.types; default_type application/octet-stream;原创 2021-08-05 16:30:45 · 1083 阅读 · 0 评论 -
ElementUI中tooltip出现无法显示的问题
ElementUI中tooltip出现无法显示的问题代码,当el-tooltip标签中的元素添加v-if时候,会出现无法显示问题<el-tooltip class="item" effect="dark" width="200" placement="top"> <div slot="content" style="width: 400px"> {{ scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原创 2021-06-29 21:37:59 · 3149 阅读 · 0 评论 -
Vue使用vue/cli2的版本出现打包之后css背景图地址错误
Vue使用vue/cli2的版本出现打包之后css背景图地址错误原文地址解决方法到配置文件build/utils.js中修改打包的配置在cssLoaders配置中添加代码publicPath: "../../",exports.cssLoaders = function(options) {... if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: "原创 2021-04-15 11:14:20 · 175 阅读 · 1 评论 -
Vue获取两个时间点之间的所有间隔时间
Vue获取两个时间点之间的所有间隔时间说明 使用的是vue@2.6.12和elementUI@2.14.1使用的是TS,用来校验数据格式所有返回的数据都是在时间前面自动补全了0使用的主要方法是new Date().setFullYear()设置当前的时间,如果传入的时间是new Date().setFullYear(2020,12,32),该方法会自动将时间转化为2021-1-1的时间戳 **如果有一个参数超出了合理的范围,setFullYear 方法会更新其他参数值,日期对象的日原创 2021-01-12 17:39:54 · 2724 阅读 · 1 评论 -
vue项目打包开启Gzip压缩
vue项目打包开启Gzip压缩1. vue步骤安装npm i compression-webpack-plugin -D 提供带 Content-Encoding 编码的压缩版的资源 webpack地址使用—在vue.config.js文件中const CompressionPlugin = require('compression-webpack-plugin')module.exports = { configureWebpack: { plugin: [原创 2020-10-22 10:24:42 · 1776 阅读 · 0 评论 -
CSS 中使用动画效果实现点赞特效
CSS 中使用动画效果实现点赞特效效果图当没有点赞的时候, 页面上只有的图标是黑色的点赞之后, 出现一个缓缓上升的红心赞, 之后页面上的赞变为取消, 图标变为红色缓缓上升的红心赞会左右摇摆----------------- 页面的逻辑处理使用 Vue 完成------------------html代码<template> <div class="Cli...原创 2019-10-23 11:32:04 · 7484 阅读 · 0 评论 -
ElementUI循环生成的Form表单添加校验
ElementUI循环生成的Form表单添加校验所以总结起来的语法就是 :prop="'v-for绑定的数组.' + index + '.v-model绑定的变量'"HTML代码片段VUE中data中的声明效果图ElementUI 中使用循环生成的form表单需要动态添加校验的规则在data中定义好需要的rule,使用Element的语法给 :rules 动态绑定:prop="getA...原创 2019-08-13 15:24:58 · 8515 阅读 · 3 评论 -
Vue上传文件
创建文件new File()File()构造器创建新的File对象实例// 语法let myFile = new File(bits, name[, options])bits 一个包含ArrayBuffer,ArrayBufferView,Blob,或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。name USVString,表示文件名称,或者文件路径options 可选选项对象,包含文件的可选属性。可用的选项如下:原创 2020-10-09 10:00:14 · 1406 阅读 · 1 评论 -
Vue 3.X 相对于Vue 2.X 的版本变化
Vue 3.X 相对于Vue 2.X 的版本变化删除的部分filters过滤器已被删除 文档地址,建议使用方法调用或计算属性代替inline-template内联模板删除 文档地址修改部分template组件下可以存在多个根节点 文档地址<!-- vue2.X --><template> <div> <header>...</header> <main>...</main>原创 2020-09-22 17:58:30 · 800 阅读 · 0 评论 -
vue-cli 4x生产环境中删除console.log
vue-cli 4x使用babel-plugin-transform-remove-console删除console.log安装 npm i babel-plugin-transform-remove-console在跟目录下的.babel.config.js中const productionPlugins = []// 判断当前的环境是开发还是生产if(process.env.NODE_ENV === 'production') { productionPlugins.push原创 2020-08-14 17:30:38 · 1347 阅读 · 0 评论 -
ElementUI 中 el-scrollbar 滚动条样式组件的使用
ElementUI 中 el-scrollbar 滚动条样式组件的使用在使用 ElementUI 时 不难发现, 滚动条的样式和浏览器本地的不同通过 检查元素发现存在一个el-scrollbar 类名使用<el-scrollbar class="SideBar-scrollbar"> <p>欢迎访问</p> <el-menu :colla...原创 2019-10-17 10:04:34 · 2582 阅读 · 0 评论 -
Element 中颜色选择器返回16进制
ElementUI 中颜色选择器返回16进制element中的颜色选择器返回的是rgb的颜色格式将rgb的格式转为16进制 @active-change='handleChange面板中当前显示的颜色发生改变时触发<el-color-picker v-model="color" color-format='hex' @active-change='handleChange'></el-color-picker>先用正则获取到rgb的数值handleChan原创 2020-06-15 16:47:02 · 5112 阅读 · 5 评论 -
Vue中结合MockJS实现接口的拦截和数据的获取
Vue中结合MockJS实现接口的拦截和数据的获取1. 首先引入MockJS1.1 目录结构mock主要是存放mockindex.js处理主要的逻辑// 引入 mockimport Mock from "mockjs"import user from "./modules/user"const getBaseURL = 'http://localhost:9527/mock'Mock.setup({ timeout: 800 // 设置延迟响应,模拟向后端请求数据})Moc原创 2020-06-11 19:12:51 · 1726 阅读 · 0 评论 -
Vue 中使用 Eruda 来调起手机端的控制台
Vue 中使用 Eruda 来调起手机端的控制台Eruda的github地址使用方法,这里推荐使用CDN的方式在BootCDN中搜索eruda直接复制整个 script的标签在项目的index.html中引入,注意如果项目上线记得注释<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.min.js"></script><script>eruda.init()</script原创 2020-05-27 16:11:02 · 2664 阅读 · 0 评论 -
Vue中全局导入scss
Vue中全局导入scss需求: 定义的全局变量和mixins都需要在每个文件下面导入一次, 显得过于繁琐借助于第三方模块sass-resources-loader可以很方便的直接在全局导入首先下载npm i sass-resources-loader在 vue.config.js中配置, 没有就新建一个module.exports = { chainWebpack: (config) => { const oneOfsMap = config.module.rule('原创 2020-05-21 21:31:58 · 1608 阅读 · 0 评论