vue3.0
周家大小姐.
这个作者很懒,什么都没留下…
展开
-
vue3+ts+vite axios封装请求并扩展入参
解决办法就是扩展 AxiosResponse接口参数在request.ts页面中加入。会发现handleResponse参并不在axios提供的类型中。api.ts文件进行接口请求。最后发现api也不报红了。原创 2024-03-21 08:55:22 · 759 阅读 · 0 评论 -
vue3+ts+vite使用mock数据
接口使用(我这里是写的axios封装,你们根据自己当前需求)vite.config.ts文件配置。在根路径下创建mock文件夹。原创 2024-02-29 16:02:58 · 1009 阅读 · 0 评论 -
vue3+vite+ts配置多个代理并解决报404问题
之前配置接口代理总是报404,明明接口地址是对的但还是报是因数写法不对;用了vue2中的写法。其中的settings.ts文件可以不用封装直接写你的env就行;在vite.config.ts中配置poxy代理。.env.development文件内容。根路径下创建env文件根据自己需要名命。创建proxy.ts文件。api.ts接口使用。原创 2024-02-28 16:46:38 · 1670 阅读 · 0 评论 -
vue3+vite+ts 配置commit强制码提交规范配置 commitlint
文件配置根路径创建文件.husky文件创建 commit-msgpackage.json添加代码。原创 2024-02-08 21:35:53 · 1386 阅读 · 0 评论 -
vite+vue3配置vite.config.ts多页面入口,并配置多个env
需求:在一个项目有公共的依赖和组件,但是两个模块又没有业务上的关联,这个时候我们需要用到分包,我的env.test对应是mono2中的变量打包,根据人个需求使用在根路径下删除原来的index.html,然后在src下建两个目录分别为mono1,mono2如果页面都抽离成模块后记得改变,记得要修改文件之间的引用关系,接下来我们详细看项目配置方面的修改。vite.config.tspackage.json文件写入dev没有另做配置如果启动dev可能会找不到页面,只能使用dev:mono1或dev:mono原创 2022-06-03 14:17:58 · 6840 阅读 · 1 评论 -
vue3 动态加载el-icon图标
安装插件cnpm install @element-plus/iconsmain.js引入import { createApp } from 'vue'import App from './App.vue'import router from './router/index'import { store, key } from './store/index'import ElementPlus from 'element-plus'import 'element-plus/dis原创 2022-05-28 16:20:12 · 9569 阅读 · 5 评论 -
vuecli3+vite+typescript+element项目搭建
vite中文官网地址https://vitejs.cn/https://vitejs.cn/项目初始化地址:https://gitee.com/zhouyunfang_admin/vue3-typescript-vite-element/tree/req_1.0/项目搭建npm init vite@latest? Project name: » vue3-tsSelect a framework: » vueSelect a variant: » vue-ts进入项目目录..原创 2022-05-23 22:08:10 · 374 阅读 · 0 评论 -
vue2和vue3的区别
vue3为2020-9月正式版 vue3支持大多数vue2的特性 vue中设计了一套强大的组合API代替了vue2中的option API,复用性更强了vue3的API: setup:新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用ref:作用: 定义一个数据的响应式 语法: const xxx = ref(initValue): 创建一个包含响应式数据的引用(reference)对象 .原创 2022-01-05 16:03:10 · 1205 阅读 · 0 评论 -
vue2与vue3的生命周期对应的组合式API
befforeCreate => setup()create => setup()beforeMount =>onBeforeMountmounted => onMountedbeforeUpdate => onBeforeUpdateupdated => onUpdatebeforeDestroy => onBeforeUnmountdestroyed => onUnmountederrorCaptured => on.原创 2021-06-13 16:16:04 · 296 阅读 · 0 评论 -
Vue钩子函数之钩子事件hookEvent,监听组件
在Vue当中,hooks可以作为一种event,在Vue的源码当中,称之为hookEvent。在Vue组件中,可以用过$on,$once去监听所有的生命周期钩子函数,如监听组件的updated钩子函数可以写成this.$on('hook:updated', () => {})示例:使用hook之前<template> <div class="echarts"></div></template><script...原创 2020-08-07 09:31:10 · 3680 阅读 · 1 评论 -
vue js es6 数组拼接成对象字符串传入后台,再把对象字符串转成数组进行页面渲染
我当前是做的一个文件上传功能为例,当时是两个角色共用一个页面,所以会出现两次ruleForm你们可以根据你们自己的需求来数组拼接成字对象字符串://声明变量const attachments={}//对数组遍历this.ruleForm.files.map((v,n)=>{//对变量中的每个name属性进行赋值 attachments[v.name]=v...原创 2020-04-23 19:51:39 · 3325 阅读 · 1 评论 -
vue 兄弟组件传值($$post,$$on,off)事件解绑
父组件: <el-col :span="10" style="margin-bottom: 0"> <el-card shadow="never"> <section-title text="团队人员" style="padding: 0 0 12px 0"/> <task-allo...原创 2020-04-22 14:09:41 · 412 阅读 · 1 评论 -
vue promise 使用async 实现异步请求
需求:根据不同ID一次性请求所有对应ID详情的内容统一放入进去看代码:<el-table ref="table" v-loading="loading" height="500px" style="width:100%;" :data="newTableData ? newTableData ...原创 2020-04-10 15:40:02 · 666 阅读 · 0 评论 -
element el-table-column表格中使用 el-tooltip 提示
需求:悬浮的时候出来提示,并且指定换行,之前考虑用到:show-overflow-tooltip="true"发现不能指定换行,所以改用el-tooltip但是问题来了;显示的文字就要用了不换行的标签也会跟着el-tooltip中的标签换行最后改中css看代码: <el-table-column label="流转详情" align="left"> ...原创 2020-04-10 15:12:01 · 11515 阅读 · 0 评论 -
vue+es6+element对图片进行选中与取消时重新排序
需求:当我点击选中会出来序号,如果取消的话序号会重新计算,html: <el-row :gutter="10"> <el-col :span="24" :lg="4" :md="6" :sm="8" v-for="(item,index) in imageList" :key="index"> <el-card cl...原创 2020-04-08 22:18:53 · 1070 阅读 · 2 评论 -
vue element el-table-column table表格实现点击上移下移
html:<el-table-column :render-header="renderAddFlowBtn" align="center" width="220"> <template slot-scope="scope"> <el-button type="text" size="mini" :disabled=...原创 2020-04-08 14:04:10 · 1991 阅读 · 0 评论 -
el-date-picker 选择大于当前月份的不可选包含当月
当前为2020-03月;需求只能选择当月之前的月分 <el-date-picker v-model="search.yearMonth" format="yyyy-MM" value-format="yyyy-MM" class="control" type="mont...原创 2020-03-30 16:46:52 · 3018 阅读 · 1 评论 -
el-autocomplete 获取焦点后一直弹出提示框取消又出现
解决:在:fetch-suggestions="querySearch"方法中写入失去焦点就可以 <el-autocomplete v-model.trim="search.userName" v-loading="autocompleteLoading" class="inline-input contr...原创 2020-03-26 11:01:45 · 2700 阅读 · 1 评论 -
对后台返回数据进行增删改查
对后台返回数据判断有没有Null如果有就删除该条数据 for (let index = 0; index < res.result.length; index++) { const el = res.result[index] if (el === null) { res.result.splice...原创 2020-03-26 09:30:35 · 706 阅读 · 0 评论 -
vue js 对数组中的对象匹配判断对象与对象的所有值是否全等
let data = [ { nodeId: 'RON1254', nodeName: '结束节点', routerNam: '按键触发', routerId: 'NS1245', operationValue: 'a5154', ope...原创 2020-03-24 22:55:58 · 4272 阅读 · 0 评论 -
element picker-options控制时间只能选取指定范围日期
需求:用户只能创建当前的月报,如果当年已有月份有了月报那么这个月也不可以建月报 <el-form-item label="月份:" :prop="isdisabled?'':'stateDate'"> <el-date-picker v-model="ruleForm.stateDate" ...原创 2020-03-23 15:17:49 · 6804 阅读 · 2 评论 -
elementui el-select change事件传参
需求:当用户选择select的时候change事件需求获取到当前的整个值:value的时候把整个item都传进去,用value-key接收就会传给change事件 <el-select v-model="ruleForm.userName" :loading="commissionerListLoading" value-key="item" class="control" p...原创 2020-03-23 11:46:21 · 22319 阅读 · 3 评论 -
vue 对后台返回的对象数组数据与指写的对象数组进行匹配并赋值
定义的对象数组:// 时间参照选项export const REFERENCE_TIME_OPTIONS = [ { label: '距起保日期', value: '1' }, { label: '距客户生日', value: '2' }, { label: '距终保日期', value: '3' }, { label: '距年审日期', value: '4' }, {...原创 2020-03-19 10:50:21 · 4937 阅读 · 0 评论 -
vue provide和inject 依赖用法
需求:当我们有各别方法或都对象之类的需要父子组件传递或都爷孙传递,可能有的人想用vuex或者props层层传下去,如果用vuex有点小题大作了;如果用props那每个组件都要引入;有点麻烦;那么我们可以考虑用到provide传值在子组件或孙组件用inject接收1.provide就相当于加强版父组件prop2.inject就相当于加强版子组件的props如:子组件想要调...原创 2020-03-17 21:09:18 · 756 阅读 · 0 评论 -
vue elementUi el-table-column table点修改出现手风琴展开行
代码:<el-table ref="table" v-loading="loading" height="500px" style="width:100%;" :data="tableData" border > <el-table-column label="...原创 2020-03-17 17:38:29 · 1220 阅读 · 0 评论 -
vue 请求数据头部传入token值
需求:点击退出的发送请求的时候后台要求传Headers中传入token代码如下:// 第一个{}为所传的data数据,第二个{}为传入headers this.axios.post('/admin/logout',{},{ headers:{//我这里对像值这么写是因为我在上页面计算属性中获取了usr,user:state=>state.user.user toke...原创 2020-03-14 20:31:41 · 3384 阅读 · 0 评论 -
vue 页面刷新后用户信息没有了处理方式
需求:当用户登录时,数据存入了vuex中在页面通过store去取数据,但是页面刷新的时候,用户数据全不见了解决方法:登录的时候信息存入vuex之外;还需要把数据存入本地存储这样当页面刷新时如果取不到store中的数据,我们可以取sessionStorage中的数据export default { state:{ user:{}, token:false }, get...原创 2020-03-14 20:14:51 · 2566 阅读 · 2 评论 -
vuex mapState和store使用
首先为了后续有多个store存储,我们一开始就让其抽离,在store方件下新建一个modules文件,后面所有模块都会写在里面store/modules/user.jsuser.js写入用户信息供其它页面调用export default { state:{ user:{}, token:false }, getters:{ }, mutations:{ ...原创 2020-03-14 19:55:44 · 969 阅读 · 0 评论 -
element el-date-picker 选择指定月份
el-date-picker 选择指定月份范围<el-date-picker v-model="value2" type="month" placeholder="选择月":picker-options="pickerOptions"> </el-date-picker>data(){ return...原创 2020-02-06 13:25:05 · 10636 阅读 · 5 评论 -
vue map 修改后台返回的指定值
map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的值。...item,第一个参数做为初始值,...{}第二个参数为要修改的值,最后会和...item合并,如果第一个参数中没有这个值,会做为新参数追加进去,如果有则会修改并返回 queryList(params).then(res => { t...原创 2019-12-31 16:59:30 · 1635 阅读 · 0 评论 -
Devtools检查是不可用的,因为它是在生产
当开发中检测到vue的项目并且vue Devtools也亮起来了;但就是在调试中找不到vue面板Vue.js is detected on this page. Devtools inspection is not available because it's in production在这个页面上检测到Vue.js。Devtools检查是不可用的,因为它是在生产解决方案:在m...原创 2019-12-09 16:01:29 · 6467 阅读 · 1 评论 -
vue 封装axios请求
在src/utils/request.jsimport axios from 'axios'import { Message } from 'element-ui'import router from '../router/index';/** * http请求工具类 * * 请求拦截器 负责将客户端标识token值存储并放置在头部提交给服务端 * * 响应拦截器 负责全局处...原创 2019-12-03 14:57:08 · 363 阅读 · 0 评论 -
vue3.0 store抽离,模块导入
store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)// https://webpack.js.org/guides/dependency-management/#requirecontext// 创建了一个包含modules的...原创 2019-12-03 14:38:25 · 2041 阅读 · 1 评论 -
vue 菜单路由重复点击报错NavigationDuplicated
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/produce/delivery-order") is not allowed", stack: "Error↵ at new Navi...原创 2019-10-16 16:40:16 · 3015 阅读 · 8 评论 -
vue 过滤器计算col占多少份
<template> <div> <!-- 中心内容 --> <el-row :gutter="20" class="mt-3"> <!-- 店铺订单提示 --> <el-col :span="12" style="height:370px;" class="d-flex flex-co...原创 2019-09-17 23:11:57 · 1250 阅读 · 0 评论 -
vue3.0 axios请求获取后台返回的键(key)
需求:对请求回来的数据,对key进行保存操作如下: getCityInfo() { this.$axios("/api/posts/cities") .then(res => { this.cityInfo = res.data; // 处理key 计算key this.keys = ...原创 2019-04-07 20:56:19 · 1129 阅读 · 0 评论 -
vuex 状态管理存取值
dispatch存值: this.$store.dispatch( "setAddress",item.district + item.address + item.name );store.js中设置import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);// typesconst types = {...原创 2019-04-10 22:15:08 · 1389 阅读 · 0 评论 -
vue3.0 全局路由守卫(router.js设置)
在用户用一开始的时候就判断它是否登录,如果没有登录就跳登录页面,如果登录设置一个localStorage存起来router.jsimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: 'history', base: p...原创 2019-04-06 14:43:32 · 7202 阅读 · 3 评论 -
vue 操作dom元素
html:<div class="foods-wrapper" ref="foodScroll"> <ul> <!-- 专场 --> <li class="container-list food-list-hook"> <div v-for="(原创 2019-01-28 14:24:38 · 858 阅读 · 0 评论 -
vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中
需求:用户点击登录的时候获取token存取下来,然后放入请求拦截,因为用户上拉刷新下拉加载的时候需要用到;不然用户一刷新,服务端都不知道用户是谁了目录 请求存储token:请求拦截,及请求错误的响应拦截路由守卫(用来判断用户有没有登录;如果没有的话只能进入登录和注册页面)觖析token存储到vuex中请求存储token:login.vue页面//请求的时候存储...原创 2018-12-26 11:20:37 · 5016 阅读 · 5 评论