Nuxt.js综合案例

最新推荐文章于 2021-12-01 22:07:28 发布
最新推荐文章于 2021-12-01 22:07:28 发布
阅读量752 收藏 1
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenzhenya/article/details/114977291
版权

Nuxt.js综合案例

案例介绍

案例名称:reaWorld

  • 一个开源的学习项目,目的就是帮助开发者快速学习新技能
  • GitHub仓库
  • 在线实例
    案例相关资源
  • 页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS
    TRUCTIONS.md
  • 接口文档 https://github.com/gothinkster/realworld/tree/master/api
    学习前提
  • Vue.js使用经验
  • Nuxt.js基础
  • Mode.js,Webpack相关使用经验

学习收货

  • 掌握使用Nuxt.js开发同构渲染应用
  • 增强Vue.js实践能力
  • 掌握同构渲染中常见的功能处理
    • 用户状态管理
    • 页面访问权限处理
    • SEO优化
  • 掌握同构渲染应用的发布与部署

项目初始化

创建项目

mkdir realworld-nuxt.js
npm init  -y
npm i nuxt
配置启动脚本
创建pages目录,配置初始化页面

在这里插入图片描述
在这里插入图片描述

导入样式资源

  • 导入页面模板
    app.html
  • 导入样式资源
    在这里插入图片描述
  • 配置布局组件
  • 配置页面组件

布局组件

  • 网站具有公共的头部和尾部,创建layout目录下的index.vue,我们想修改Nuxt.js的默认路由规则,在nuxt.config.js中配置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

  • 知识点, 删除nuxt默认的路由配置 routes.splice(0)

导入登录注册页面

  • 登录/注册页面我们使用一个组件来完成
    在这里插入图片描述
  • 因为默认的路由被我们手动删除了routes.splice(0),所以我们要在nuxt.config.js中配置路由规则
    在这里插入图片描述
    在这里插入图片描述
  • 上面的是登录页面,我们在配置注册页面的路由
    在这里插入图片描述
  • 在login页面添加一个计算属性isLogin来判断是登录页还是注册页
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

导入剩余页面

在这里插入图片描述

用户个人资料页面

  • pages\profile\index.vue
    在这里插入图片描述
最低0.47元/天 解锁文章
shenzhenya
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nuxt静态部署_教程：将服务器呈现的 Nuxt.js 网站部署到 Azure 静态 Web 应用 | Microsoft Docs...
weixin_39552204的博客
12-31 257
您现在访问的是微软AZURE全球版技术文档网站，若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站，请访问 https://docs.azure.cn.将服务器呈现的 Nuxt.js 网站部署到 Azure 静态 Web 应用(预览)Deploy server-rendered Nuxt.js websites on Azure Static Web Apps Previe...
使用 Nuxt.js 创建一个静态网站【Vue.js 应用框架 Nuxt.js】
yuzhiboyouzhu的博客
08-04 3001
1、vue init nuxt/starter ssr-blog 2、cd ssr-blog 3、npm install 4、npm run dev 原文链接：https://www.sohu.com/a/192066749_463970
nuxt.js中间件实现拦截权限判断的方法
01-19
最近在把vue的项目改成基于nuxt.js是 ssr渲染，需要进行权限拦截判断，网上查了不少资料。最终看官方手册解决了，贴一下过程 项目环境 “element-ui”:”^2.3.4″, “flyio”:”^0.5.2″, “js-cookie”:”^2.2.0″, “nuxt”:”^1.4.0″, 一：首先登录页面 在登录页面script中引入 import Cookie from 'js-cookie' //npm install js-cookie --save 在script里加上 data(){ return{ redirectURL:'/' } }, mounted(
nuxt php 路由鉴权,路由鉴权 - Nuxt.js 中文文档
weixin_26905423的博客
03-16 315
Nuxt.js 可以很轻松地创建需要鉴权的路由。使用 Express 和 Sessions想要给应用添加 sessions 特性的话，我们将要用到 express and express-session。因此，我们需要以编程形式使用 Nuxt.js。首先，我们先安装依赖包：yarn add express express-session body-parser whatwg-fetch我们待会会讲...
@nuxtjs/auth权限模块使用教程（很好的代替路由卫士）
幻日のヨハネ
09-08 1万+
前言 废话不多说，先看我们没有该模块该如何登陆： <template> <div> <h1>login page</h1> <button @click="login"> 登录 </button> </div> </template> <script> export default { methods: { login () { c
Nuxt.js之自动路由原理的实现方法
10-17
Nuxt.js是一个基于Vue.js的框架，专门用于构建服务端渲染的应用。它的核心特性之一是自动路由，这使得开发者能够快速地根据项目目录结构来创建和管理路由，无需手动配置Vue Router。Nuxt.js自动路由的实现原理是通过...
Nuxt.js 数据双向绑定的实现
10-17
主要介绍了Nuxt.js 数据双向绑定的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nuxt.js踩坑总结分享
10-18
本篇文章主要介绍了Nuxt.js踩坑总结分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
device-module:Nuxt.js模块，用于检测设备类型
04-28
@ nuxtjs /设备 该模块将指示设备类型的标志注入到上下文和组件实例中。 参见。 设置 使用yarn或npm将@nuxtjs/device添加到开发依赖项中。 yarn add --dev @nuxtjs/device # Using npm npm install -D @nuxtjs/...
nuxt-template：Nuxt.js项目模板
02-13
模板我很棒的Nuxt.js模板构建设置# install dependencies$ yarn install# serve with hot reload at localhost:3000$ yarn dev# build for production and launch server$ yarn build$ yarn start# generate static ...
nuxt框架中路由鉴权之Koa和Session的用法
08-27
后台管理页面需要有登录系统，所以考虑做一下路由鉴权，这篇文章主要介绍了nuxt框架中路由鉴权之Koa和Session的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nuxt.js SSR与权限验证的实现
10-17
主要介绍了Nuxt.js SSR与权限验证的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-nuxt 登录鉴权
daddykei的博客
12-01 3122
vue-nuxt 登录鉴权介绍链接开始继续往代码中走autoFetchproxy配置请求拦截 介绍 来自mentor的梳理，做个总结和记录 链接 https://auth.nuxtjs.org/api/options/#cookie 开始 根据这个文档描述，在使用@nuxt/auth 后，如果没有显示指定cookie: false, 则auth token 会被默认存储在 cookie 里 （前面localstorage 也是一样） 所以在 login接口成功后，token 就会以 auth._tok
vue-router动态路由权限总结
qq_42750581的博客
11-21 732
一、根据后台返回的不同菜单权限，实现不同的菜单展示。如：图一是后台返回给我的一个包含主页权限的menuList列表，然后我们要把图一的列表处理成我们想要的格式的列表，如图二为了方便处理我是按照vue-router格式进行处理的。 图一（处理前数据）： 图二（处理后数据）： 二、 util.mapMenuList = function (info) { let list = JSON.pa...
nuxt路由鉴权（express模板）
ch_Asion的博客
08-22 3062
//这里我们以用户登录鉴权为例 express依赖express-session中间件实现session功能 若我们不加载express-session组件 router.get('/user/login', function (req, res) { console.log(req,req.session) }) 会发现不存在session对象 引入express-sessio...
nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta
热门推荐
狼丶宇先森的网络科技空间
01-12 1万+
nuxt 官网说的 专注于UI的渲染,作者想试一下用来写后台管理的界面感觉何如,可以开启 spa模式,或者不改变,也会有不一样的体验哦. 基于nuxt.js的管理后台项目,一个项目部署,可以一站式管理数据库和你的业务的增删改查操作,项目暂未完善,待完善后开源于github   一个问题,想了好多种办法,终于用了一个笨方法解决了这个问题 如下所示:   routes.js 如下: /**...
【vue】通过路由拦截无权限访问的权限页面
GossipHHH的博客
11-09 1万+
前景：一个系统平台，针对不同用户登录做了一个权限功能，首先展示的菜单，事先在route.js中配置好，根据后台返回的菜单名称，按需展示对应菜单。但是当时忘记做一个判断，若一个用户已经登录，虽然菜单未展示比如权限管理页面，但对方知道权限管理页面地址，在地址栏中直接输入地址，可直接访问。因为在路由中没有做拦截判断。 下面上代码： router文件夹中有两个文件，一个是index.js，一个是route...
nuxt route 全局管理 route.beforeEach 替代
solocao的专栏
08-29 9383
在使用nuxt之前，我们正常的route控制语法如下： const route = new Router({ routes:{ [...] } }) route.beforeEach(to,from,next){ //进行路由权限校验等方法 } 而使用nuxt，路由默认会根据页面的路径规则自动生成，所以乍一看根本没有配置的地方，所以当我们想要使用类似bef...
nuxt.config.js
最新发布
07-27
nuxt.config.js 是一个 Nuxt.js 项目的配置文件，用于配置 Nuxt.js 应用的各种设置和选项。你可以在这个文件中配置一些全局的设置，包括路由、模块、插件、构建配置等等。通过修改这个文件，你可以影响你的 Nuxt.js 应用的行为和功能。 在 nuxt.config.js 中，你可以配置以下内容： - `mode`: 设置应用的渲染模式，可以选择 "universal"（默认）或 "spa"。 - `srcDir`: 指定源代码目录，默认为 "src/"。 - `head`: 配置页面的 `<head>` 标签中的内容，比如设置网页标题、引入外部样式或脚本等。 - `css`: 配置全局 CSS 文件或样式模块。 - `modules`: 配置需要使用的 Nuxt.js 模块。 - `plugins`: 配置需要在应用初始化之前运行的插件。 - `router`: 配置路由相关的设置，如自定义路由规则、中间件等。 - `build`: 配置构建相关的设置，如代码分割、压缩等。 除了这些基本配置之外，nuxt.config.js 还提供了很多其他选项，可以根据你的需求进行配置和调整。如果你想了解更多关于 nuxt.config.js 的详细信息，可以查阅 Nuxt.js 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值