Nuxt-link 和

2026-09-02

Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

nuxt Window 或 Document未定义解决方案

概述在用nuxt开发服务端渲染项目并引入第三方库的时候,经常会遇到window或document未定义的情况,原因是这个第三方库里面用到了window或者document,然后在服务端打包的时候,node环境并没有window或者document,所以就报了window或document未定义的错误. 而且,我们在引入第三方库的时候,并不希望把第三方库打包进app.js,而是希望这个第三方库只在需要的页面才加载. 下面以tinymce这个第三方库为例,记录我在nuxt.js框架中的实现方法,供

服务端预渲染之Nuxt(介绍篇)

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=&quo

从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战：异步实现数据双端渲染

回顾哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家明白 nuxt.js 是如何一步步实现服务端渲染的),虽说是基于 Nuxt 的,但是数据源还是我们的老数据,就是 .net core api 的数据,和上一个项目中使用的是一样的,这里要说下,有的小伙伴说想要我的数据,这里暂时说抱歉,因为里边有一些我的私人的记录,还有一些网站密码啥的,我自己懒得一条

Nuxt.js国际化vue-i18n的搭配使用

Nuxt.js国际化的前提是,已经使用脚手架工具搭建好了Nuxt.js的开发环境. 我使用的环境是nuxt@2.3 + vuetify@1.4 + vue-i18n@7.3 1. 先安装vue-i18n npm install --save vue-i18n 2. 更新store文件在@/store/index.js文件中,修改添加如下代码: export const state = () => ({ locales: ['en-US', 'zh-CN'], locale: 'en-US' }

nuxt.js实战之引入jquery

head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: '

nuxt.js实战之用vue-i18n实现多语言

一.实现步骤 1.安装vue-i18n并且创建store.js(vuex状态管理)文件 2.创建一个(middleware)中间件,用来管理不同的语言 3.创建不同语言的json文件作为语言包(例如: ~locales/en.json) 4.在pages文件夹下创建文件,并进行翻译二.详细步骤 1.安装vue-i18n npm install vue-i18n --save 2.在nuxt应用程序中引入vue-i18n 新建文件 ~plugins/i18n.js,内容如下: import V

前后端分离最佳实现，使用Nuxt.js快速搭建单页SSR应用

通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等如果是基于vue+vuex+vue-router组件构建的ssr应用,可以使用nuxt.js nuxt简化了ssr应用的搭建与开发,并且提供了一整套解决方案,提供了大量的预设 nuxt.js高度集成了常用的组件包括热更新,vue-meta,css-loader,url-loader,vue-template-loader,vue-route

Nuxt.js开启SSR渲染快速入门

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

nuxt 优化项：禁用js的预加载

这里有个nuxt和vue不同的地方,这个地方很有意思,官方的中文文档说得蜜汁自信 ------------------------------- In production, nuxt.js uses the prefetch strategy to pre-fetch the pages bundle that will be required when navigating to the next page. When the user will click on a link, nuxt.

Nuxt开发经验分享

Nuxt开发经验分享本文章基于starter-template模板进行讲解,面向有vue-cli开发经验的宝宝 vue init nuxt-community/starter-template Nuxt 官方文档简单来说,Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO 生命周期众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在: 生命周期流程图,红框内的是N

[Nuxt] Add CSS Libraries to Nuxt

You can easily add CSS libraries to Nuxt using yarn or npm to install them, then simply adding them to the nuxt.config.js so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks you

nuxt.js 部署静态页面[dist]到gh-pages

一. 1.添加package.json { "name": "nuxtweb001", "version": "1.0.0", "description": "nuxt test", "author": "chentingjun", "private": true, "scripts": { "de

【前端vue进阶实战】：从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】（一）

本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢迎给文章和开源库点赞,让我们更有动力去做好! 本系列教程源码地址:Github 一.创建项目框架 1. 使用Nuxt.js向导创建项目 yarn create nuxt-app topology-vue // 注意在后面提示中,上移下移,按空格选中 Element 复制代码选择Element后,在

搭建Nuxt项目（搭配Element UI、axios）

使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始初始化Nuxt项目 npx create-nuxt-app <项目名> // or yarn create nuxt-app <项目名> 运行 npm run dev 路由基础路由 Nuxt.js依据 pages 目录结构自动生成 vue-router 模块的路由配置. 举例, pages 如下: pages/ --| user/ -----| index.vue -----| on

nuxt 2.0采坑计之（引入静态文件css）

nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为 (在nuxt.config.js配置中在 module.exports = {} 中添加) head: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg

Nuxt.js打造旅游网站第1篇_项目环境搭建

1. 安装使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx,在命令行窗口输入npm --version可查看当前版本号需要等待片刻安装依赖的下载,下载完成后可以看到下面的提示框,要求输入项目名称. UI框架我们选择通用的Element-ui. 这里和接下来的提示都不需要输入任何内容,回车即可,直到要求选择服务器端框架. 服务器端框架选择none,代表使用N

[技术翻译]使用Nuxt生成静态网站

本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响电池功耗的(How Web Content Can Affect Power Usage) 06.[译]在现代JavaScript中编写异步任务(https://web.dev/off-main-thread/) 我翻译的技术文章都放在一个github仓库中,如果觉得有用请点击star收藏.我为什么

Nuxt.js

nuxt.js简单来说是Vue.js的通用框架,最常用的就是SSR(服务端渲染),nuxt.js这个框架,用Vue开发多页面应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态的html. 那么首先要知道什么是客户端渲染与服务端渲染什么是服务端渲染? 后端先调用数据库,获得数据之后,将数据何页面元素进行拼接,组合成完整的html页面,在直接返回给浏览器,以用户浏览. 什么是客户端渲染? 数据由浏览器通过ajax动态取得,再通过js将数据填充到demo元素上最终展示到网页中,

Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emoj表情.图片/视频预览.下拉刷新消息.红包/朋友圈等功能. 预览片段二.技术栈编码/技术:Vscode + NuxtJs/Vue/Vuex UI组件库:Vant (有赞移动端vue组件库) 字体图标:阿里iconfont图标库弹窗组件:VPopup(基于vue封装自定义弹框) 本地存储:coo

VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能

Vue引入mavon-editor插件实现markdown功能说明 mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引入mavon-editor插件,如果你只是采用了 Vue,没有用Nuxt框架,那么你可以看mavon-editor官方文档,有详细说明,其实它们只有在引入mavon-editor方式有细微差别,使用都是一样的.mavonEditor官方地址一.Nuxt引入mavon-editor插件 1.安装通

Nuxt-link 和

热门专题