首页
最新

在Laravel 10中使用Laravel UI+Vue3包进行认证设置

创建Laravel项目 使用 Composer 命令安装 Laravel 10。 composer create-project --prefer-dist laravel/laravel laravel_auth 安装和配置 Lravel UI composer require laravel/ui 如果选择了bootstrap 需要执行php artisan ui命令来创建用于认证的脚手架(如认证页面、登录页面等)。 如果你想使用Vue.js或React,你可以指定vue、
发布于 2024-5-8 下午6:1 阅读数 155

vue3将一个全局脚本添加在index.html中,在vue3页面中直接使用

如果你想将一段js脚本代码写入 Vue 项目的index.html文件中,并在 Vue 页面中使用,你需要将该脚本写入 <script> 标签内,同时,将结果放在全局对象上,例如 window 对象,因为 index.html 中的全局脚本和 Vue 组件文件的模块作用域是隔离的。 举个例子: 下面是一段随机生成二级域名的代码,先随机取出一个主域名,然后再根据
发布于 2024-5-7 下午2:30 阅读数 122

【Vue/Nuxt.js】使用Composition API实现子组件向父组件传递数据的方法

使用defineEmits进行定义。 在Composition API中,我们可以创建一个emit的变量,并使用defineEmits定义自定义事件。 子组件 <script setup> const emit = defineEmits(['hogeEvent']); //emit之外也可以 const hoge = () =>{ emit('hogeEvent'); } </script> <template> <button type="button" @click=
发布于 2024-4-29 下午6:32 阅读数 185

vue3+axios+useAxios多接口域名检测和加解密(AES)网络请求封装

需要实现的功能 vue3+axios+useAxios网络请求封装 主域名返回多个接口域名,循环检测接口域名,状态码为200,即该域名可以用 解密后端返回的加密的数据 实现代码 简单的vue3+axios+useAxios网络请求封装 //useAxiosApi.ts import { useAxios } from '@vueuse/integrations/useAxios' // 导入VueUse库中的useAxios函数 import a
发布于 2024-4-19 下午10:42 阅读数 374

用nuxt3官方提供的nuxt-icon插件来引入iconify的海量图标

旧的引用方式 这里我们不用ant蚂蚁框架的图标,我们从iconify从导入图标。 iconify图标是一种矢量图标格式,它可以以小尺寸的形式显示在各种设备上,如移动设备、桌面应用程序和网页。iconify图标可以缩放到任何尺寸而不失真,并且可以通过CSS或JavaScript进行动态更改。Iconify图标还支持多种颜色和主题,使其适合各种不同的设计需
发布于 2024-4-14 下午10:0 阅读数 357

vue3 + Nuxt3 使用AutoAnimate可以快速添加动画

AutoAnimate是什么? 这是FormKit提供的一个动画库。只要安装了这个库,你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS,但在本文中,我将介绍如何在Vue中使用它。 官方文档: https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着,在nuxt.con
发布于 2024-3-17 下午9:30 阅读数 808

Nuxt3 - 使用 SheetJs 将 JSON 转换并下载为 Excel 文件

安装 npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz 参考文档:https://docs.sheetjs.com/docs/ 代码示例: <script setup> import { ref } from 'vue' import { utils, writeFileXLSX } from 'xlsx' const pres = ref([ { name: '小丽', birthday: '1998-02-22' }, { name: '小美', birthday: '1
发布于 2024-3-17 下午8:50 阅读数 454

antdv上传图片前压缩图片

在使用 Ant Design 的上传组件时,如果需要在上传前对图片进行压缩,可以使用一些 JavaScript 库来实现。一个常用的库是 compressorjs,它可以在客户端对图片进行压缩。 以下是一个简单的使用示例: 首先,确保你的项目中已经安装了 compressorjs 库。你可以通过 npm 安装: yarn add compressorjs 然后,使用以下代码示例在上传前压
发布于 2023-12-9 下午3:31 阅读数 944

Nuxt3 – 使用navigateTo更改URL查询并使用watch进行监控

<script lang="ts" setup> const route = useRoute() watch( () => route.query, () => { console.log(route['query']) } ) function move() { navigateTo({ name: 'example', query: { foo: 'bar' }, }) } </script> <template> <button @click="move">move</button> </template&g
发布于 2023-11-7 下午2:13 阅读数 2712

vue3添加百度统计的几种方式

申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,下面有几种方式。 把统计代码插入到index.html入口文件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial
发布于 2023-11-7 下午2:11 阅读数 2862

Vue3设置动态head插件unhead的使用,支持title、meta、js等

如果我们想要在vue3的单页面上引入js,或者设置title和meta,我们可以使用unhead插件。 unhead插件文档:https://unhead.unjs.io/setup/vue/installation 安装 yarn add @unhead/vue //或者 npm install @unhead/vue //或者 pnpm add @unhead/vue 挂在 vue3 import { createApp } from 'vue' import { createHead } from '@unhe
发布于 2023-11-6 下午7:4 阅读数 3112

vue3 使用window.scrollTop回到页面顶部

如果你想在当前页面切换tab时将页面滚动到顶部,你可以使用window.scrollTo方法来实现。以下是一个示例代码: import { ref, watchEffect } from 'vue'; export default { setup() { const tab = ref(1); // 当前选中的tab,默认为1 watchEffect(() => { // 监听tab的变化 if (tab.value === 2) { // 如果切换到tab 2,将页面
发布于 2023-10-30 上午11:57 阅读数 5170

vue3路由跳转传多个参数

在Vue 3中,你可以使用对象的方式传递多个参数给router.push()方法。以下是一个示例代码: import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeParams = () => { // 获取当前路径的参数 const id = route.query.id; const
发布于 2023-10-30 上午11:45 阅读数 4748

vue3修改当前路由参数

以下是一个示例代码: import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeId = () => { // 获取当前路径的参数 const id = route.query.id; // 修改id的值 router.push({ path: '/corpus-detail', query: { id: 4 } });
发布于 2023-10-30 上午11:43 阅读数 3814

vue3实现多选标签(包括反选)

页面代码 <div class="table-hs-d" v-for="(item, index) in chooseList" :key="index"> <div class="m-code @click="selectTag(item.number)" > <span>{{ item.number }}</span> <div class="mask" :class="{ 'mask-show': isTags(item.number) }"> <van-icon class="sele-icon" color="
发布于 2023-10-26 中午12:1 阅读数 3774

vue3使用js-cookie,设置过期时间为分钟

在Vue 3中使用Cookie的过程类似于在Vue 2中使用。你可以使用第三方库来管理Cookie,例如js-cookie。以下是在Vue 3中使用js-cookie的简单步骤: 用法 安装js-cookie库: 在你的Vue 3项目中,可以使用npm或yarn来安装js-cookie: 使用npm: npm install js-cookie 使用yarn: yarn add js-cookie 导入并使用js-cookie: 在你的Vue组件中
发布于 2023-9-3 下午1:42 阅读数 14707

Vue3实现双色球开奖走势图并连线

效果 我们先来看一下要实现的效果: 原理 渲染页面的时候把需要连线的点加上“标记”类名,然后再把这些带有标记的元素用线段连接起来。 数据 const data = ref([ { p: '2023-01', list: [ { num: 10, active: 0 }, { num: 2, active: 0 }, { num: 14, active: 1 }, { num: 33, active: 0 }, { num: 11, active: 0 }, { num: 14,
发布于 2023-8-5 中午12:32 阅读数 9065

Vue3+Echarts 常用属性总结之饼图

类型 饼图分有三种类型: 基础饼图 圆环图 (设置设置radius:radius: ['50%', '70%'],) 南丁格尔图(玫瑰图,设置roseType: 'area') 举一个简单的例子 <template> <div class="chart-container"> <div style="width: 100%; height: 400px" ref="chartRef" class="chart"></div> </div> </temp
发布于 2023-8-4 下午5:15 阅读数 8783

Vue3+echarts常用属性总结之折线图

Vue3中使用echarts 要在Vue 3中使用echarts图表库,你需要按照以下步骤进行操作: 安装echarts库。在终端中运行以下命令: npm install echarts 在需要使用echarts的组件中,引入echarts库: import * as echarts from 'echarts'; 创建一个容器元素用于展示echarts图表。可以在模板中添加一个<div>元素,并为其设置一个唯一的
发布于 2023-8-2 下午5:44 阅读数 7442

Vue3 x Vite修改端口和设置显示IP网络

Vue3 x Vite修改端口和设置显示IP网络 修改端口 项目的运行之后,默认的端口是5173,现在我们来改一下端口号 打开vite.config.js文件: export default defineConfig({ server: { port: 3000 }, }); 启动后地址就变成: http://localhost:3000/ 设置显示IP网络 在server对象中添加host属性,并指定要显示的IP地址。 例如,使用 0.0
发布于 2023-8-1 下午11:23 阅读数 3904

Vue3 避免直接引用对象/数组 props

props 在Vue3中,当将对象或数组props作为子组件传递时,无法更改对象或数组本身,但可以更改对象或数组的嵌套属性。 当传递单个值作为 props 时 如果将单个值作为 props 传递,则更改子组件中的 props 值将不会反映父组件中的更改。这是因为 props 是单值的,因此子组件中的更改将被视为与局部变量的更改相同。 <script setup l
发布于 2023-8-1 下午11:21 阅读数 718

Vue3+vite引入阿里图标的三种方式

引入阿里图标 下载图标代码 将解压包放在asset下 我们只需要一下几个文件即可: ├── font ├── iconfont.css ├── iconfont.json (font-class用法) ├── iconfont.js (symbol用法) ├── iconfont.ttf ├── iconfont.woff └── iconfont.woff2 unicode 格式 全局引入图标 在main.js里引入图标样式 import './assets/font/iconfont.c
发布于 2023-7-18 下午6:48 阅读数 1319

Vue 3 中的 Ref() 和 Reactive() — 该如何选择?

Composition API 中的 Ref 和 Reactive Composition API 提供了两种方法来将响应式状态引入到组件中。因此,你需要决定是否使用 ref、reactive 或者两者都使用。我将帮助你做出正确的选择,但让我们先快速了解一下它们。 快速介绍 Ref() 和 reactive() 用于跟踪其参数的更改。当你使用它们来初始化变量时,你向 Vue 提供了信息:“每
发布于 2023-6-18 下午10:29 阅读数 639

在 Vue3 中使用 toRefs() 函数

在Vue 3中,toRefs()函数用于将响应式对象转换为普通对象,其中每个属性都是一个独立的响应式引用。这样做的好处是,可以在不影响响应式对象本身的情况下,将其传递给子组件或其他函数。 下面是一个使用toRefs()的示例: <template> <div> <p>Count: {{ count }}</p> <p>Message: {{ message }}<
发布于 2023-6-13 下午11:10 阅读数 3232

Vue 3 中的 Ref() 和 Reactive() — 该如何选择?

Composition API 中的 Ref 和 Reactive Composition API 提供了两种方法来将响应式状态引入到组件中。因此,你需要决定是否使用 ref、reactive 或者两者都使用。我将帮助你做出正确的选择,但让我们先快速了解一下它们。 快速介绍 Ref() 和 reactive() 用于跟踪其参数的更改。当你使用它们来初始化变量时,你向 Vue 提供了信息:“每
发布于 2023-6-11 下午10:40 阅读数 2182

vue3

文章: 56关注: 1点击: 6
推荐作者
励志每天写一篇文章,有价值的文章,提升自我!
暂无描述
关于阿里的技术创新均呈现于此.
目前300+工程师团队,整个公司1000+员工,不仅为广大C端用户提供娱乐资讯、线上选座购票及互动交流服务,也为行业提供大数据、行销、发行、交易等专业服务。
再没骗自己的理由,时间如刀不再温柔