vue 3.2
vue3
cc&
这个作者很懒,什么都没留下…
展开
-
父子组件之间的通信 vue3
vue3,父子组件的通信原创 2023-01-07 14:47:30 · 64 阅读 · 0 评论 -
解决路由缓存问题 vue3
现存问题:由于路由的组件复用机制,当路由的路径path没有发生变化时,路由对应的组件会被直接复用,也就是生命周期钩子函数不再执行,请求也就不会再次发起。说明❓:根据不一样的场景要求使用不一样的技术方案,如果性能要求很高,第三种方案,如果不涉及性能问题,使用key简单粗暴,1)给`router-view` 添加key属性 ----------- `Layout/index.vue`> 解决思路:给`router-view` 加上key 值为每次路由切换的完整路径。说明❓:组件会被重新创建。原创 2023-01-04 09:38:47 · 974 阅读 · 0 评论 -
定义全局指令---图片懒加载vue3
定义全局指令-图片懒加载翻译 2022-12-30 17:42:24 · 134 阅读 · 0 评论 -
组件数据懒加载
组件数据懒加载翻译 2022-12-30 11:49:24 · 168 阅读 · 0 评论 -
模板插槽使用 vue3
插槽模板使用翻译 2022-12-29 17:51:29 · 95 阅读 · 0 评论 -
轮播图组件的封装 vue3
轮播原创 2022-12-29 16:46:11 · 107 阅读 · 0 评论 -
骨架组件 vue3
vue3 骨架原创 2022-12-29 16:35:22 · 143 阅读 · 0 评论 -
vue3.2 引导页
官网地址:github:https://github.com/kamranahmedse/driver.js 用法和用例介绍:https://kamranahmed.info/driver.js/ 简单的安装使用介绍(中文,非官方):http://f2ex.cn/driver-js/1、安装npm install driver.js2.layout创建driver文件夹-》index.vue<template> <div id="guide"...原创 2022-02-26 18:00:19 · 966 阅读 · 0 评论 -
全屏插件screenFull
1.安装npm install [email protected]、创建组件<template> <div @click="handleFullScreen"> <svg-icon :icon="icon ? 'exit-fullscreen' : 'fullscreen'"></svg-icon> </div></template><script setup>import { ref原创 2022-02-26 16:37:07 · 588 阅读 · 0 评论 -
vue3.2 i18n国际化
1、安装 npm i vue-i18n@next2、创建文件 @/i18n/index 设置使用import { createI18n } from 'vue-i18n'import EN from './en'import ZH from './zh'// 数据源--不同的语言对应的内容const messages = { en: { ...EN }, zh: { ...ZH }}// 设置当前的语言const getCurrentLanguag原创 2022-02-26 15:59:47 · 460 阅读 · 0 评论 -
vue3.2 动态面包屑导航
1、创建面包屑导航组件 breadcrumb.vue,elementplus中有2、js操作,获取当前路由的完整路径//引用路由import {useRoute} from 'vue-routerconst route=useRoute()//当前路由的完整路径console.log(route.matched)但是,我们每次点击菜单跳转,都要进行变化,所以不能写死// 引入路由import { useRoute} from 'vue-router'const route原创 2022-02-26 11:53:19 · 2057 阅读 · 0 评论 -
vue3.2 汉堡按钮伸缩项(左侧菜单的伸缩)
1、创建组件来使用,@/layout/components/hanburger.vue2、引用到整体页面3、vuex 中@/store/modules/app 设置参数,点击进行相关变化 state: () => ({ siderType: true, }), mutations: { changeSiderType(state) { state.siderType = !state.siderType }, },4.@/layout/c原创 2022-02-26 11:34:40 · 1523 阅读 · 1 评论 -
vue3.2 被迫退出(登陆过期)
1、@/utils/Constans.js (设置常量)// keyexport const TOKEN_TIME = 'tokenTime'// value---有效时长export const TOKEN_TIME_VALUE = 24 * 60 * 60 * 10002、@/utils/auth.js(实现方法)// 引入常量import { TOKEN_TIME, TOKEN_TIME_VALUE } from './constant'// 登陆时设置时间export原创 2022-02-26 11:19:40 · 784 阅读 · 0 评论 -
vue 3.2x创建
准备一个空白文件夹(创建你的项目) cmd中vue ui可视化创建项目(手动配置 -> router、vuex、css、linter->cass/scss(with dart-sass)->Eslint+standard Config) 安装依赖axios vscode中再一次npm install(防止报错) 运行 npm run serve...原创 2022-02-21 18:25:57 · 201 阅读 · 0 评论 -
vue 3.2----prettier代码格式规范
vscode安装prettier插件(右侧第五个扩展图标) 点击左下角齿轮-》设置-》搜索save-》勾选Edit:format on save(保存进行格式化设置) 组件中右键 使用。。。格式化文档-》配置默认格式化程序-》prettier 项目根目录创建.prettierrc-》定义规范 .eslintrc.js中的rules新增规范(解决eslint与prettier冲突) 'indent': 0,'space-before-function-paren': 0 prett原创 2022-02-21 18:35:47 · 1439 阅读 · 0 评论 -
vue 3.2 强制规格
使用husky强制代码格式化,创建配置文件npx husky add .husky/pre-commit(要有.husky文件) 在创建的配置文件写入npx lint-staged 替换 undefined 在package.json文件的lint-staged添加:"lint-staged": { "src/**/*.{js,vue}": [ //src目录下所有的js和vue文件 "eslint --fix", // 自动修复 "git..原创 2022-02-21 20:58:08 · 57 阅读 · 0 评论 -
vue3.2 引入svg图像
src/icons/svg-------->你需要的svg图标 src/components------->创建 SvgIcon/index.vue(相当于创建一个组件) <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><scrip原创 2022-02-21 21:20:57 · 544 阅读 · 0 评论 -
vue3.2 登录请求
src/api/request.js // 导入创建项目就依赖的axiosimport axios from 'axios'import { ElMessage } from 'element-plus'// 创建const service = axios.create({ // 基础路径 开发环境和生产环境不同 baseURL: process.env.VUE_APP_BASE_API, TIMEOUT: 5000})// 导出export default service原创 2022-02-21 21:34:54 · 378 阅读 · 0 评论 -
vue3.2 响应拦截器
登录中打印结果,适当修改 src/api/request.js// 响应拦截器service.interceptors.response.use( (response) => { const { data, meta } = response.data if (meta.status === 200 || meta.status === 201) { return data } else { ElMessage({ showC原创 2022-02-21 21:42:04 · 796 阅读 · 0 评论 -
vue3.2 登录
1.@/store/modules/app.js 设置vueximport { login as loginApi } from '@/api/login'// 导入路由跳转import router from '@/router'export default { namespaced: true, state: () => ({ token: localStorage.getItem('token') || '' }), mutations: { setT原创 2022-02-23 21:59:02 · 371 阅读 · 0 评论 -
vue3.2 请求拦截器
作用:在请求发送前进行一些操作,比如在每个请求体里面加上token,统一做处理(后期比较容易修改)// 请求拦截器service.interceptors.request.use( (config) => { config.headers.Authorization = localStorage.getItem('token') return config }, (error) => { return Promise.reject(new Error(原创 2022-02-24 20:02:17 · 466 阅读 · 0 评论 -
vue3.2路由守卫
含义:路由跳转的一些验证,比如登陆鉴权(没有登陆,不能进入个人中心等)参数:1.to:要进入的目标路由(去哪儿)2.from:要离开的路由(从哪儿来)3.next:是否进行下一步(要不要继续)next用法:1.写next()===next(true)继续执行,2.不写next()===next(false)终止执行,3.next(path)跳转,eg: next('/login')...原创 2022-02-24 20:19:53 · 533 阅读 · 0 评论 -
vue3.2 layout布局
1.@/layout/index------------设置布局2.路由中进行配置-----------进行跳转3.始终的@/styles样式在vue.config.js中全局配置 在vue.config.js中写入 css: { loaderOptions: { sass: { additionalData: 或 prependData: // 8版本用prependData: ` @import "@/st原创 2022-02-24 20:25:09 · 714 阅读 · 0 评论 -
vue3.2 菜单, 路由跳转, elementplus
1.属性加上router index是路由的跳转地址2.<router-view/>显示路由跳转的页面, unique-opened属性--------之保持一个子菜单的展开3.菜单的默认选中menu中 :default-active="defaultActive"js中:const defaultActive=ref('/users') 有问题:只有菜单默认选中,而对应的,而<router-view />不对应修改:菜单选项上: @click=...原创 2022-02-24 20:48:44 · 2773 阅读 · 0 评论