目录
1,Nuxt.js概述
1.1:学习过的SPA
SPA(single page web application)单页 Web 应用,Web 不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统等等,组成的应用程序。
-
我们之前学习的Vue就是SPA中的佼佼者。
-
1.2:什么是SEO
-
SEO:搜索引擎优化(Search Engine Optimization), 通过各种技术(手段)来确保,我们的Web内容被搜索引擎最大化收录,最大化提高权重,最终带来更多流量。
-
非常明显,SPA程序不利于SEO
SEO解决方案:提前将页面和数据
进行整合
-
前端:采用SSR
-
后端:页面静态化 (freemarker 、thymeleaf、velocity)
1.3:什么是SSR技术
服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。
-
在SSR中,前端分成2部分:前端客户端、前端服务端
-
前端服务端,用于发送ajax,获得数据
-
前端客户端,用于将ajax数据和页面进行渲染,渲染成html页面,并响应给调用程序(浏览器、爬虫)
-
如果爬虫获得html页面,就可以启动处理程序,处理页面内容,最终完成SEO操作。
1.4:SPA和SSR对比
SPA单页应用程序 | |||
优势 | 1.页面内容在客户端渲染 2. 只关注View层,与后台耦合度低,前后端分离 3.减轻后台渲染画面的压力 |
|
|
劣势 |
|
1.更多的服务器端负载 2.涉及构建设置和部署的更多要求,需要用Node.js渲染 3.开发条件有限制,一些生命周期将失效 4.一些常用的浏览器API无法使用 |
1.5:什么是Nuxt.js
-
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
-
Nuxt支持vue的所有功能,此类内容为
前端客户端
内容。 -
Nuxt特有的内容,都是
前端服务端
内容。
-
-
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。
-
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
2,入门案例
2.1:create-nuxt-app介绍
-
Nuxt.js 提供了脚手架工具
create-nuxt-app
-
create-nuxt-app
需要使用npx
-
npx 命令为 NPM版本5.2.0默认安装组件
2.2:安装
npx create-nuxt-app learn_nuxt
2.3:启动
npm run dev
nuxtjs改善
2.4:访问
2.5:注意
安装时:以管理员方式运行vs,不然在安装过程中会显示没有权限错误ERROR
3,目录结构
3.1:目录
目录名称 | 描述 |
---|---|
assets | 资源目录,用于存放==需要编译==的静态资源。例如:LESS、SASS等 默认情况下,Nuxt使用Webpack若干加载器处理目录中的文件 |
components | vue组件目录,Nuxt.js 不会增强该目录,及不支持SSR |
layouts | 布局组件目录 |
pages | 页面目录,所有的vue视图,nuxt根据目录结构自动生成对应的路由。 |
plugins | 插件目录 |
static | 静态文件目录,==不需要编译==的文件 |
store | vuex目录 |
nuxt.config.js | nuxt个性化配置文件,内容将覆盖默认 |
package.json | 项目配置文件 |
3.2:别名
assets 资源的引用:~ 或 @
<!-- assets 查看图片方式 @ 或者 ~ -->
<img src="@/assets/java.jpeg">
<img src="~/assets/java.jpeg">
<img src="~assets/java.jpeg">
static 目录资源的引用:/ 直接引用
<!-- static 查看图片方式 -->
<img src="/java.jpeg">
4,路由
4.1:路由概述
-
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
-
要在页面之间切换路由,我们建议使用
<nuxt-link>
标签。
标签名 | 描述 |
---|---|
<nuxt-link> |
nuxt.js中切换路由 |
<Nuxt /> |
nuxt.js的路由视图 |
<router-link> |
vue默认切换路由 |
<router-view/> |
vue默认路由视图 |
4.2:基础路由
-
自动生成基础路由规则
路径 | 组件位置及其名称 | 规则 |
---|---|---|
/ | pages/index.vue | 默认文件 index.vue |
/user | pages/user/index.vue | 默认文件 index.vue |
/user/one | pages/user/one.vue | 指定文件 |
- 实例
情况1:访问路径,由pages目录资源的名称组成(目录名称、文件的名称) - 资源位置: ~/pages/user/one.vue - 访问路径:http://localhost:3000/user/one 情况2:每一个目录下,都有一个默认文件 index.vue - 资源位置: ~/pages/user/index.vue - 访问路径:http://localhost:3000/user
-
思考:
/user
可以匹配几种文件?-
pages/user.vue
文件 【优先级高】 -
pages/user/index.vue
文件
-
4.3:动态路由
-
在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
路由中路径匹配 组件位置及其名称 / pages/index.vue /user/:id pages/user/_id.vue /:slug pages/_slug/index.vue /:slug/comments pages/_slug/comments.vue
-
实例1:获得id值,创建资源
user/_id.vue
实例;
4.4:动态命名路由
我们可以使用
<nuxt-link>
解决以上问题-
通过name 确定组件名称:“xxx-yyy”
-
通过params 给对应的参数传递值
-
<!-- 导航 -->
<nuxt-link to="/img/ShowImage">目录-别名</nuxt-link>|
<nuxt-link :to="{name:'news-id',params:{id:'123'}}">动态命名路由-id</nuxt-link>
<nuxt-link :to="{name:'news-name',params:{name:'san'}}">动态命名路由-name</nuxt-link>
4.5:默认路由
路径 | 组件位置及其名称 |
---|---|
不匹配的路径 | pages/_.vue |
-
404页面,可以采用 _.vue进行处理
4.6:嵌套路由
创建嵌套子路由,你需要添加一个 父组件Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。
-
要求:父组件 使用
<nuxt-child/>
显示子视图内容
pages/
--| book/ //同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue //父组件
步骤1:编写父组件 pages/child/book.vue
<template>
<div>
<nuxt-link to="/child/book/list">书籍列表</nuxt-link> |
<nuxt-link to="/child/book/123">书籍详情</nuxt-link> |
<hr>
<nuxt-child />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
步骤2:编写子组件 pages/child/book/list.vue
<template>
<div>书籍列表</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
步骤3:编写子组件 pages/child/book/_id.vue
<template>
<div>书籍详情{{$route.params.id}} </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
4.7:过渡动效
4.7.1:全局过渡动效设置
-
Nuxt.js 默认使用的过渡效果名称为 page
-
.page-enter-active
样式表示进入的过渡效果。 -
.page-leave-active
样式表示离开的过渡效果。
-
-
步骤1:创建
assets/main.css
,编写如下内容:
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
步骤2:nuxt.config.js 引入main.css文件
module.exports = {
css: [
'assets/main.css'
]
}
4.7.2:自定义动画
-
如果想给某个页面自定义过渡特效的话,只要在该页面组件中配置
transition
字段即可: -
步骤1:在全局样式
assets/main.css
中添加名称为test
的过渡效果
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
步骤2:需要使用特效的vue页面编写如下:
export default {
transition: 'test'
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/120808.html