vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
目录vue-cli3.0修改打包后的文件地址和文件名问题描述修改文件名报错解决vue文件夹名称修改导致错误 vue-cli3.0修改打包后的文件地址和文件名
问题描述
最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录，开发过程中一切顺利，没有遇到什么问题，开发完毕打包上...[2022/4/7]
Vue 简单配置公用接口地址方式
目录简单配置公用接口地址首先配置package.json 文件下的配置.env.build 和 .env.test 文件vue.config.js 文件配置vue接口路径配置创建文件axios获取json文件内容 简单配置公用接口地址
有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 ...[2022/3/29]
vue-cli3.0项目打包后如何修改访问后端地址
目录打包修改访问后端地址问题解决项目打包后直接修改ip地址实现方案1. 方案一2. 方案二3. 方案三 打包修改访问后端地址
问题
原本是将访问后台的地址写在代码里面，但是这样的话打包之后就不能修改了，只能在代码里面修改，然后重新打包
解决
在vue-cli3.0之前的版本，项目目录...[2022/3/29]
vue3动态加载对话框的方法实例
目录简介常规方式使用对话框异步动态加载使用方式TestModal.vue使用结果动态操作对话框的实现DzModalService.tsmain.ts总结 简介
介绍使用vue3的异步组件动态管理对话框组件，简化对话框组件使用方式。本文使用的是vue3、typescript、element_plu...[2022/3/29]
vue cli4.0 如何配置环境变量
目录1.创建不同环境变量文件2.给.env文件添加内容3.在package.json中添加不同环境对应的执行语句4.使用 温馨提示：本文只适用于vue-cli 3.0及以上的版本哦~
------------------正文开始------------------
开发项目时，经常会需要在不...[2022/3/29]
Vue组件公用方法提取mixin实现
目录一.应用场景二.实现方法1.提取js共用方法文件2.引入三.注意事项 一.应用场景
多个组件共用一个方法时可以用 mixin 抽取到一个js文件中，作为共用方法
二.实现方法
1.提取js共用方法文件
export const common = {
?? ?
?? ? ...[2022/3/29]
关于vue设置环境变量全流程关于vue设置环境变量全流程
目录vue设置环境变量创建不同环境变量文件给.env文件添加内容在package.json中添加不同环境对应的执行语句使用多环境变量什么是多环境变量？配置流程 vue设置环境变量
在开发的时候一般会有是三个环境：开发环境 测试环境 线上环境
vue 中有个概念就是模式，默认先vue cli ...[2022/3/29]
分享Vue子组件接收父组件传值的3种方式分享Vue子组件接收父组件传值的3种方式
目录1.简单声明接收2.接收数据的同时进行 类型限制3.接收数据的同时对 数据类型、必要性、默认值 进行限制 父组件代码↓
<template>
?? ?<div>
?? ??? ?<div>父组件</div>
?? ??? ?&l...[2022/3/29]
vue如何自定义地址设置@
目录自定义地址设置@vue里面的@设置 自定义地址设置@
在vue.config.js 中配置文件
const path = require(''path'')
function resolve (dir) {
? return path.join(__dirname, dir)
}
...[2022/3/29]
vue实现全局组件自动注册,无需再单独引用
目录vue全局组件自动注册自动化注册全局组件脚本 vue全局组件自动注册
1、在components目录下创建一个global目录，里面放置一些需要全局注册的组件。
index.js作用只要是引入main.vue，导出组件对象
2、在components中创建一个index....[2022/3/29]
vue?代码压缩优化方式
目录vue代码压缩优化设置productionSourceMap为false代码压缩图片资源压缩开启gzip压缩vuecli3代码压缩混淆现将混淆流程记录如下 vue代码压缩优化
设置productionSourceMap为false
如果不需要生产环境的 source map，可以将其设置...[2022/3/29]
vue-cli3打包时图片压缩处理方式
目录vue-cli3打包时图片压缩例如代码如下vue-cli3压缩图片配置安装image-webpack-loader插件在vue.config.js当中进行配置 vue-cli3打包时图片压缩
当我们在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引...[2022/3/29]
Vue.js中v-on指令的用法介绍Vue.js中v-on指令的用法介绍
v-on指令
v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
用法：
v-on:事件类型=&...[2022/3/14]
Vue.js中v-for指令的用法介绍
一、什么是v-for指令
在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。
二、遍历数组
代码示例如下：
<!DOCTYPE html>
<html lang="en"&...[2022/3/14]
Vue2.0脚手架搭建
一、安装node.js
1、进入官网https: nodejs.org/en/download/
根据电脑操作系统，选择相应版本的文件进行下载。
2、下载文件后双击进行安装
安装完成以后进入node.js的安装目录：D:\Program Files\nodejs\（这里是我本...[2022/3/14]
Vue.js中v-bind指令的用法介绍
一、什么是v-bind指令
v-bind指令用于响应更新HTML特性，允许将一个或多个属性动态绑定到表达式。v-bind是应用在动态属性上面的。
二、语法
v-bind语法如下：
v-bind:动态属性名称="变量"
也可以简写成下面的形式：
:动态属性名称="变量"
&n...[2022/3/14]
VUE中的v-if与v-show区别介绍VUE中的v-if与v-show区别介绍
1.共同点
都是动态显示DOM元素
2.区别
（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-sho...[2022/3/14]
Vue.js中v-show和v-if指令的用法介绍
目录一、v-show指令二、v-if指令三、v-show和v-if的区别四、v-else指令五、v-else-if 一、v-show指令
v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件，语法如下：
v-show="判断变量"
例如：
v-sh...[2022/3/14]
vue的路由守卫和keep-alive后生命周期详解
目录Vue-Router懒加载如何定义动态路由param方式query方式Vue-Router导航守卫全局路由钩子router.beforeEach路由独享守卫组件内的守卫beforeRouterEnterbeforeRouteUpdatebeforeRouteLeaveVue路由钩子在生命周期函数...[2022/3/8]
Vue生命周期中的组件化你知道吗
目录引出生命周期销毁流程生命周期生命周期总结组件化 template: 非单文件组件 组件的几个注意点 组件的嵌套 VueComponent Vue实例与组件实例总结 引出生命周期
此时调用change，定...[2022/3/8]
vue对el-autocomplete二次封装增加下拉分页vue对el-autocomplete二次封装增加下拉分页
目录1.自定义指令实现下拉加载更多。2.增加props（getOptionFn、searchKey、value、placeholder）抽离业务。成为公共组件3.可能需要解释的 项目中的联想输入框现在都是采用的el-autocomplete实现的，但是随着数据量越来越多，产品要求一次不要返回所有的联...[2022/3/8]
vue实现大转盘抽奖功能
本文实例为大家分享了vue实现大转盘抽奖的具体代码，供大家参考，具体内容如下
效果图如下
中奖提示
代码如下
<template>
? <div cla ="dial" v-wechat-title="$route.meta.title">
...[2022/3/8]
vue日历组件的封装方法vue日历组件的封装方法
本文实例为大家分享了vue日历组件的封装代码，供大家参考，具体内容如下
图示
封装的组件的代码如下
<template>
? <div cla ="calendar">
? ? <!-- 选择日历的弹出层 -->
? ? <div ...[2022/3/8]
vue实现原生下拉刷新
本文实例为大家分享了vue实现原生下拉刷新的具体代码，供大家参考，具体内容如下
这是动画样式
文字样式
html代码
<template>
? <div cla ="car-box">
? ? <div cla ...[2022/3/8]
关于vue中@click.native.prevent的说明
目录关于@click.native.prevent的说明元素中绑定了这个事件vue的@click.native.prevent，点击事件加上native.prevent有什么用呢代码如下 关于@click.native.prevent的说明
元素中绑定了这个事件
<el-button ...[2022/3/8]
vue中引入mousewheel事件及兼容性处理方式
目录引入mousewheel事件及兼容性处理滚动条设置的要点在于关于scroll和mousewheel事件的问题需要注意的点实验开始 引入mousewheel事件及兼容性处理
项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实现原...[2022/3/8]
vue进行post和get请求实例讲解
目录一、基本使用方法1、get请求2.Post请求 使用axios：
<script src="https: unpkg.com/axio dist/axios.min.js">< cript>
一、基本使用方法
1、get请求
Make a re...[2022/3/8]
vue实现移动滑块验证
本文实例为大家分享了vue实现移动滑块验证的具体代码，供大家参考，具体内容如下
记录一下今天的学习内容
<div cla ="solidBox" :cla ="{''solidBox1'': validation}">
? ? <div @mousedown...[2022/3/8]
Vue滑块解锁组件使用方法详解Vue滑块解锁组件使用方法详解
本文实例为大家分享了Vue滑块解锁组件的使用，供大家参考，具体内容如下
依据 JS拖动滑块验证 开发的 Vue 滑块解锁组件。
<template>
? <div ref="wrap" cla ="slider-unlock">
? ? <div cla ...[2022/3/7]
vue?组件通信的多种方式
目录前言一、vuex二、eventBus三、prop emit四、$parent/$children五、$attr $listeners六、provide/inject 前言
在vue中，? 组件的关系不外乎以下三种：
组件是需要通信的，在开发中，常用到的通信方式有：vuex、even...[2022/3/2]
vue实现滑动验证条
本文实例为大家分享了vue实现滑动验证条的具体代码，供大家参考，具体内容如下
效果
代码
VerifySlider.vue
<template>
? <div
? ? ref="dragDiv"
? ? cla ="drag"
? >
...[2022/3/2]
vue子路由跳转实现tab选项卡效果
tab选项卡的布局在项目中是很常见的，在后台管理系统中左边是导航栏固定，右边是对应的页面，每次点击左边的标题，只有右面的对应页面在切换，而vue要做tab选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面 “塞” 进去，具体实现看下面的案例：
vue...[2022/3/2]
VUE 记账凭证模块组件的示例代码
效果如下所示：
<template>
<div cla ="voucher-container">
<div cla ="voucher_header">
<div cla ="voucher_header_title">...[2022/3/1]
vue实现选项卡案例
本文实例为大家分享了vue实现选项卡案例的具体代码，供大家参考，具体内容如下
实现步骤
实现静态UI效果
用传统的方式实现标签结构和样式
基于数据重构UI效果
将静态的结构和样式重构为基于Vue模板语法的形式处理事件绑定和js控制逻辑
声明式编程
模板的结构和最终显示的效...[2022/3/1]
vue选项卡组件的实现方法
本文实例为大家分享了vue选项卡组件的实现代码，供大家参考，具体内容如下
主要功能：点击不同的选项，显示不同的内容
html
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset=...[2022/3/1]
vue输入框组件开发过程详解
本文实例为大家分享了vue输入框组件开发过程的具体代码，供大家参考，具体内容如下
input-number.js
function isValueNumber(value) {
? ? return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$...[2022/3/1]
vue实现选项卡功能
本文实例为大家分享了vue实现选项卡功能的具体代码，供大家参考，具体内容如下
原理分析和实现
这个很简单，无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了，再看下面两个！这个实例应该只是一个热身和熟悉的作用！
这个的步骤只有一步，原理也没什么。我直接在代码打注释，看...[2022/3/1]
Vue实现简单选项卡功能Vue实现简单选项卡功能
本文实例为大家分享了Vue实现简单选项卡的具体代码，供大家参考，具体内容如下
vue-tab-demo
App.vue
<template>
? <div id="app">
? ? <Tab/>
? </div>
<...[2022/3/1]
vue中组件之间相互通信传值的几种方法详解
目录vue中组件之间相互通讯传值的方式1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现2、父组件主动获取子组件数据3、使用provide/inject方法实现4、使用事件总线5、vuex\localStorage\se ionStorage总结 vue中组件之间相互通讯传值的方式
...[2022/2/28]
vue-tree-chart树形组件的实现(含鼠标右击事件)
基于 vue-tree-chart，生成项目效果预览，包含鼠标右击事件；
vue-tree-chart：https: github.com/tower1229/Vue-Tree-Chart
大家可以直接安装使用(具体事例可以查看官网)
但是个人建议最好是下载整个项目,封装成组件调...[2022/2/28]
Vue组件之间的通信你知道多少
目录Vue组件间通信1.父向子传递数据1.props的大小写2.props的两种写法3.传递动态props2.子向父传递数据3.兄弟(任意)组件间的传值3.1全局事件总线3.2消息订阅与发布总结 Vue组件间通信
vue组件间通信分为以下几种:
父向子传递数据，用自定义属性子向父传递数据，用自...[2022/2/28]
vue如何使用原生高德地图你知道吗
1、先在vue项目根目录下新建vue.config.js，这个文件是没有的，vue不提供
module.exports = {
configureWebpack: {
externals: {
''AMap'': ''AMap'', 高德地图配置
''AMapUI...[2022/2/28]
Vue可左右滑动按钮组组件使用详解
本文实例为大家分享了基于Vue可左右滑动按钮组组件，供大家参考，具体内容如下
左右两箭头控制按钮组左右移动，双击到最左或最右边，功能比较简单。如下所示
<template>
?? ?<div cla ="demoButtons">
?? ??? ?<...[2022/2/28]
Vue标尺插件使用详解
本文为大家分享了Vue标尺插件使用的具体代码，供大家参考，具体内容如下
可根据高和宽度自适应，主要传值为宽度和距离零刻度的距离，代码和图片如下。
<template>
?? ?<div cla ="demoRule">
?? ??? ?<el-...[2022/2/28]
Vue实现时间轴功能Vue实现时间轴功能
本文实例为大家分享了Vue实现时间轴功能的具体代码，供大家参考，具体内容如下
<template>
? <div cla ="container">
? ? <div cla ="content">
? ? ? <div cla ="coin" ...[2022/2/28]
vue实现横向时间轴
本文实例为大家分享了vue实现横向时间轴的具体代码，供大家参考，具体内容如下
1、效果图
2、代码实现
html
<template>
? <div cla ="timeaxis" >
? ? <div v-for="item i...[2022/2/28]
vue3.0响应式函数原理详细vue3.0响应式函数原理详细
目录1.reactive2.ref3.toRefs4.computed 前言：
Vue3重写了响应式系统，和Vue2相比底层采用Proxy对象实现，在初始化的时候不需要遍历所有的属性再把属性通过defineProperty转换成get和set。另外如果有多层属性嵌套的话只有访问某个属性的时候才会...[2022/2/14]
vue实现组件跟随鼠标位置弹出效果(示例代码)
实现鼠标放置在“我的”上时出现卡片，卡片位置跟随鼠标。当鼠标移除卡片时卡片隐藏。当鼠标移入时获取鼠标坐标，并把父组件的鼠标位置通过prop传给子组件。
toCenter(event){
const{x,y}=event
this.mouse_x=...[2022/2/14]
Vue的底层原理你了解多少
Observer （数据劫持）
核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter。每当数据发生变化，就会触发setter()。这时候 Observer 就要通过 Dep 通知 Watcher 订阅者。
Dep ...[2022/2/14]
vue3过渡动画的详解vue3过渡动画的详解
目录一、vue中动画简单介绍二、vue的transition动画三、transition组件的实现原理四、transition过渡动画的cla 属性五、cla 的添加时机和命名规则六、transition过渡c 动画七、显示的指定动画的时间八、transition的过渡模式九、动态组件的切换十、ap...[2022/2/14]
经验首页