Nuxt.js基础_综合

Nuxt.js 基础

Nuxt.js是什么

Nuxt.js 是一个基于Vue.js的通用应用框架
通过对客户端/服务端基础架构的抽象组织，Nuxt主要关注的是应用的UI渲染
可以基于它初始化新项目的基础结构，或者在已有的node.js中使用Nuxt.js Nuxt.js预设了利用Vue.js
开发服务端渲染所需要的各种配置提供了一个命令: nuxt generate ,为基于Vue.js应用提供了生成对应静态站点的功能

Nuxt.js运作
Nuxt.js集成了 VUE + webpack + babel + Vue-Router + Vuex + Vue ssr + Vue-Meta

Nuxt.js 的作用

服务端渲染(通过SSR)
单页应用程序(SPA)
静态化(预渲染)

Nuxt.js 的使用方式

初始化项目
已有的Node.js服务端项目

直接把Nuxt当做一个中间件集成到Node Web Server中

现有的Vue.js项目

非常熟悉Vue.js项目
至少有百分之10的代码改动

官方文档： https://zh.nuxtjs.org/guide/installation

方式一：使用create-nuxt-app
方式二：手动创建

从头新建项目

mkdir 文件名
npm init -y
npm i nuxt
package增加 script配置 “dev”:“nuxt”
,通过npm run dev 启动项目
新建pages目录下index.vue文件，表示网站的首页
新建about.vue ，会自动编译

index.vue

<template><div><h1>hello nuxt</h1></div>
</template><script>
export default{
    name:'HomePage'
}
</script>

基础

git init
新增 .gitignore 新增 node_modules .nuxt 排除提交文件

Nuxt.js 基础路由

Nuxt.js 依据pages 目录结构自动生成vue-router模块的路由配置页面之间跳转，建议使用标签
新建pages/user/index.vue 可以直接访问locahost:3000/user user下新增abc组件，访问
localhost:3000/user/abc
.nuxt文件夹下会生成router.js
，就是对应的路由规则，引入vue，vue-router

路由-路由导航

实现方式

a 标签：不友好，会刷新整个页面，不建议使用
nuxt-link 组件，使用和Vue的router-link使用基本一样
编程式导航：js跳转路由，使用和vue编程导航一致

实现
about.vue

<template><div><h1>About page</h1><!-- a链接实现，刷新导航，走服务端渲染 --><a href="/">首页</a><!-- router-link 导航链接组件 --><router-link to="/">首页</router-link><!-- 编程式导航 --><button @click="onClick">首页</button></div>
</template>
<script>
export default {
    name: "AboutPage",methods:{
    onClick(){
    this.$router.push('/')}}
}
</script>

路由-动态路由

Vue Router 动态路由匹配
vue中使用/:id 方式 Nuxt.js 动态路由
在nuxt.js里面定义带产生的动态路由，需要创建对应的以下划线作为前缀的Vue文件或目录例如user 下新建 _id.vue
id是对应动态参数在地址栏跳转 localhost:3000/user/1, localhost:3000/user/2
或是其他数字都可以跳转到_id.vue

_id.vue

<template><div><h1>user page</h1><p>{
    {
    $route.params.id}}</p></div>
</template>
<script>
export default {
    name:"userPage"
}
</script>

路由-嵌套路由

nuxt.js嵌套路由同 vue中的嵌套路由创建内嵌子路由，你需要添加一个Vue文件，同时添加一个
与该文件同名的子目录用来存放子视图组件需要添加占位符存放子路由出口
pages文件夹下新建user.vue
访问localhost:3000/user 会渲染user下index.vue
访问localhost:3000/user/abc.vue 渲染user下abc.vue

自定义路由配置

增加nuxt.config.js文件配置

extendRoutes ：类型function
希望扩展Nuxt.js创建的路由，可以通过extendRoutes选项执行此操作
添加自定义路由

/*** Nuxt.js 配置文件 * * 需要使用node.js中module规范* */
module.export={
    router:{
    // // abc 成为默认路径// base:"/abc"extendRoutes(routes,resolve){
    routes.push({
    name:'/hello',path:'hello',component:resolve(__dirname,'pages/about.vue')})}}
}

视图 - 模板

在这里插入图片描述
视图一般由三部分组成：

第一层是外层的document的html
第二层是可选的Layout组件，相当于所有页面的父路由
第三层是page，是自定义的组件
如果自定义默认的html模板，在src文件夹下新建 app.html

<!DOCTYPE html>
<html {
    {
     HTML_ATTRS }}><head {
    {
     HEAD_ATTRS }}>{
    {
     HEAD }}</head><body {
    {
     BODY_ATTRS }}><!--渲染的内容最终会注入到这里-->{
    {
     APP }}</body>
</html>

视图 - 布局

Layout：页面模板和具体页面之间加入的布局组件
使用
通过添加layouts/default.vue 文件来拓展应用的默认布局
在布局文件在需要添加组件显示页面的主题内容

<template><div><nuxt /></div>
</template>
<script>
export default {
    name:"LayoutPage"
}
</script>

异步组件

基本用法

会将asyncData返回的数据融合组件data方法返回数据一并给组件
调用时机：服务端渲染期间和客户端路由更新之前

注意事项

只能在页面组件中使用
没有this，因为它是在组件初始化之前被调用的

<template><div><h1>{
    {
     title }}</h1><nuxt-link to="/about">About</nuxt-link><br><foo :posts="posts" /></div>
</template><script>
import axios from 'axios'export default {
    name: 'HomePage',// 当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData 中发请求拿数据async asyncData () {
    console.log('asyncData')console.log(this)const res = await axios({
    method: 'GET',url: 'http://localhost:3000/data.json'})return res.data},// 如果是非异步数据或者普通数据，则正常的初始化到 data 中即可data () {
    return {
    foo: 'bar'}}
}
</script>

异步数据 - 上下文对象

Foo.vue

<template><div><h1>FooPage</h1><ul><liv-for="item in posts":key="item.id"><nuxt-link :to="'/article/' + item.id">{
    {
     item.title }}</nuxt-link></li></ul></div>
</template><script>
export default {
    name: 'FooPage',props: ['posts'],// async asyncData () {
    // console.log('foo asyncData')// return {
    // foo: 'bar'// }// }
}
</script><style></style>

index.vue

<template><div><h1>{
    {
     title }}</h1><nuxt-link to="/about">About</nuxt-link><br><foo :posts="posts" /></div>
</template><script>
import axios from 'axios'
import Foo from '@/components/Foo'export default {
    name: 'HomePage',components: {
    Foo},// 当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData 中发请求拿数据async asyncData () {
    console.log('asyncData')console.log(this)const res = await axios({
    method: 'GET',url: 'http://localhost:3000/data.json'})return res.data},// 如果是非异步数据或者普通数据，则正常的初始化到 data 中即可data () {
    return {
    foo: 'bar'}}
}
</script><style></style>

_id.vue

<template><div><h1>{
    {
     article.title }}</h1><div>{
    {
     article.body }}</div></div>
</template><script>
import axios from 'axios'export default {
    name: 'ArticlePage',// Nuxt 中特殊提供的钩子函数，专门用于获取页面服务端渲染获取async asyncData (context) {
    console.log(context)const {
     data } = await axios({
    method: 'GET',url: 'http://localhost:3000/data.json'})const id = Number.parseInt(context.params.id)// 这返回的数据会和data(){}中的数据合并到一起给页面使用return {
    article: data.posts.find(item => item.id === id)}}
}
</script><style></style>