技术栈开发工具：VSCode代码管理：Git前端框架：Vue3构建工具：Vite路由：vue-router4x状态管理：vuex4xAJAX：axiosUI库：vant数据模拟：mockjscss预处理：sass 构建vue3项目 1,安装 vite以管理员身份打开cmd命令窗口，切换到要安装项目的文件夹cd E:codewebmyvue3安装 vitenpminitvite@latest 输入项目名称，输入包名称，选择Vue（如果上下键不能选择，就手动输入选项，再回车），选择JavaScript，创建完毕。  创建项目生成的文件：2,行vite+vue3项目打开vscode，输入两条命令cnpminsall#仅第一次运行前需要安装npmrundev如果执行npmrundev 命令的时候报错类似  “ode_glotalvue_sp1，因为在此系统上禁止运行脚本”  这种错误，解决办法：以管理员身份打开WindowsPowerShel...

Vue的传参方式主要有以下几种：1.属性传值：这是一种主要用于父组件给子组件传值的方式，通过在父组件调用子组件时，绑定动态属性，然后在子组件中通过props接收父组件传过来的值。2.父组件获取子组件数据：这是子组件给父组件传值的方式，通过$refs获取子组件的数据和方法。3.路由传参：这是一种通过路由跳转的方式进行传参的方法，主要包括router-link（其实就是a标签），和this.$router.push()//paramsquery。4.路由组件传参：这是在路由配置中用分号拼接参数的方式进行传参。5.this.$router.params：这是搭配路由的name属性，参数作为路由的一部分，不会在url显示。6.this.$router.query：这是使用path来匹配路由，可以在url看到？后面的就是传递的参数。...

前言：vue项目中使用水印效果，可指定容器效果图：1、不指定容器2、指定容器实现方法：1、新建一个配置文件watermark.js，可放util，也可放别的地方?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061letwatermark={}  letsetWatermark=(text,sourceBody)=>{  letid=Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000    if(document.getElementById(id)!==null){    document.body.removeChild(document.getElementById(id...

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等$route.path字符串，等于当前路由对象的路径，会被解析为绝对路径，如"/home/news"。$route.params对象，包含路由中的动态片段和全匹配片段的键值对$route.query对象，包含路由中查询参数的键值对。例如，对于/home/news/detail/01?favorite=yes，会得到$route.query.favorite=='yes'。$route.router路由规则所属的路由器（以及其所属的组件）。$route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。$route.name当前路径的名字，如果没有使用具名路径...

一、问题描述vue中使用elementUI，在使用input输入框，设置type为number数字类型是，会出现如下上下箭头问题；如下所示：二、问题解决出现这个问题，只需要重置下elementUI的input样式即可解决，如下：/*element样式重置start*//*去掉input尾部上下小箭头start*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none!important;-moz-appearance:none!important;-o-appearance:none!important;-ms-appearance:none!important;appearance:none!important;margin:0;}input[type="number"]{-webkit-appearance:textfield;-moz-appearance:textfield;-o-appearance:textfield;-ms-appearance:te...

1.双向绑定原理不同Vue2使用的是Object.defineProperty，而Vue3使用的是ProxyVue2组件中所有data里面定义的数据默认都被重置为响应式数据Vue3则新增了ref/reactive可以自定义变量的响应式类型，区分了常量跟响应式变量的区别2.API设计类型不同 Vue2使用的是选项式APIVue3则使用的是组合式API setup在大型项目中，组合式API更方便，使用时更直观3.增强功能不同Vue3支持碎片化Fragments，即每个组件支持多个根节点Vue2只支持一个根节点4.底层语言不同Vue3用的都是Typescript，规范化更好5.适配的UI组件库不同element-plus是一款专门支持Vue3框架而建立的UI库而Vue2只支持element-ui6.混入MixinVue3中利用hooks函数提高代码的复用性Vue2则是利用mixins来分发组件中重复的功能7.生命周期的钩子函数不同Vue2生命周期    Vue3生命周期beforeCreate   &n...

#!/bin/bash#定义项目路径和部署目录project_path='/www/vue-project'build_path='/www/build'#进入项目目录进行代码更新cd$project_pathgitfetchoriginmasternew_changes=$(gitrev-listHEAD...origin/master--count)#判断是否有新的更改if[$new_changes-gt0];then#执行代码更新gitpull#安装依赖npminstall#执行vue编译命令npmrunbuild#将打包文件拷贝到部署目录#cp-r$project_path/dist/index.html$build_path/cp-r$project_path/dist/*$build_path/chmod-Rwww755$build_path/sudochown-Rwww$build_path/sudochmod-R755$build_path/#重启nginx服务器#systemctlrestartnginxelse###如果没有新的更改，则不进行编译echo"Nocha...

在Vue3中，可以通过readonly函数将一个对象转化为只读的，使其属性成为只读的，无法被修改。使用方法如下：import{readonly}from'vue';constmyObject={name:'Alice',age:25};constreadonlyObject=readonly(myObject);//尝试修改只读对象的属性readonlyObject.name='Bob';//这里会报错，因为只读对象的属性无法被修改复制代码在上面的例子中，myObject是一个普通的对象，通过readonly函数将其转化为只读对象readonlyObject。尝试修改readonlyObject的属性会导致报错。...

类似于post请求，传递的数据不会在浏览器地址显示params路由传参分为三步：（1）绑定参数{path:'/mypath/:web?',name:'mypath',component:()=>import('../views/mypath'),meta:{title:"dvy.com.cn"}}//web后的?问号表示可选例：对象传值时使用：web:''||undefined这里表示传空或不传（2）发送数据//字符串写法：<router-link:to="`/mypath/dvy.com.cn`">...</router-link>//对象写法：<router-link:to="{name:'mypath',params:{web:'dvy.com.cn'}}">//或者this.$router.push({name:"mypath",params:{web:"dvy.com.cn"}});//传递参数（3）接收数据在路由页面使用this.$route.params.web接收传递过来的参数this.$route.params.web;//接...

js合并json对象可以使用jquery中的$.extend将2的值合并到1，同key时默认2将会覆盖1的值//Mergeobject2intoobject1$.extend(object1,object2);但此种方法并不适用vue可使用concat()进行数组对象合并，但依旧不能对对象进行合并vararr3=arr1.concat(arr2);将2的值合并到1，同key时默认2将会覆盖1的值//将两个json对象合并functiontwoJsonMerge(json1,json2){varlength1=0,length2=0,jsonStr,str;for(vareverinjson1)length1++;for(vareverinjson2)length2++;if(length1&&length2)str=',';elsestr='';jsonStr=((JSON.stringify(json1)).replace(/,}/,'}')+(JSON.stringify(json2)).replace(/,}/,'}')).replace(/}{/,str);re...

在用vue框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。下面开始：配置环境的实现原理实现原理就是采用node.js顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境具体实例1.安装依赖npminstallprocess2.创建.env.dev 和.env.prod两个文件注意文件要创建在根目录下面.env.dev文件内容如下：NODE_ENV='production'VUE_APP_TITLE='prod'/*请求接口地址*/VUE_APP_INTERFACE="https://xxx"3.设置项目启动时默认的环境只需要在项目启动命令后面修改需要的环境就行了，例如npmrundev，把--modedev改为--modeprod就变成了开发环境package.json部分内容如下："scripts":{"de...

　　　　绑定数据三种方式：　　　　>> 插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定　　　　>>v-bind: 可以传给 v-bind:class 一个对象，简写为class：　　　　　单向变动:当加上v-bind:之后，它的值class不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，非常适合用在通过css来实现动画效果的场合。　　　　　支持类型：html属性、css样式、对象、数组、number、boolean;　　　　//绑定文本　　　　<p:message></p>　　　　//绑定属性　　　　<p:class="src"></p>　　　　<p:style="styleCss"></p>　　　　<p:sr...

vuebus通常使用在兄弟与兄弟组件之间然后在组件中，可以使用emit on, $off分别来分发，监听，取消监听事件 这里的$off可以取消多次使用$bus监听的事件使用用法1：引入vueimportVuefrom'vue'2：在main.js中引入vuebusimportBusfrom'***/***/bus';Vue.prototype.$bus=Bus3：使用方法this.$bus.$emit("Page",value);//很像父子之间传值的方法4：接收this.$bus.$on("Page",v=>{//vaPage传的时候的key是什么接收就必须是什么console.log(v);//v是传来的值，可以接收多个参数})5：总结使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus，不销毁的话会一值叠加的调用这个方法：beforDestroy（）{this.$bus.$off("vaPage");//当这个组件销毁的时候bus也跟着一起销毁}     &nb...

vue-cli输入命令：npm run build即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist，下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。解决：到config文件夹中打开index.js文件。文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录，’./’指的是当前目录。...

vue生产环境build打包出现空白页面的解决方法：如果出现：webpackjsonpisnotdefined因为公共文件必须在引用js之前引用。只需要在build文件下webpack-prod-conf.js找到htmlwebpackPlugin添加chunks:['manifest','vendor','app']然后npmrunbuild就OK了...