Nuxt3

Nuxt3学习总结（05）

nuxt.config.ts配置详解nuxt.config.ts文件中常见配置选项：importtype{NuxtConfig}from'nuxt';constconfig:NuxtConfig={//全局页面标题:https://go.nuxtjs.dev/config-headhead:{title:'MyApp',meta:[{charset:'utf-8'},{name:'viewport
叶落风尘·2023-06-22 19:07

Nuxt3学习总结（02）

默认资源目录在Nuxt.js中，资源文件包括样式表、字体、图片、视频、音频等文件都可以放在public目录下。当应用启动时，Nuxt.js会将public目录下的所有文件复制到应用的根目录下，这样这些文件就可以像其他资源文件一样被引用了。同时，public目录下的文件请求路径为/，不需要加上目录名。除了public目录，Nuxt.js还提供了一个特殊的目录assets，这个目录用来存放应用的公共资
叶落风尘·2023-06-21 15:12

Nuxt3学习总结（04）

状态管理useStateuseState是一个ssr友好的ref替换,用于创建响应式的且服务端友好的跨组件状态,它的值将在服务器端呈现之后保存(在客户端hydration作用期间)，并使用唯一的键在所有组件之间共享。因为useState中的数据将被序列化为JSON，所以它不包含任何不能序列化的内容，例如类、函数或符号，这一点很重要。useState()的两种用法，一个接收提供初始值的工厂函数，另一
叶落风尘·2023-06-21 15:12

Nuxt3学习总结（03）

defineEventHandlerdefineEventHandler是一个函数，用于定义可复用的事件处理器函数。在Vue或Nuxt.js应用中，通常会定义一些事件处理器函数，以便在不同的组件中重复使用。这些处理器函数可能会接收一些参数，然后根据参数执行相应的逻辑。使用defineEventHandler可以让我们更方便地定义和管理这些事件处理器函数。它接收两个参数：logic:这是一个函数，用
叶落风尘·2023-06-21 15:11

Nuxt3实战系列之网络请求篇

Nuxt3提供了4种方式使得我们可以异步获取数据useAsyncDatauseLazyAsyncData（useAsyncData+lazy:true）useFetchuseLazyFetch（useFetch
前端码农小王·2023-06-20 19:29

nuxt3学习（上）

目录结构.nuxtNuxt使用.nuxt/目录在开发中生成您的Vue应用程序。整个目录将在运行nuxtdev时重新创建。.output目录Nuxt在为生产构建应用程序时创建.output目录,整个目录将在运行nuxtbuild时重新创建。assets目录assets/目录用于添加构建工具(webpack或Vite)将处理的所有网站资源，包含css、img、font等components目录comp
叶落风尘·2023-06-16 13:38

Nuxt3学习总结（01）

起步1、安装NuxtnpxnuxiinityarninstallyarndevSSR、SWR和staticSSR、SWR和static都是前端开发中的概念SSR(ServerSideRendering)是一种服务端渲染技术，它可以将数据从服务器传递到客户端，然后在客户端上进行渲染。与SWR不同的是，SSR可以在服务器端生成HTML代码，然后将其发送到客户端进行呈现。这种技术可以提高网站的性能和SE
叶落风尘·2023-06-16 13:38

Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）

小聊：本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置（可选），scss的安装（可选），目录结构的创建和解释
白忆宇·2023-06-13 08:05

nuxt 安装 element-plus

(1099条消息)Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）_白忆宇的博客-CSDN博客https://blog.csdn.net/m0_48489737/article
vegetari·2023-06-13 08:03

nuxt3项目在宝塔上使用pm2放到服务器

最近在将nuxt3项目扔到服务器上的时候遇到了一些问题，发现打包后的nuxt项目与正常的vue文件有些差别，缺失了index.html文件。
略略大魔王丶·2023-06-10 08:01

16 nuxt3学习 （状态管理 集成element plus）

useStateNuxt跨页面、跨组件全局状态共享可使用useState（支持Server和Client）useState(init?:()=>T|Ref):RefuseState(key:string,init?:()=>T|Ref):Refkey:一个唯一的键，确保跨请求正确地去重复数据获取。如果您没有提供密钥，那么将为您生成一个唯一的文件和useState实例的行号的密钥。init:在未启动
是云呀！·2023-06-09 15:16

15 nuxt3学习（获取数据）

获取数据$fetchuseAsyncDatauseFetchuseLazyFetchuseLazyAsyncData这些函数只能用在setuporLifecycleHooks中。1.$fetchserver与client都会发送网络请求（有重复发送缺点，建议使用nuxt提供的hook）//1.使用$fetch来发起网络请求//serverandclient$fetch(BASE_URL+"/hom
是云呀！·2023-06-09 15:46

初识nuxt3

开始使用安装//使用npx创建脚手架npxnuxiinitcd//安装node_moduleyarninstall//启动yarndev-o自动导入Nuxt自动导入辅助函数、可组合函数和Vueapi在应用程序中使用，而无需显式导入它们。基于目录结构，每个Nuxt应用程序还可以对自己的组件、可组合组件和插件使用自动导入。组件、可组合组件或插件可以使用这些功能。在文档中，没有显式导入的每个函数都是由N
叶落风尘·2023-06-08 09:53

Nuxt3从零开始配置与打包发布

Nuxt3是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化。
范特西_jay·2023-04-20 13:37

Nuxt3项目从零开始开发

之前讲过Nuxt3项目新建和配置：《Nuxt3从零开始配置与打包发布_nuxt打包发布_范特西_jay的博客-CSDN博客》本篇文章主要讲解一些nuxt3的基本功能。
范特西_jay·2023-04-20 13:35

Nuxt3实战系列之了解Nuxt3的渲染模式

在nuxt3上，这三种渲染模式也得以保留，而且还新增了一种hybird模式，也就是可以按路由分别设置渲染模式。1.纯客户端渲染开箱即用，一个传统的在浏览器（或客户端）中被渲染的Vue.js应用程序。
·2023-04-20 13:50

开源个人博客搭建只需三分钟Nuxt3+vite+mysql+koa2搭建

最近也是想入一下Nuxt3的坑，然后就写了一个博客系统，目前已开源github，欢迎大家star！！！
小张很嚣张～·2023-04-18 01:37

vue3+vite+ts+koa2构建vue3 SSR项目

去年对我司技术栈升级到Vue3之后，萌生了对SSR项目升级到Nuxt3的想法，奈何当时Nuxt3还不稳定，不建议在生产环境使用。于是打算自己搭个Vue3SSR服务出来。
sanstu·2023-04-18 01:36

三分钟搭建个人博客技术栈Nuxt3+vite+mysql+koa2

最近也是想入一下Nuxt3的坑，然后就写了一个博客系统，目前已开源github，欢迎大家star！！！
小张很嚣张～·2023-04-18 00:33

Nuxt3中的中间件-middleware

参考：nuxt3中间件(middleware)详解-简书nuxt3中间件(middleware)详解在项目中有时候需要在网站切换路由的过程中添加一些自定义的逻辑，比如权限什么的。
疆~·2023-04-15 01:30

nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回

项目中封装接口请求，并且解决刷新页面useFetch无返回数据问题刷新页面useFetch无返回数据问题：浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。但是有实时去后台获取数据这样的需求，比如我的关注页面，在其他页面点了关注，每次进这个页面或者刷新都需要去后台重新获取数据，所以我给
王小王和他的小伙伴·2023-04-12 19:16

nuxt3 布局，iOS Safari 的 100vh 问题，兼容PC端移动端iOS

原先需求要求是顶部和底部是由中间内容撑开的，但是有的页面没内容就撑不开，一开始使用min-height:calc(100vh-410px);但是在iOS手机端下出现问题，所以修改为：监听视口高度，然后给减去头部和底部固定的高度，即可onMounted(()=>{constappHeight=()=>{constdoc=document.documentElement;doc.style.setPr
王小王和他的小伙伴·2023-04-12 19:45

nuxt3 vue 让PC网站在手机上按比例缩小适应屏幕

直接代码：nuxt3：nuxt.config.jshead:{meta:[{name:"viewport",content:"width=device-width,initial-scale=0,user-scalable
王小王和他的小伙伴·2023-04-12 19:45

Nuxt3遇见的坑（二）：Nuxt3 引入swiper

Nuxt3遇见的坑（二）：Nuxt3引入swiper网上查了很多方法都不好使，最后看文档摸索了一个先安装swiper，我的版本是6.0.0-alpha.18yarnaddswiper在组件中引用importSwiper
王阿白·2023-04-12 19:44

nuxt3：swiper实现轮播效果

一、背景nuxt3项目使用swiper实现轮播图效果。
snow@li·2023-04-12 19:43

nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

先说优点1、基于Vue3：Nuxt3是基于Vue.js3开发的，Vue.js3是目前最流行的前端框架之一。
王小王和他的小伙伴·2023-04-12 19:37

nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端

简介：该教程兼容pc+移动端，如只需一端，可忽略兼容部分教程，根据需要运行的客户端构建项目nuxt3：https://www.nuxt.com.cn/docs/guide/directory-structure
局外人LZ·2023-04-12 03:29

12 nuxt3学习（配置）

链接:nuxt3官网nuxt简介vue3技术栈：Nuxt3是基于Vue3+VueRouter+Vite等技术栈，全程Vue3+Vite开发体验（Fast）。
是云呀！·2023-04-10 21:45

Nuxt3 + Naive UI 的SSG项目分享（三）

入口文件app.vue最初启动的项目中，在入口文件app.vue中，我们可以看到页面引入组件NuxtWelcome：它是Nuxt3项目安装时默认引入的欢迎页的组件，我们可以在node_modules@nuxt
patricks_star·2023-04-10 21:15

Nuxt+Vue3+TS+Vite入门教程

Nuxt3是Nuxt.js的下一代版本，它采用了全新的架构和设计，提供了更好的性能和可扩展性。
宋承佑·2023-04-10 21:41

Nuxt3 rc.11 填坑 配置 element-plus

网上各种版本都有，就是都不太行，不太完整。先看下package.json{"private":true,"scripts":{"build":"nuxtbuild","dev":"nuxtdev","generate":"nuxtgenerate","preview":"nuxtpreview","postinstall":"nuxtprepare"},"devDependencies":{"nu
爱写代码的老张·2023-04-10 21:09

nuxt3：我们开始吧-开发-配置-部署

Nuxt3是基于Vite、Vue3和Nitro的Nuxt框架的现代重写，具有一流的Typescript支持，是两年多研究、社区反馈、创新和实验的结果。为每个人提供了一个愉快的Vue全栈开发体验。
snow@li·2023-04-10 21:08

Nuxt3中的状态管理-useState

Nuxt3不再集成Vuex。但是Vue的官方建议是使用pinia，通过包导入到项目中。
疆~·2023-04-10 21:03

Nuxt3中的useCookie

{{Cookies}},{{Cookies.username}}constCookies=useCookie("user");//获取Cookie//设置CookieCookies.value={username:"张三",age:33};删除cookie时，只需赋值为undefined或null即可//删除Cookiecookie.value=undefined||null
疆~·2023-04-10 21:33

Nuxt3中的useNuxtApp和插件plugins

useNuxtAppnuxtApp是一个运行时的上下文，可以通过插件（plugins）来扩展它。使用provide方法就可以创建nuxt插件，指定name，就可以在所有的组合式API和组件中通过name来调用value指定对象。示例:pages/index.vue:{{nuxtApp.$hello("你好啊")}}constnuxtApp=useNuxtApp();nuxtApp.provide(
疆~·2023-04-10 21:32

Nuxt3 & Serverless 尝鲜之旅

前言Nuxt3这个月刚出没多久，目前还在beta阶段，难以上生产环境。官方也推荐我们的Nuxt2项目，先迁移到NuxtBridge来进行一个平滑的过渡。
ice breaker·2023-04-10 21:02

令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客

令人愉快的Nuxt3教程(二):快速轻松地搭建博客继令人愉快的Nuxt3教程(一):应用的创建与配置后，我们已经成功的创建了一个Nuxt3应用，同时已经添加了大量的开发配置。
ice breaker·2023-04-10 21:02

Nuxt3 试水（二）之项目配置

Nuxt配置Nuxt默认配置已经涵盖了大多数场景。使用nuxt.config.ts文件可以覆盖或扩展此默认配置。nuxt.config.ts文件位于Nuxt项目的根目录。一个最小的配置文件导出defineNuxtConfig函数，其中包含一个带有您的配置的对象。defineNuxtConfig帮助程序无需导入即可全局使用。exportdefaultdefineNuxtConfig({//MyNux
工作三年_程序媛·2023-04-10 21:30

nuxt3配置(defineNuxtConfig)详解

nuxt3(defineNuxtConfig)配置详解nuxt3项目中的相关配置主要放在项目根目录下的nuxt.config.ts文件中，除了nuxt3框架需要的配置属性外，你也可以扩展添加自已处理的配置
showwaychen·2023-04-10 21:26

nuxt3多环境开发配置

1.在根目录创建env文件夹，创建对应的环境文件，如图.env文件代码如下，注意一定要VITE_开头才能识别VITE_BASE_URL=https://www.nuxtjs.orgVITE_API_SECRET=api_secret_token2.在nuxt.config.ts配置import{loadEnv}from'vite'constenvScript=process.env.npm_lif
侒然·2023-04-10 21:26

Nuxt3中的runtimeConfig与app.config

参考：vue.js-Nuxt3实战系列之配置管理-开发小记-SegmentFault思否需要留意的一点是，默认定义的配置选项都只能在服务端流程中可访问，如果需要在客户端也能使用，需要将配置项定义在public选项内。配置项定义好后，我们可以...https://segmentfault.com/a/1190000043469250Nuxt提供了一个运行时配置API，在你的应用程序和服务器路由中暴露
疆~·2023-04-10 21:54

微前端-qiankun：vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用

一、了解qiankun.jsqiankun-qiankun1.1、简单，任意js框架均可使用。微应用接入像使用接入一个iframe系统一样简单，但实际不是iframe。1.2、完备，几乎包含所有构建微前端系统时所需要的基本能力，如样式隔离、js沙箱、预加载等。解耦，与技术无关。1.3、生产可用，已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。1.4、qiankun是一个基于sin
snow@li·2023-04-07 10:39

Nuxt使用@element-plus/icons-vue

在nuxt3中你可能并不能直接像ElementPlus官网这样加载图标：//main.ts//如果您正在使用CDN引入，请删除下面一行。
IICOOM·2023-04-03 22:47

nuxt3使用markdown-it

在nuxt3框架中vue3解析markdown语法可以直接使用markdown-it来解析。
IICOOM·2023-04-03 22:47

Nuxt2快速上手（一）路由、异步数据、中间件等

middlewareVuex状态树API(这里只说一些关键的API)asyncData关键的一些包nuxt/axiosnuxt.config.js常用的一些配置我们这里先学习一下Nuxt2，日后再学习Nuxt3
李和贵·2023-04-02 05:38

nuxt3：使用pinia

一、官网介绍为什么使用piniaPinia是Vue的存储库，它允许您跨组件/页面共享状态。如果您熟悉CompositionAPI，您可能会认为您已经可以通过一个简单的exportconststate=reactive({}).这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用Pinia中获得很多好处：dev-tool
snow@li·2023-04-01 18:48

nuxt3全量引入Element-plus UI

nuxt3项目本地安装完之后，在根目录下安装Element-plus#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus上面的方式任选其一引入在根目录下创建
风筝啊·2023-03-24 07:50

Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)

目录1.Nuxt3的安装1.1.安装新建Nuxt3项目1.2.Nuxt3的启动使用1.3.Nuxt3运行端口2.element-plus的安装配置2.1.演示使用3.scss安装和全局变量配置3.1.使用
·2023-02-27 18:01

Nuxt3实战系列之配置管理

Nuxt提供了一个运行时配置API，在你的应用程序和服务器路由中暴露配置，并能在运行时通过设置环境变量进行更新。定义运行时配置为了将配置和环境变量暴露给应用程序，你需要在nuxt.config文件中使用runtimeConfig选项定义运行时配置。exportdefaultdefineNuxtConfig({runtimeConfig:{//只在服务端可以访问的配置项apiSecret:'123'
·2023-02-24 18:29

使用Nuxt3创建一个项目模版的相关配置以及遇到的一些问题

ArcoNuxt3Admin这四个使用nuxt3和ArcoDesign创建的简单项目模版，下面是一些创建项目的相关配置和遇到的一些问题项目地址初始化创建这里我使用pnpm创建，详情查看Nuxt3Installationpnpmdlxnuxiinitarco-nuxt3
·2023-02-21 18:39
上一页 1 2 3 4 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他