![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
大佩梨
平时会分享、记录前端相关知识,喜欢的可以点个关注点点赞谢谢哈!
展开
-
vue用vite配置代理解决跨域问题(target、rewrite和changeOrigin的使用场景)
vue配置解决跨域原创 2024-06-04 18:44:56 · 1202 阅读 · 0 评论 -
vue项目基于vue-office实现docx、xlsx、pdf文件的在线预览
vue项目基于vue-office实现docx、xlsx、pdf文件的在线预览原创 2024-06-03 11:20:03 · 358 阅读 · 0 评论 -
pinia中使用@vueuse/core库的useStorage做数据的持久化存储
pinia中使用@vueuse/core库的useStorage做数据的持久化存储原创 2023-11-16 11:26:13 · 830 阅读 · 0 评论 -
NProgress顶部进度条的用法
nprogress进度条插件原创 2023-11-02 14:36:49 · 154 阅读 · 0 评论 -
vue项目package.json与package-lock.json作用及区别
vue项目package.json与package-lock.json作用及区别原创 2023-10-28 14:20:56 · 460 阅读 · 0 评论 -
vue3 ref 和reactive 置空数组的方式 (两者是有差异的)
vue3 ref和reactive置空数组差异原创 2023-10-11 15:13:23 · 900 阅读 · 0 评论 -
Vue2屎山代码大盘点
vue盘点屎山代码原创 2023-09-12 10:56:15 · 102 阅读 · 0 评论 -
vue去除生产环境的console
生产环境去除console打印原创 2023-04-28 18:50:51 · 963 阅读 · 0 评论 -
带你了解vue3组合式api基本写法
vue3基本写法原创 2023-04-28 18:18:29 · 2856 阅读 · 0 评论 -
vue打包上线利用插件去除 console
vue上线去除console原创 2023-03-29 17:35:20 · 1308 阅读 · 0 评论 -
vue中.env文件配置环境变量
vue中.env配置环境变量原创 2023-03-29 16:06:37 · 2176 阅读 · 0 评论 -
vue配置多环境下多个打包命令
vue配置多个打包命令转载 2023-02-15 09:50:20 · 825 阅读 · 0 评论 -
首屏加载速度慢怎么解决?
首屏加载优化原创 2023-02-02 11:39:25 · 1869 阅读 · 0 评论 -
vue中$route和$router区别
vue中route和router区别原创 2023-02-01 17:57:43 · 63 阅读 · 0 评论 -
Vite的原理
vite原理原创 2023-02-01 17:51:17 · 525 阅读 · 0 评论 -
刷新浏览器后,vuex的数据是否存在?如何解决?
解决刷新浏览器后vuex数据消失问题原创 2023-02-01 16:52:52 · 998 阅读 · 0 评论 -
Vue3配置路由ERROR in [eslint]报错问题
解决因eslint导致的报错问题原创 2022-12-23 17:01:42 · 1048 阅读 · 0 评论 -
vue devtools在谷歌浏览器安装使用
vue devtols在谷歌浏览器安装教程原创 2022-09-02 11:34:28 · 351 阅读 · 0 评论 -
vue filters过滤器分别在template和script中使用
vue过滤器的具体使用原创 2022-09-02 09:55:00 · 602 阅读 · 0 评论 -
vue传值provide和inject的使用
vue传值provide和inject的使用原创 2022-08-26 17:18:21 · 1268 阅读 · 0 评论 -
vue项目运行后,生成的两个地址Local和Network的区别
local和network区别原创 2022-08-23 17:36:19 · 6352 阅读 · 5 评论 -
Vue3 对比 Vue2 有哪些变化?
vue3跟vue2的变化原创 2022-07-04 15:03:47 · 98 阅读 · 0 评论 -
vue打包的文件加上版本号
vue.config.js打包文件名称增加版本号原创 2022-06-15 09:47:49 · 5226 阅读 · 1 评论 -
ant design vue a-modal实现弹窗拖拽功能
vue ant-design中a-modal实现拖拽功能原创 2022-06-01 10:42:55 · 3850 阅读 · 2 评论 -
vue filter将金额类数据转换为中文
全局注册该filterVue.filter('MoneyUppercase', function(n) { var fraction = ['角', '分'] var digit = [ '零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖' ] var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟'] ] var head = n < 0 ? '欠' : ''原创 2022-05-16 14:24:14 · 357 阅读 · 0 评论 -
Vue前端导出excel表格文件xlsx
1.安装依赖npm install -S file-savernpm install -S xlsxnpm install -D script-loader2.新建lib文件夹,并创建Blob.js和Export2Excel.js文件3.在Blob.js中输入以下代码/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * B原创 2022-05-11 15:35:13 · 765 阅读 · 0 评论 -
Vue-ls的使用
目前使用插件Vue-ls用来控制数据存储在localStorage或者sessionStorage中,还可以控制其存储时效性:1.安装NPMnpm install vue-ls --saveYARNyarn add vue-ls2.使用全局使用,在main.js文件中导入import Storage from ‘vue-ls’;const options = {namespace: ‘vuejs__’, // 存储的key键前缀,可自定义name: ‘ls’, // 命名Vue变量原创 2022-03-28 10:42:48 · 7437 阅读 · 0 评论 -
vue-ls插件的使用(我用在存储token,设置时效性)
Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage。安装NPMnpm install vue-ls --saveYARNyarn add vue-ls使用import Storage from 'vue-ls'; options = { namespace: 'vuejs__', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local', // 存原创 2022-03-25 17:40:07 · 929 阅读 · 0 评论 -
vue自定义指令
使用自定义指令v-copy:实现点击复制文本功能一、v-copy复制文本指令1.创建v-copy.js文件存放该指令代码,后续可以局部引入使用或者在main全局引入使用:2.v-copy指令代码:import Vue from "vue";// 注册一个全局自定义复制指令 `v-copy`Vue.directive("copy", { bind(el, { value }) { el.$value = value; el.handler = () => {原创 2022-03-25 14:34:18 · 818 阅读 · 0 评论 -
vue项目文件结构
五、vue项目结构1、build:构建脚本目录1)build.js ==> 生产环境构建脚本;2)check-versions.js ==> 检查npm,node.js版本;3)utils.js ==> 构建相关工具方法;4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加 前缀;5)webpack.base.conf.js ==> webpack基本配置;6)webpack.dev.conf.js ==> webp原创 2022-03-24 11:48:31 · 6285 阅读 · 0 评论 -
Vue router的基本使用
1.首先npm安装好路由:npm install router也可以指定版本:例如:安装3.5.2 - npm install vue-router@3.5.22.模板代码如下:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)export const routes = [ { path:'/', name:'主页面', redirect:'/原创 2022-03-16 10:00:26 · 1149 阅读 · 0 评论 -
Vue 全局常用的过滤方法
全局引入filter:把写了方法的js文件映入进main.js:import ‘./utils/filter’1.(将整数部分逢三一断):例如:12345600 过滤为 12,345,600Vue.filter('NumberFormat', function(value) { if (!value) { return '0' } const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'原创 2022-03-11 10:12:16 · 3279 阅读 · 0 评论 -
vue filter过滤器的使用
自定义全局过滤器:Vue.filter(‘过滤器名称’, function(val) { // val表示要被处理的数据// 过滤器业务逻辑,要有返回值}){{ msg | 过滤器名称 }}局部过滤器:data () {return {msg: ‘hello world’}},//定义私用局部过滤器。只能在当前 vue 对象中使用filters: {dataFormat: (msg, a) => { // msg表示要过滤的数据,a表示传入的参数return msg原创 2022-03-10 17:29:07 · 410 阅读 · 0 评论 -
vue配置src为@(根目录)
在vue.config.js(初始生成文件名为babel.config.js)中增加代码(chainWebpack: config => {config.resolve.alias.set(’@’, resolve(‘src’))}):const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { baseUrl: './', runti原创 2022-03-03 17:28:09 · 1110 阅读 · 0 评论 -
上线前处理所有console.log()代码
灵活运用VScode编辑器删除console.log()直接全局搜索本项目里console.log正则匹配,然后全部替换为空即可。console\.log\(.*?\)原创 2022-03-02 15:48:31 · 79 阅读 · 0 评论 -
vue-router路由钩子的使用
beforeEnter是加载到页面之前做的事:beforeEnter:(to,from,next)=>{alert(“欢迎你”)next()}eg:需求:控制新增和详情页用到相同组件却有不同标题的展示,因为详情页有customerUserId,所以用作判断:{path: ‘/entManage/managementAdd’,name: ‘managementAdd’,hidden: true,component: () => import(’@/views/entManage原创 2022-02-21 10:33:04 · 281 阅读 · 0 评论 -
vue 创建新项目
vue创建新项目的几种方式原创 2022-02-11 17:17:47 · 30322 阅读 · 0 评论 -
Vuex的基本使用
什么是vuexVuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享Vuex管理数据的优点A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新Vuex的基本使用步骤1.安装 npm i vuex --save2.在src文件目录下新建store>index.js文件import Vue from 'vue';impo原创 2022-02-11 14:55:08 · 280 阅读 · 0 评论 -
vue图片懒加载vue-lazyload的应用
图片懒加载vue-lazyload使用原创 2022-01-16 12:57:31 · 318 阅读 · 0 评论 -
vue路由懒加载
Vue 是单页应用,所以如果没有用懒加载,就会导致进入首页时需要加载的内容过多,时间过长,就会出现长时间的白屏,很不利于用户体验,SEO 也不友好所以可以去用懒加载将页面进行划分,需要的时候才加载对应的页面,以分担首页的加载压力,减少首页加载时间没有用路由懒加载:import Home from '@/components/Home'const router = new VueRouter({ routes: [ { path: '/home', component: Home }]原创 2022-01-16 13:08:48 · 364 阅读 · 0 评论