前端 - 文章分类(第4页) - 梁飞宇

vue工具之环境变量.env的配置

摘要：一、什么是环境变量？ 1. 什么是环境变量？所谓环境变量，顾名思义就是给环境有关的变量，在不同的环境下有着不同的值。通过配置环境变量，我们可以根据不同的环境(开发环境、测试环境、生产环境等) 来加载不同的配置。开发环境：开发环境是开发人员进行代码编写和调试的环境。(例如：我们编码使用的电脑) 阅读全文

posted @ 2024-08-20 13:08 梁飞宇阅读(650) 评论(0) 推荐(0)

vue知识点之为什么Vue3中声明响应式一般用const

摘要：在 Vue 3 中，响应式变量通常是通过 ref 和 reactive 函数创建的，并且它们常常被声明为 const。这种做法初看似乎有些矛盾，因为 const 在 JavaScript 中用于声明一个不可重新赋值的常量。然而，这里的关键在于理解 JavaScript 中的引用和 Vue 的响应式系阅读全文

posted @ 2024-08-17 22:39 梁飞宇阅读(320) 评论(0) 推荐(0)

vue知识点之import.meta.env与process.env.NODE-ENV的区别

摘要：import.meta.env和process.env.NODE_ENV是在JavaScript中用于获取环变量的两种方式，它们有以下区别： ☘️ import.meta.env： - import.meta是ES模块中的一个元数据对象包含了当前模块的一些元信息。 - import.meta.env 阅读全文

posted @ 2024-08-17 22:20 梁飞宇阅读(310) 评论(0) 推荐(0)

CSS知识点之CSS 关于height:100%和height:100vh的区别

摘要：vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 区别当元素没有内容时候设置 height:100%，该元素不会被撑开，此时高度为0，设置 height:100vh，该元素会被撑开屏幕高度一致。阅读全文

posted @ 2024-08-17 22:02 梁飞宇阅读(14) 评论(0) 推荐(0)

vue工具之引入动画样式

摘要：一、定义 1. 创建 src/styles/index.less 目录 2. 创建 src/styles/transition/index.less 目录 3. 定义base, fade, scale, scroll, slide, zoom 文件 ⏰ base.less .transition-d 阅读全文

posted @ 2024-08-15 23:57 梁飞宇阅读(8) 评论(0) 推荐(0)

vue工具之引入基础样式

摘要：一、定义 1. 创建 src/styles/normalize/index.less 目录 2. 创建 src/styles/normalize/base.less 目录 ⏰ base.less //仅作示例参考 :root { --vt-c-white: #ffffff; --vt-c-white 阅读全文

posted @ 2024-08-15 23:54 梁飞宇阅读(12) 评论(0) 推荐(0)

vue工具之安装TailwindCSS--3.0

摘要：一、CDN方式引入页面 ⏰ 在html页面的<head>标签中引入 <script src="https://cdn.tailwindcss.com"> </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 阅读全文

posted @ 2024-08-15 22:43 梁飞宇阅读(227) 评论(0) 推荐(0)

CSS知识点之CSS 中的 :root 与 var()

摘要：:root :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。定义 :root 后，所有变量都将被保存在 :root 中，并且可以在整个页面的任何位置使用。这使得我们可以轻松地为网站设置一些通阅读全文

posted @ 2024-08-15 19:10 梁飞宇阅读(51) 评论(0) 推荐(0)

vue工具之定义全局常量

摘要：一、常量的一般使用一般我们会在一个单独的js文件中定义常量，如： .. /constant/index.js export const SYSTEM_NAME = 'RAYE管理系统' export const SYSTEM_VERSION = '1.0' //角色状态 status.js exp 阅读全文

posted @ 2024-08-15 12:37 梁飞宇阅读(43) 评论(0) 推荐(0)

vue工具之解决跨域问题

摘要：一、概述 1. 同源 ⏰ 什么是同源？如果两个页面的协议、域名和端口都相同，那么这两个页面具有相同的源，也就是同源。比如： http://www.test.com/index 和 http://www.test.com/other.html 是同源，因为协议、端口和域名都相同。 http://w 阅读全文

posted @ 2024-08-15 00:38 梁飞宇阅读(64) 评论(0) 推荐(0)

vue知识点之Vite 报错“This experimental syntax requires enabling one of the following parser plugin(s): ‘jsx’ ”

摘要：一、报错 Vue2 Webpack 转 Vue3 Vite 报错：报错： [vue/compiler-sfc]This experimental syntax requires enabling one of the following parser plugin(s): “jsx”, “flow 阅读全文

posted @ 2024-08-14 20:47 梁飞宇阅读(834) 评论(0) 推荐(0)

vue知识点之监听"切换标签页触发事件"、"浏览器关闭(或者刷新)事件"

摘要：描述 1. 监听tab切换浏览器页面，在离开当前页面和再次进来发生事件监听 2. 监听tab关闭(或者刷新)浏览器页面，在离开或者刷新前发生事件监听解决 <script> export default { name: 'App', mounted() { /*1.浏览器标签页切换会触发"visib 阅读全文

posted @ 2024-08-14 20:08 梁飞宇阅读(447) 评论(0) 推荐(0)

vue知识点之跳转外部链接的方法

摘要：问题分析： a标记触发的跳转默认被router处理，加上了前缀，见如下代码: <--a标签--> <a href="'https://www.baid.com/'" target="_blank"> a标签跳转到外部链接测试 </a> 跳转后浏览器地址栏结果 http://localhost:808 阅读全文

posted @ 2024-08-14 19:58 梁飞宇阅读(58) 评论(0) 推荐(0)

npm之设置国内镜像地址

摘要：🙋 问题：npm create vue@latest、和npm install 不管是电脑cmd上还是vscode终端上都是卡很久或不动！可能会出现“There appears to be trouble with your network connection. Retrying...”超时的提阅读全文

posted @ 2024-08-14 13:35 梁飞宇阅读(230) 评论(0) 推荐(0)

yarn更换默认镜像地址

摘要：我们在使用yarn安装依赖包文件的时候，可能会出现“There appears to be trouble with your network connection. Retrying...”超时的提醒，很有可能是因为yarn默认的镜像地址为国外，因此慢（超时）就说得过去了…… 1、问题描述我们在阅读全文

posted @ 2024-08-14 13:21 梁飞宇阅读(63) 评论(0) 推荐(0)

JS总结之判断字符串中是否包含某个字符串

摘要：⏰ 方法一: indexOf() (推荐) var str = '123' console.log(str.indexOf("3")!= -1) //true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回-1。存在返回1。 ⏰ 阅读全文

posted @ 2024-08-13 13:34 梁飞宇阅读(28) 评论(0) 推荐(0)

naive-ui 之数据表格（n-data-table）与渲染函数（h函数）

摘要：一、效果图二、数据表代码 1. 数据表组件  <n-data-table :columns="columns" :data="data" /> 2. 数据表列 🔊 NaiveUI 自定义 “状态” 与 “操作” columns //数据表列 let columns= [ 阅读全文

posted @ 2024-08-13 01:02 梁飞宇阅读(1138) 评论(0) 推荐(0)

naive-ui 之 n-date-picker 改变成中文

摘要：英文环境中文环境其实蛮简单的修改app.vue // template <n-config-provider :locale="zhCN" :date-locale="dateZhCN"> <RouterView /> </n-config-provider> // script import 阅读全文

posted @ 2024-08-13 00:05 梁飞宇阅读(158) 评论(0) 推荐(0)

JS学习之箭头函数与普通函数的区别

摘要：一、基本语法 ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子： // 箭头函数 let fun = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fun = function (name) { // 函阅读全文

posted @ 2024-08-01 10:21 梁飞宇阅读(26) 评论(0) 推荐(0)

TypeScript细碎知识点：TypeScript模块化

摘要：一、模块（外部） TypeScript 在 1.5 版本之前，有内部模块和外部模块的概念，从 1.5 版本开始，内部模块改称作命名空间，外部模块改称为模块。TypeScript 中的模块系统是遵循 ES6 标准的，TypeScript 和 ES6 保持一致，包含顶级 import 或 export 阅读全文

posted @ 2024-07-31 10:51 梁飞宇阅读(115) 评论(0) 推荐(0)

梁飞宇

文章分类 - 前端