初探 SSR 之 Nuxt
栏目: JavaScript · 发布时间: 5年前
内容简介:曾今听说过在学习过程中参考的资料有:文档
曾今听说过 SSR
做搜索引擎优化( SEO
),那时候的我只知道有这个东西并不了解。现在因为工作需要入门学习了 Nuxt
,刚刚开始我还以为很难,学完之后发现他比我 想象中的简单多了。粗略看一遍文档,敲一遍文档的案例,在再网上找了一个小小的项目练练手。好像就已经学的差不多了,但愿等工作需要的时候我可以快速上手,用着毫无压力吧。
在学习过程中参考的资料有:文档 Nuxt.js
和 合格前端系列第十一弹-初探 Nuxt.js 秘密花园 里面的 Demo
小项目。阅读文档不仔细,闹过一次笑话。
Nuxt
目录结构
创建一个 nuxt
很简单,我假设你已经不是刚刚入门前端的小伙伴了
$ npx create-nuxt-app <项目名> 复制代码
创建好项目以后,会得到入流程图所示的项目结构
初始化得到的这个项目目录结构基本不需要我们在做什么改变,我们只要在对应的目录底下做编写对应的代码就好了。 nuxt
搭建的项目和用 vue cli
搭建的项目有些不一样的事,不需要我们手动去设置路由。所有的路由都是 nuxt
帮我们设置好的。 优点就是,再也不用担心我绞破脑汁想路由名字了;下面会详细介绍,没有介绍到的目录或者文件,都在流程图里面详细介绍了,大部分的配置和 vue cli
配置大同小异 。
页面布局
关于页面要如何进行布局,我们通常把它放在 layouts
目录底下 default.vue
文件里面(默认布局) 例如 default.vue
代码如图所示
<template> <div> <v-header></v-header> <main ref="container" class="content-container"> <nuxt /> </main> </div> </template> 复制代码
那么所有页面都将引入一个 v-header
组件,所有 pages
目录底下页面代码都将放入到 main
标签里面(前提是你没有使用自定义布局) 关于自定义布局请转接到文档
页面
Nuxt.js
为页面提供的特殊配置项,我们在页面中可以直接这些方法和属性
在 asyncData
方法里面第一个参数就是当前页面组件的上下文的对象
因为其他方法里面也有上下文这个东西详细介绍一下,关于其他方法和属性详细信息请参考api
路由信息
基本路由
假设 pages
的目录结构如下:
pages/ --| user/ -----| index.vue -----| one.vue --| index.vue 复制代码
那么, Nuxt.js
自动生成的路由配置如下:
router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] } 复制代码
动态路由
带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue
文件 或 目录。
假设 pages
的目录结构如下:
pages/ --| _slug/ -----| comments.vue -----| index.vue --| users/ -----| _id.vue --| index.vue 复制代码
Nuxt.js
生成对应的路由配置表为:
router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'users-id', path: '/users/:id?', component: 'pages/users/_id.vue' }, { name: 'slug', path: '/:slug', component: 'pages/_slug/index.vue' }, { name: 'slug-comments', path: '/:slug/comments', component: 'pages/_slug/comments.vue' } ] } 复制代码
你会发现名称为 users-id
的路由路径带有 :id?
参数,表示该路由是可选的。如果你想将它设置为必选的路由,需要在 users/_id
目录内创建一个 index.vue
文件。
更多路由信息请参考参考文档
Nuxt api
最重要的是我们要了解他的生命周期,这样才可以更好的使用他
进入 DEMO
真枪实弹做一次,体会更加深刻,不能纸上谈兵。 负责搬砖我的,搬了一个仿掘金的 Demo
项目,项目完全参考 合格前端系列第十一弹-初探 Nuxt.js 秘密花园
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网络江湖三十六计
程苓峰,王晶 / 经济日报出版社 / 2009-6 / 40.00元
《网络江湖三十六计》内容简介:貌合神离:卖个破绽给对手,让他尝到甜头,自认为可安枕无忧,往往就松懈大意。于是,自己蓄力并反击的机会就来了。诱敌就是“貌合”,暗地发力就是“神离”。一起来看看 《网络江湖三十六计》 这本书的介绍吧!