摘要：一、理想效果 我们在布局的时候通常会在导航栏上有居左和居右显示，中间留白，这样页面伸缩的时候不会影响效果。形如下图 以往我们可能更多会使用float浮动布局来实现这种效果，但是flex得到广泛支持以后就可以更方便和快捷的实现这种效果了： 二、实现方式 代码如下： <div class="wrap">
阅读全文
摘要：一、判断字符串变量 在 Vue 3 中，你可以使用 JavaScript 提供的常规方式来检查变量是否不为 null 和不为 undefined。你可以分别使用严格不等运算符 !== 来比较变量是否不为 null 和不为 undefined。以下是一个示例： // 假设有一个变量 let varia
阅读全文
摘要：一、什么是环境变量？ 1. 什么是环境变量？ 所谓环境变量，顾名思义就是给环境有关的变量，在不同的环境下有着不同的值。通过配置环境变量，我们可以根据不同的环境(开发环境、测试环境、生产环境 等) 来加载不同的配置。 开发环境：开发环境是开发人员进行代码编写和调试的环境。(例如：我们编码使用的电脑)
阅读全文
摘要：在 Vue 3 中，响应式变量通常是通过 ref 和 reactive 函数创建的，并且它们常常被声明为 const。这种做法初看似乎有些矛盾，因为 const 在 JavaScript 中用于声明一个不可重新赋值的常量。然而，这里的关键在于理解 JavaScript 中的引用和 Vue 的响应式系
阅读全文
摘要：import.meta.env和process.env.NODE_ENV是在JavaScript中用于获取环变量的两种方式，它们有以下区别： ☘️ import.meta.env： - import.meta是ES模块中的一个元数据对象包含了当前模块的一些元信息。 - import.meta.env
阅读全文
摘要：一、定义 1. 创建 src/styles/index.less 目录 2. 创建 src/styles/transition/index.less 目录 3. 定义base, fade, scale, scroll, slide, zoom 文件 ⏰ base.less .transition-d
阅读全文
摘要：一、定义 1. 创建 src/styles/normalize/index.less 目录 2. 创建 src/styles/normalize/base.less 目录 ⏰ base.less //仅作示例参考 :root { --vt-c-white: #ffffff; --vt-c-white
阅读全文
摘要：一、CDN方式引入页面 ⏰ 在html页面的<head>标签中引入 <script src="https://cdn.tailwindcss.com"> </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
阅读全文
摘要：一、常量的一般使用 一般我们会在一个单独的js文件中定义常量，如： .. /constant/index.js export const SYSTEM_NAME = 'RAYE管理系统' export const SYSTEM_VERSION = '1.0' //角色状态 status.js exp
阅读全文
摘要：一、概述 1. 同源 ⏰ 什么是同源？ 如果两个页面的协议、域名和端口都相同，那么这两个页面具有相同的源，也就是同源。 比如： http://www.test.com/index 和 http://www.test.com/other.html 是同源，因为协议、端口和域名都相同。 http://w
阅读全文
摘要：一、报错 Vue2 Webpack 转 Vue3 Vite 报错： 报错： [vue/compiler-sfc]This experimental syntax requires enabling one of the following parser plugin(s): “jsx”, “flow
阅读全文
摘要：描述 1. 监听tab切换浏览器页面，在离开当前页面和再次进来发生事件监听 2. 监听tab关闭(或者刷新)浏览器页面，在离开或者刷新前发生事件监听 解决 <script> export default { name: 'App', mounted() { /*1.浏览器标签页切换会触发"visib
阅读全文
摘要：问题分析： a标记触发的跳转默认被router处理，加上了前缀，见如下代码: <--a标签--> <a href="'https://www.baid.com/'" target="_blank"> a标签跳转到外部链接测试 </a> 跳转后浏览器地址栏结果 http://localhost:808
阅读全文
摘要：上一篇我们了解vue-cli下，配置环境的方式。随着技术的更新，现在vue多数以vite构建，不再以vue-cli构建了，今天主要聊一下这个！ 一、配置选项中的 环境目录 与 .env 文件 1. 环境目录 在 vite 中， 环境目录 是一个用于存放 vite 的 .env 文件的目录，其中这些文
阅读全文
摘要：由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？ 一、建立.env系列文件 首先我们在根目录新建3
阅读全文
摘要：一、安装 axios ⏰ 使用npm安装 $ npm install axios ⏰ 使用yarn安装 $ yarn add axios qs 🔊 qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。qs.parse()和qs.stringify()相反，是将序列化的内容解析成对象的形
阅读全文
摘要：一、创建文件 js ts 二、封装 JS ⏰ localStorage：提供了一种方式来存储键值对，数据会永久保存，直到主动删除或用户清除浏览器缓存。 /** *【window.localStorage 浏览器永久缓存】 **/ export class LocalUtil { // 设置永久缓存
阅读全文
摘要：Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和
阅读全文
摘要：一、安装 ⏰ Vue2安装Vue-router3.0的版本 npm install vue-router@3 ⏰ Vue3安装Vue-router4.0的版本 npm npm install vue-router@4 yarn yarn add vue-router@4 pnpm pnpm add
阅读全文
摘要：Pinia是一个专门为Vue.js设计的状态管理库，它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时，可以轻松地创建定义状态的存储，然后将其与Vue组件绑定，使它们能够使用该状态。 在Vue.js的官网中，我们可以看到Pinia目前已经取代Vuex,成为Vue生态系统的一部分。
阅读全文
浙公网安备 33010602011771号