目录
页面和数据
进行整合
SPA单页应用程序 | SSR服务器端渲染 | |
---|---|---|
优势 | 1.页面内容在客户端渲染 2. 只关注View层,与后台耦合度低,前后端分离 3.减轻后台渲染画面的压力 | 1.更好的SEO,搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content),用户能更快的看到完整渲染的画面 |
劣势 | 1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好 | 1.更多的服务器端负载 2.涉及构建设置和部署的更多要求,需要用Node.js渲染 3.开发条件有限制,一些生命周期将失效 4.一些常用的浏览器API无法使用 |
前端客户端
内容。
前端服务端
内容。
create-nuxt-app
create-nuxt-app
需要使用 npx
npx create-nuxt-app <project-name>
npx create-nuxt-app demo_nuxt02
npm run dev
http://localhost:3000
目录名称 | 描述 |
---|---|
assets | 资源目录,用于存放==需要编译==的静态资源。例如:LESS、SASS等 默认情况下,Nuxt使用Webpack若干加载器处理目录中的文件 |
components | vue组件目录,Nuxt.js 不会增强该目录,及不支持SSR |
layouts | 布局组件目录 |
pages | 页面目录,所有的vue视图,nuxt根据目录结构自动生成对应的路由。 |
plugins | 插件目录 |
static | 静态文件目录,==不需要编译==的文件 |
store | vuex目录 |
nuxt.config.js | nuxt个性化配置文件,内容将覆盖默认 |
package.json | 项目配置文件 |
<nuxt-link>
标签。
标签名 | 描述 |
---|---|
<nuxt-link> | nuxt.js中切换路由 |
<Nuxt /> | nuxt.js的路由视图 |
<router-link> | vue默认切换路由 |
<router-view/> | vue默认路由视图 |
路径 | 组件位置及其名称 | 规则 |
---|---|---|
/ | pages/index.vue | 默认文件 index.vue |
/user | pages/user/index.vue | 默认文件 index.vue |
/user/one | pages/user/one.vue | 指定文件 |
/user
可以匹配几种文件?
pages/user.vue
文件 【优先级高】
pages/user/index.vue
文件
路由中路径匹配 | 组件位置及其名称 |
---|---|
/ | pages/index.vue |
/user/:id | pages/user/_id.vue |
/:slug | pages/_slug/index.vue |
/:slug/comments | pages/_slug/comments.vue |
user/_id.vue
<template>
<div>
查询详情 {{this.$route.params.id}}
</div>
</template>
<script>
export default {
transition: 'test',
mounted() {
console.info(this.$route)
},
}
</script>
<style>
</style>
/news/123
匹配_id.vue
还是_name.vue
?
<nuxt-link>
解决以上问题
<nuxt-link :to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link>
<nuxt-link :to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link>
路径 | 组件位置及其名称 |
---|---|
不匹配的路径 | pages/_.vue |
<nuxt-child/>
显示子视图内容
pages/ --| book/ //同名文件夹 -----| _id.vue -----| index.vue --| book.vue //父组件
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>
pages/child/book/list.vue
<template> <div>书籍列表</div> </template> <script> export default { } </script> <style> </style>
pages/child/book/_id.vue
<template> <div>书籍详情{{$route.params.id}} </div> </template> <script> export default { } </script> <style> </style>
.page-enter-active
样式表示进入的过渡效果。
.page-leave-active
样式表示离开的过渡效果。
assets/main.css
,编写如下内容:
.page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; }
transition
字段即可:
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; }
layouts/default.vue
<template>
<div>
<nuxt-link to="/">首页</nuxt-link> |
<nuxt-link to="/user/login">登录</nuxt-link> |
<nuxt-link to="/user/123">详情</nuxt-link> |
<nuxt-link to="/about">默认页</nuxt-link> |
<nuxt-link to="/nuxt/async">async</nuxt-link> |
<hr/>
<Nuxt />
</div>
</template>
layouts/error.vue
页面,实现个性化错误页面
<template>
<div>
<div v-if="error.statusCode == 404">
404 页面不存在 {{error.message}}
</div>
<div v-else>
应用程序错误
</div>
<nuxt-link to="/">首 页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error']
}
</script>
<style>
</style>
_.vue
(先执行)
~/layouts/error.vue
特殊配置项 | 描述 |
---|---|
asyncData | SSR进行异步数据处理,也就是服务器端ajax操作区域。 |
fetch | 在渲染页面之前获取数据填充应用的状态树(store) |
head | 配置当前页面的head标签,整合第三方css、js等。 |
layout | 指定当前页面使用的布局 |
transition | 指定页面切换的过渡动效 |
scrollToTop | 布尔值,默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。 |
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
//异步处理数据, 每次加载之前被调用
asyncData (context) {
// called every time before loading the component
return { name: 'World' }
},
//用于在渲染页面之前获取数据填充应用的状态树(store)
fetch () {
// The fetch method is used to fill the store before rendering the page
},
//配置当前页面的 Meta 标签
head: {
// Set Meta Tags for this Page
},
// and more functionality to discover
...
}
</script>
<style>
.red {
color: red;
}
</style>
<template>
<div>
详情页 {{$route.params.id}} <br/>
<div class="bg2"></div>
<div class="bg3"></div>
</div>
</template>
<script>
export default {
head: {
title: '详情页',
link: [
{rel:'stylesheet',href:'/style/img.css'},....
],
script: [
{ type: 'text/javascript', src: '/js/news.js' }
]
}
}
</script>
<style>
.bg2 {
background-image: url('~static/img/2.jpg');
width: 300px;
height: 300px;
background-size: 300px;
}
</style>