Vue
Vue
西直门三太子
知是行之始,行是知之成
展开
-
Vue3 使用pinia
文章目录什么是pinia为什么使用pinia安装pinia添加到vue状态管理定义使用什么是pinia可以理解为状态管理工具为什么使用pinia解决状态传递的问题可能存在一个状态(数据)为多个组件服务其中一个组件对状态的更改,使其能在其他被依赖的组件中体现安装pinianpm install pinia --save-dev添加到vue引入pinia的创建方法创建pinia通过use添加到vueimport {createApp} from 'vue'import原创 2022-05-12 20:39:13 · 825 阅读 · 0 评论 -
Vue3 图片懒加
文章目录懒加载作用安装vue3-lazy在vue中注册vue中使用懒加载作用假设你一个页面有100张图片电脑屏幕可见区域就那么大的地方(假设不滚动只能看到20张)反正不可能一次看到100张,如果一次性加载100张,特别耗费资源而且加载完100张,你可能只看了显示器区域的20张图,而没有去滚动下拉查看另外80张这不是浪费资源吗,而懒加载就是解决这个问题其通过js计算图片是否出现在屏幕中来决定是否加载图片安装vue3-lazy由于vue-lazyload 只兼容vue1.x 和 vue2原创 2022-05-10 11:12:47 · 250 阅读 · 2 评论 -
Vue3 使用sass
文章目录安装扩展和依赖文件后缀使用sass的好处可以嵌套可以声明使用变量可以封装函数安装扩展和依赖npm install node-sass sass-loader --save-dev文件后缀文件使用scss后缀写style时声明lang=scss<style scoped lang="scss"># 这里写样式</style>使用sass的好处可以嵌套# 不使用sass可以这么写.container a { color:black}# 使用原创 2022-05-09 21:24:22 · 1788 阅读 · 0 评论 -
Vue3 父子组件
文章目录组件传值子组件调用父组件方法父组件调用子组件方法完整示例组件传值在子组件中通过props声明需要传参参数父组件传值通过 :参数进行传参子组件调用父组件方法子组件通过$emit(,…) 触发父组件事件 父组件方法名,父组件通过@来声明该事件 可以给父组件事件传参父组件调用子组件方法如果需要让父组件调用子组件方法需要在父组件中暴露子组件给模版在子组件中暴露其方法给模版需要使用setup,其在vue官方文档中解释为(顶级绑定暴露给模板)完整示例子组件 MaskM原创 2022-05-09 14:01:11 · 2371 阅读 · 0 评论 -
Vue3 使用轮播图
文章目录前言安装组件基础用法自动播放分页无限循环前进后退按钮切换效果示例前言这里使用swiper官网地址:https://swiperjs.com/vue中文网地址:https://www.swiper.com.cn(提供了参数搜索)下面简单说说几种简单的使用基本可以满足项目需求如果需要复杂的效果,请去查看官方文档安装组件npm install swiper基础用法从包里引入 Swiper,SwiperSlide 组件引入swiper的css样式图片放 SwiperSlid原创 2022-05-07 16:16:15 · 3032 阅读 · 0 评论 -
Vue3 使用字节开源图标库
文章目录官网地址安装安装所需依赖使用官网地址https://iconpark.oceanengine.com安装通过npm安装npm install @icon-park/vue-next --save-dev安装所需依赖babel-plugin-importnpm install babel-plugin-import使用以购物车图标为例先去官网搜索cart找到对应图标选择 复制Vue代码cart 对应 引入对应组件即可<template>&原创 2022-05-05 18:57:22 · 1541 阅读 · 0 评论 -
Vue3 axios 封装
文章目录vue 版本安装依赖封装挂载到vue上去简单使用开发环境下的跨域问题vue 版本vue3安装依赖安装 axiosnpm i axiso --save-dev封装这里将封装到http.js引入axios创建axios(设置url地址,访问前缀,超时时间)然后设置拦截器(成功响应拦截,失败拦截器)成功拦截器可以做是否登录的统一处理(前提是未登录返回的也是200系列状态码,不是的话走到失败拦截器中)# 引入axiosimport axios from "axios"#原创 2022-05-04 14:12:56 · 2242 阅读 · 0 评论 -
Vue route 封装
文章目录vue版本安装 vue-router封装使用路由App.vue 修改page/home.vue访问路由嵌套vue版本vue3安装 vue-routercnpm install vue-router封装这里将路由文件独立(创建router.js)引入createRouter 创建router方法定义路由导出创建router方法,这个方法需要传入router 的 historyhistory 可以通过vue-router 中的 createWebHistory方法创建# ro原创 2022-05-03 22:17:20 · 1339 阅读 · 0 评论 -
Vue初始化项目
文章目录前言安装vue/cli创建vue项目项目初启动使用ui界面管理前言使用vue3安装vue/cli看看有没有cnpm没有的话先安装cnpm(npm install cnpm)# -g 全局安装# 我在mac下 用sudo怕它创建目录无权限sudo cnpm install -g @vue/cli# 查看vue/cli 版本vue --version# 查看vue/cli 安装位置which -a vue创建vue项目通过vue命令创建项目vue creat原创 2022-05-03 17:02:41 · 420 阅读 · 0 评论