草庐IT

vue-elementul

全部标签

基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建

博客后台管理系统使用后的是基于Vue3+Vite+TS+ESLint+Prettier的开发,具体项目构建如下1、基于Vite创建vue-ts模板的项目骨架pnpmcreatevite项目名称--templatevue-ts2、安装ESLint、Prettier相关的ESLint:控制代码质量Prettier:控制代码风格2.1、安装ESLint、Prettier相关相关包pnpminstalleslinteslint-plugin-vueeslint-config-prettierprettiereslint-plugin-importeslint-plugin-prettiereslint

Vue3监视属性watch详解(附带详细代码与讲解!!!)

watch()默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。第一个参数是侦听器的源。这个来源可以是以下几种:一个函数,一个返回值一个ref一个响应式对象(reactive定义的)...或是由以上类型的值组成的数组第二个参数是一个回调函数,这个回调函数可接收三个参数:新值(newValue)、旧值(oldValue)、以及一个副作用清理的回调函数第三个参数是一个可选的参数是一个对象构成,如:deep(深度监视)、immediate(创建时立即监听一次)等等...监视ref所定义的一个响应式数据{{name}}修改姓名import{reactive,ref}from'@vue/reacti

记录--啊?Vue是有三种路由模式的?

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助众所周知,vue路由模式常见的有history和hash模式,但其实还有一种方式-abstract模式(了解一哈~)别急,本文我们将重点逐步了解:路由+几种路由模式+使用场景+思考+freestyle路由概念路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由模式由来对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义。而前端路由的核心,就在于——改变视图的同时不会向后端发出请求。为

vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath

文章目录1、打包前的配置工作1.1、使用vue自带的打包工具(vue-cil)1.2、使用webpack工具打包2、打包1、打包前的配置工作1.1、使用vue自带的打包工具(vue-cil)配置vue.config.js文件打开vue.config.js文件修改参数,如果项目的目录中没有vue.config.js文件,那么需要自建一个配置文件;在根目录src下创建文件即可。需注意文件名称必须是vue.config.js,然后在文件中写入代码。//打包配置文件module.exports={ assetsDir:'static', parallel:false, //默认 //publicPat

VUE3传值相关六种方法

目录1.父传子(props) 2.子传父组件方法和值(emit) 3.子传父(v-model)4.父组件调用子组件方法(ref)5.VUEX6.第六种爷孙传值provide/inject(官方并不建议未总结)1.父传子(props)VUE3父传子1.将fatherToChild的值传递到index子组件之中并且在父组件中操作按钮子组件数据会跟随变化我是父组件更改父组件数值2.引入vue的importimport{defineComponent,ref,reactive,toRefs}from"vue";3.const所要传递的数据并且写上父组件的按钮方法conststate=reactive(

vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字&route和router的写法&setup的两种用法&rules中校验之blur和change1、写法一index.vueimport{validateCommonText}from"@src/utils/validate";constformRef=ref();//constformRef=ref(null);constformInline=reactive({prjName:"",startDate:"",prjId:"",leadUnit:"",fundYear:newDate().getFullYear().to

Vue路由跳转的五种方式

Vue路由跳转的五种方式目录Vue路由跳转的五种方式1.router-link2.this.$router.push()3.this.$router.replace()(用法同push)4.this.$router.go(n)5.location扩展this.$router.push()和this.$router.replace()的区别params和query的区别路由跳转有两种形式:声明式导航、编程式导航1.router-link声明式prop=>:to=“…”相当与router.push(…)router-link中链接如果是’/'开始,就是从根路由开始如果开始不带’/',则是从当前路由

vue中axios的使用

1.什么是axios1.axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。2.axios本质上也是对原生XHR的封装,只不过是promise的实现版本3.用来向后端发送http请求,获取后端发送的数据2.怎么在vue项目中使用axios1.安装axiosnpminstall--saveaxios2.axios二次封装对axios进行二次封装主要是为了设置请求拦截器(在请求发出之前做一些事情)和响应拦截器(在数据返回之后,做一些事情)假如我的请求的接口如下:http://219.199.230.250/local/user/login(1)建立以下文件夹和文件,在

vue 图片点击放大查看大图(element-ui与vant)

手机版(使用vant)未放大效果:点击放大后的效果:html:js:import{ImagePreview}from"vant";exportdefault{name:"m-index",components:{},computed:{},data(){return{distributionMap:0,mapList:[{title:"会场平面分布图",img:`${this.JTLM_IMG_HOST}/venue_map2022_01.png`,//图片地址},//{//title:'展区平面分布图',//img:`${this.JTLM_IMG_HOST}/venue_map2022_2

Vue2使用dhtmlx-gantt插件实现复杂甘特图

template>divclass="container">divref="gantt"class="gantt-container"/>div>template>script>import{gantt}from'dhtmlx-gantt'import'dhtmlx-gantt/codebase/dhtmlxgantt.css'exportdefault{name:'Gantt',props:{ganttChartData:{type:Array,default:()=>[]}},data(){return{tasks:{data:[]}}},created(){gantt.clearAll(