Nuxt基础

NuxtJS介绍

一个基于 Vue.js 生态的第三方开源服务端渲染应用框架

官网： https://zh.nuxtjs

NuxtJS 基本使用

  1. 创建新的项目
  2. 已有的Node.js 服务端项目
    1. 直接把 Nuxt 当作一个中间件集成到 Node Web Server中
  3. 现有的Vue.js 项目
    1. 非常熟悉 Nuxt.js
    2. 至少 10% 的代码改动

初始化 Nuxt.js 应用

// 方式一：
// 安装 
npm init -y

// 创建项目
npx create-nuxt-app <项目名>

cd <项目名>

npm run dev

Nuxt.js 会监听 pages 目录中的文件更改，添加新页面时无需重新启动应用程序。

// 方式二：
mkdir <项目名>
cd   <项目名>

// package.json
"scripts": {
	"dev": "nuxt"
}

npm install --save nuxt

mkdir pages					// 创建pages目录

touch index.vue

npm run dev

.nuxt/ 文件夹时 Nuxt 在编译时自动生成的文件

学新的知识点，创建分支：

git init 初始化仓库

git add . 添加到暂存区

git commit -m “” 提交到本地分支

git branch brName 创建分支

git branch 查看分支

git checkout brName 切换分支

git checkout -b brName2 创建并切换分支

路由

基本路由

Nuxt.js 根据 pages 目录结构自动生成Vue-router 模块的路由配置。

自动生成的路由文件 .nuxt/router.js

路由导航

  1. a标签： 它会刷新整个页面，不要使用

  2. nuxt-link 组件

    1. <router-link> 一样可以用

  3. 编程式导航

    1. 点击按钮跳转

      methods: {
	onClick(){
		this.$router.push('/')
	}
}

    和 vue-router 的用法完全一样

动态路由

无需配置路由，但文件要以 _ 开头，如user文件夹下 _id.vue。 组成的id 为 /user/:id? , 访问时如localhost:3000/user/4

文件中获取 id 的值， {{ $route.params.id }}

嵌套路由

提取出公共的部分，其他的部分嵌套进去。

创建与文件夹同名的文件：

pages/
	users/
		abc.vue
    users.vue				// 与文件夹同名
    
//  users.vue 中使用 <nuxt-child />  作为子路由的出口
// 访问  localhost:3000/users/abc, 会出现父组件嵌套子组件

路由配置

// nuxt.config.js
module.exports = {
	router: {				// 自定义路由配置
		base: "/app",			// "/"  --->  'localhost:3000/abc/' 
		// routes： 路由配置表
		extendRoutes(routes, resolve){
			routes.push({
				name: '',
				path: '',
				component: resolve(__dirname, 'pages/404.vue'),
			})
		}
	}
}

视图

HTML ——> Layout ——> Page

模板

默认看不到模板，如需要定制，在根目录下创建 app.html, 使用官方模板，再进行修改。

视图布局

可以扩展默认布局，或在layout 目录下创建自定义布局。

// layouts/default.vue
<template>
	<div>
		<nuxt  />					// 用于加载布局中的页面
	</div>
</template>

// pages/index.vue
export default {
	layout: 'abc'			// 默认layouts/default.vue， 可以自己指定布局文件
}

改动布局后，需要重启一下

异步数据

asyncData

可以在设置组件的数据之前能异步获取或处理数据。

npm install axios

// index.vue
export default = {
	name: 'Home',
	// 当你想要动态页面内容有利于SEO 或者是 提升首屏渲染速度的时候，就在 asyncData中发请求拿数据
	async asyncData () {
		const res = await axios({
			method: 'GET',
			url: 'hjttp://localhost:3000/data.json'
		})
		return res.data
	},
	// 如果是非异步数据或者普通数据，则正常的初始化到 data 中即可
	data() {
		return {
			title: 'title'
		}
	}
}

基本用法：

  1. 它会将 asyncData 返回的数据融合组件 data 方法返回数据一并给组件
  2. 调用时机： 服务端渲染期间和客户端路由更新之前
    1. 路由导航的时候，asyncData() 也会被调用

注意事项：

  1. 只能在页面组件中使用（不能在公共组件中）
  2. 没有 this, 因为他是组件初始化之前被调用的

上下文对象

asyncData中不能有this，如果需要使用，就用 context代替

async asyncData(context){
	// ...
	// 获取  this.$route.params.id
	const id = context.params.id
}

更多推荐

Nuxt基础