创建Nuxt.js项目
首先,确保你已经安装了Node.js和yarn或npm。然后,通过命令行创建一个新的Nuxt.js项目:
bash
yarn create nuxt-app my-nuxt-project
cd my-nuxt-project
在创建过程中,你可以选择是否需要UI框架、预处理器等选项,根据需要配置。
目录结构
Nuxt.js遵循特定的目录结构,其中一些关键目录如下:
js
├── .nuxt/ # 自动生成的文件,包含编译后的代码和配置
├── assets/ # 用于存放未编译的静态资源,如CSS、图片、字体
├── components/ # 自定义Vue组件
├── layouts/ # 应用的布局文件,定义页面的通用结构
│ └── default.vue # 默认布局
├── middleware/ # 中间件文件
├── pages/ # 应用的路由和视图,每个文件对应一个路由
│ ├── index.vue # 默认首页
│ └── [slug].vue # 动态路由示例
├── plugins/ # 自定义Vue.js插件
├── static/ # 静态资源,会被原样复制到输出目录
├── store/ # Vuex状态管理文件
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store入口文件
├── nuxt.config.js # Nuxt.js配置文件
├── package.json # 项目依赖和脚本
└── yarn.lock # 或者npm.lock,记录依赖版本
.nuxt/
:这个目录是自动生成的,包含了编译后的代码,一般不需要直接修改。assets/
:存放未编译的静态资源,比如CSS、JavaScript和图片。在构建时,Nuxt.js会处理这些资源。components/
:存储自定义Vue组件,可以复用在应用的不同部分。layouts/
:定义页面的布局,可以有一个默认布局,也可以有多个特定布局。pages/
:每个文件对应一个路由,文件名就是路由名称。动态路由使用方括号[]表示。middleware/
:放置自定义的中间件,可以在页面渲染前后执行逻辑。plugins/
:自定义Vue.js插件的入口文件。static/
:直接复制到构建输出目录,不做任何处理,常用于存放robots.txt或favicon.ico等。store/
:Vuex状态管理的目录,存放actions、mutations、getters和整个store的入口文件。nuxt.config.js
:Nuxt.js的配置文件,用于定制项目的设置。package.json
:项目依赖和脚本配置。yarn.lock
或npm.lock
:记录项目依赖的精确版本,确保不同环境下的依赖一致性。
页面渲染
在pages/
目录下创建一个index.vue
文件,这是应用的首页:
html
<!-- pages/index.vue -->
<template>
<div>
<h1>Hello from Nuxt.js SSR</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'This content is server-rendered!'
};
},
asyncData() {
// 这里可以在服务器端获取数据
// 返回的数据会作为data的默认值
return { message: 'Data fetched on server' };
}
};
</script>
Nuxt.js 页面渲染的过程分为两个主要阶段:服务器端渲染 (SSR) 和客户端渲染 (CSR)。以下是Nuxt.js页面渲染的详细步骤:
初始化:
用户在浏览器中输入URL并发送请求到服务器。
服务器接收到请求后,开始处理。
路由解析:
Nuxt.js 使用 nuxt.config.js
中的 routes
配置(如果存在)或自动从 pages/ 目录生成路由。
对应的页面文件被识别,例如 pages/index.vue
或 pages/about.vue
。
数据预取:
Nuxt.js 查找页面组件中的 asyncData
或 fetch
方法(如果存在)。
这些方法会在服务器端运行,用于从API或其他数据源获取数据。
数据获取后,会被序列化并注入到页面模板中。
模板渲染:
Nuxt.js 使用 Vue.js 的渲染引擎将组件和预取的数据转换为HTML字符串。
HTML字符串中包含了客户端需要的所有初始数据,以JSON格式内联在<script>
标签中。
返回HTML:
服务器将生成的HTML响应发送回客户端(浏览器)。
客户端初始化:
浏览器接收到HTML后,开始解析和执行内联的JavaScript。
Nuxt.js客户端库(nuxt.js
)被加载并初始化。
客户端渲染:
客户端库接管渲染,Vue.js实例被创建,数据从内联的JSON注入到Vue实例。
页面完成初始渲染,用户可以看到完整的页面内容。
此时,页面是交互式的,用户可以触发事件和导航。
后续导航:
当用户导航到其他页面时,Nuxt.js 使用客户端路由(Vue Router)进行无刷新跳转。
如果新页面需要数据,asyncData
或 fetch
方法会在客户端运行,获取新的数据并更新视图。
SSG(静态站点生成):
在开发之外,可以使用 nuxt generate 命令生成静态HTML文件。
每个页面都会被预渲染为独立的HTML文件,其中包含所有必要的数据和资源。
使用asyncData
asyncData
方法是Nuxt.js特有的,它允许你在服务器端预取数据并在客户端复用这些数据。在上面的示例中,我们简单地更改了message的值,但在实际应用中,你可能会在这里调用API获取数据。
中间件
中间件(Middleware
)是一种功能,允许你在路由变更前后执行特定的逻辑。中间件可以全局、页面级或布局级使用,以处理诸如认证、数据预加载、路由守卫等任务。
1. 全局中间件
全局中间件是在nuxt.config.js文件中配置的,影响应用中的所有页面:
javascript
// nuxt.config.js
export default {
// ...
router: {
middleware: ['globalMiddleware1', 'globalMiddleware2'] // 可以是字符串数组
}
};
中间件文件通常位于middleware/目录下,例如middleware/globalMiddleware1.js:
javascript
// middleware/globalMiddleware1.js
export default function (context) {
// context 包含 req, res, redirect, app, route, store 等信息
console.log('Global Middleware 1 executed');
}
2. 页面级中间件
页面级中间件只影响特定的页面。在页面组件中声明中间件:
javascript
// pages/about.vue
export default {
middleware: 'pageMiddleware' // 可以是字符串或函数
};
对应的中间件文件位于middleware/目录,例如middleware/pageMiddleware.js:
javascript
// middleware/pageMiddleware.js
export default function (context) {
console.log('Page Middleware executed');
}
3. 布局级中间件
布局级中间件类似于页面级,但作用于使用该布局的所有页面。在布局组件中声明中间件:
javascript
// layouts/default.vue
export default {
middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};
对应的中间件文件位于middleware/目录:
javascript
// middleware/layoutMiddleware1.js
export default function (context) {
console.log('Layout Middleware 1 executed');
}
// middleware/layoutMiddleware2.js
export default function (context) {
console.log('Layout Middleware 2 executed');
}
中间件的上下文(Context)
中间件函数接收一个上下文对象作为参数,该对象包含以下属性:
req
(HTTP请求对象,仅在服务器端有效)res
(HTTP响应对象,仅在服务器端有效)redirect
(用于重定向的函数)app
(Vue实例)route
(当前路由信息)store
(Vuex Store,如果已启用)payload
(如果有asyncData返回的数据)
中间件可以顺序执行,每个中间件可以决定是否继续执行链中的下一个中间件,或者通过redirect函数中断路由。
动态路由
Nuxt.js
支持动态路由,这对于处理如博客文章、用户资料等具有动态ID的内容非常有用。在pages/目录下创建一个动态路由文件,如[id].vue:
html
<!-- pages/post/[id].vue -->
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params, $axios }) {
const response = await $axios.$get(`/api/posts/${params.id}`);
return { post: response.post };
}
};
</script>
这里的[id]表示动态参数,asyncData会自动处理这个参数并获取对应ID的博客文章。
布局
布局允许你定义全局或特定页面的通用结构。在layouts/目录下创建一个default.vue文件:
html
<!-- layouts/default.vue -->
<template>
<div>
<header>
<nav>
<!-- 导航链接等 -->
</nav>
</header>
<main>
<nuxt /> <!-- 这里将插入页面内容 -->
</main>
<footer>
<!-- 底部信息等 -->
</footer>
</div>
</template>
默认情况下,所有页面都将使用此布局。如果你想为特定页面设置不同的布局,可以在页面组件中指定:
javascript
// pages/about.vue
export default {
layout: 'custom' // 在layouts/下创建custom.vue
};
插件与库集成
Nuxt.js支持Vue.js的插件,你可以在nuxt.config.js中配置:
javascript
// nuxt.config.js
export default {
plugins: [
{ src: '~plugins/vuetify.js', ssr: true },
{ src: '~plugins/vue-chartjs.js', mode: 'client' } // 仅在客户端运行
]
};
然后在plugins/
目录下创建相应的文件,如vuetify.js
:
javascript
// plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
配置与优化
Nuxt.js 配置文件(nuxt.config.js)
nuxt.config.js
是Nuxt应用的主要配置文件,用于定制化应用的行为。以下是一些常用的配置项:
- 模式(mode):设置应用的运行模式,可选值有 'spa'(单页面应用)、'universal'(服务端渲染)和 'static'(静态生成)。默认为 'universal'。
- head:配置页面的 部分,如标题、元数据、链接等。
- css:指定全局CSS文件,可以是文件路径数组。
- build:配置构建过程,如transpile、extractCSS、extend等。例如,可以在这里添加Babel插件或调整Webpack配置。
- router:自定义路由配置,如base路径、模式等。
- axios:配置axios模块,包括基础URL、代理设置等。
- plugins:注册全局Vue插件,可以指定在客户端或服务器端加载。
- modules:加载外部模块,如@nuxtjs/axios、@nuxtjs/proxy等。
- env:定义环境变量,这些变量将在构建时注入到客户端和服务器端。
js
// nuxt.config.js
export default {
// 项目名称
name: 'my-nuxt-app',
// 项目模式:spa, universal, static
mode: 'universal', // 默认值,支持服务器端渲染
// 应用元信息
head: {
title: 'My Nuxt App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'App description' }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
// CSS样式
css: [
'@/assets/css/main.css'
],
// 路由配置
router: {
base: '/my-nuxt-app/', // 应用的基础路径
extendRoutes(routes, resolve) {
// 手动扩展或修改路由
}
},
// 构建配置
build: {
transpile: [/^my-vue-component/], // 需要转译的模块
vendor: ['lodash'], // 公共库,提前打包
extractCSS: true, // 提取CSS到单独文件
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
filename: 'vendors.js'
}
}
}
}
},
// Axios配置
axios: {
baseURL: process.env.BASE_URL || 'http://localhost:3000/api', // API基础URL
browserBaseURL: 'https://api.example.com' // 客户端的API基础URL
},
// Plugins
plugins: [
{ src: '@/plugins/vue-my-plugin', ssr: false } // 异步加载的插件,ssr: false 表示仅客户端加载
],
// Modules
modules: [
'@nuxtjs/axios', // 安装并配置axios模块
'@nuxtjs/pwa' // 安装并配置PWA模块
],
// 环境变量
env: {
apiKey: 'your-api-key',
apiUrl: 'https://api.example.com'
},
// Vuex Store配置
store: true, // 自动创建Vuex store
loading: { color: '#3B8070' }, // 加载指示器颜色
// 服务端中间件
serverMiddleware: [
{ path: '/api', handler: '~/api/index.js' } // 使用自定义的服务器端中间件
],
// 静态生成配置
generate: {
dir: 'dist', // 输出目录
fallback: true, // 对未预渲染的动态路由生成404页面
routes: () => ['/about', '/contact'] // 预渲染的指定路由
}
};
优化策略
- 异步数据预取(asyncData/fetch):利用asyncData或fetch方法在服务器端预取数据,减少客户端渲染的负担。
- 代码拆分:Nuxt.js自动进行代码拆分,确保只有当路由被访问时才加载相关代码。
- 静态站点生成(SSG):使用nuxt generate命令生成静态HTML文件,适用于内容不频繁变动的站点,提高加载速度和SEO友好性。
- 缓存策略:利用HTTP缓存策略,如ETag、Last-Modified,减少重复请求。
- Vue.js优化:确保Vue组件的优化,如避免无用的watcher、使用v-once减少重新渲染等。
- 图片优化:使用正确的图片格式(如WebP),并确保图片尺寸适当,使用懒加载技术。
- Service Worker:集成PWA支持,使用Service Worker进行离线缓存和推送通知。
- Tree Shaking:确保你的依赖库支持Tree Shaking,以剔除未使用的代码。
- 分析与监控:使用nuxt build --analyze或集成第三方工具(如Google Lighthouse)进行性能分析,持续监控应用性能。
静态站点生成(SSG)
Nuxt.js 的静态站点生成(Static Site Generation, SSG)是通过 nuxt generate
命令实现的。这个命令会遍历应用的路由,为每个路由生成一个预渲染的 HTML 文件,这些文件可以直接部署到任何静态文件托管服务上。以下是关于SSG的一些关键点:
1. 配置: 在 nuxt.config.js 文件中,可以配置 generate 选项来控制静态生成的行为:
javascript
export default {
generate: {
dir: 'dist', // 输出目录,默认为dist
fallback: true, // 对未预渲染的动态路由生成404页面
routes: () => ['/about', '/contact'], // 预定义的静态路由
exclude: ['/admin/*'], // 排除某些路由
interval: 5000, // 生成间隔,单位毫秒
concurrency: 10 // 并发生成的路由数量
}
}
2. 生成 : 运行 npm run generate
或 yarn generate
来启动静态生成过程。Nuxt.js 会根据 generate.routes
里的配置生成对应的 HTML 文件。如果没有显式定义,它会自动扫描 pages/
目录下的所有文件来生成路由。
3. 数据预取: 在页面组件中,可以使用 asyncData 或 fetch 方法来预取数据。这些数据会在生成静态页面时被注入到 HTML 中,使页面在客户端加载时无需额外请求:
javascript
// pages/about.vue
export default {
async asyncData({ params, $axios }) {
const aboutInfo = await $axios.$get('/api/about')
return { aboutInfo }
}
}
4. 中间件处理:服务器端的中间件不会在SSG过程中执行,因为SSG是在没有服务器环境的情况下生成静态文件。所以,如果需要在生成时执行某些逻辑,最好在 asyncData 或 fetch 中处理。
5. 部署: 生成的静态文件可以部署到任何静态文件托管服务,如 Netlify、Vercel、GitHub Pages 或 AWS S3。这些服务通常不需要运行任何服务器端代码,只需上传生成的 dist 文件夹即可。
6. SEO 优化: SSG 提高了SEO,因为搜索引擎爬虫可以读取预渲染的 HTML 内容,而无需等待JavaScript执行。
7. 动态路由: 对于动态路由,Nuxt.js 会尝试生成所有可能的组合。如果无法预测所有可能的动态路由,可以手动在 generate.routes 中指定,或者使用 generate.includePaths 和 generate.excludePaths 来控制。
8. 404 页面: 设置 generate.fallback 为 true 会为未预渲染的动态路由生成一个404页面,当用户访问这些路由时,Nuxt.js 会尝试在客户端渲染它们。
运行nuxt generate命令,Nuxt.js将生成静态HTML文件。
验证和错误处理
验证(Validation)
验证通常涉及表单数据或API请求的输入验证。Nuxt.js本身不直接提供验证库,但你可以集成像Vuelidate、vee-validate这样的第三方库,或者使用TypeScript等进行类型检查。
使用Vee-Validate
1. 安装: 首先,你需要安装vee-validate库:
bash
npm install vee-validate
2. 配置: 在nuxt.config.js中添加Vue插件配置:
javascript
export default {
plugins: [{ src: '~/plugins/vee-validate', ssr: false }]
};
3. 创建插件: 在plugins/vee-validate.js中配置Vee-Validate:
javascript
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
4. 使用: 在你的组件中使用Vee-Validate进行表单验证:
html
<template>
<form @submit.prevent="submitForm">
<input v-model="email" name="email" v-validate="'required|email'"/>
<span>{{ errors.first('email') }}</span>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
email: ''
};
},
methods: {
submitForm() {
this.$validator.validateAll().then(result => {
if (result) {
// 验证成功逻辑
} else {
// 验证失败逻辑
}
});
}
}
};
</script>
错误处理
Nuxt.js提供了几种处理错误的方法,包括全局错误处理和页面特定的错误处理。
全局错误处理
- 自定义错误页面: 在layouts目录下创建error.vue文件,用于自定义错误页面布局。
- 捕获全局错误: 在nuxt.config.js中配置error属性来捕获全局错误:
javascript
export default {
error: {
// 页面不存在时的处理
pageNotFound({ error, store, app, env }) {
// 处理逻辑
},
// 任何错误的处理
handler(error, { error: nuxtError, store, app, env }) {
// 处理逻辑
}
}
};
页面特定错误处理
在页面组件中,可以使用asyncData或fetch方法的try-catch结构来处理错误:
javascript
export default {
async asyncData({ params, error }) {
try {
const data = await fetchSomeData(params.id);
return { data };
} catch (err) {
error({ statusCode: 500, message: '数据获取失败' });
}
}
};
API请求错误处理
对于API请求,如果你使用了@nuxtjs/axios模块,可以在请求拦截器中统一处理错误:
javascript
// plugins/axios.js
import axios from 'axios';
import { toast } from '~/utils/toast';
axios.interceptors.response.use(null, (error) => {
const { status } = error.response;
if (status === 401) {
// 处理未授权错误
} else if (status >= 500) {
// 处理服务器错误
toast.error('服务器错误');
}
return Promise.reject(error);
});
export default ({ $axios }, inject) => {
inject('axios', $axios);
};
确保在nuxt.config.js中注册此插件。
Vue生态系统集成
Vue Router:
Nuxt.js 自动为你的应用生成了一个基于文件结构的路由系统。路由配置通常不需要手动编写,但可以通过 nuxt.config.js
的 router
属性进行扩展。
Vuex:
Nuxt.js 自动创建了一个 Vuex store。在 store
目录下,你可以创建模块化的 state、mutations、actions 和 getters。例如,创建一个 store/modules/users.js
文件来管理用户数据。
javascript
// store/modules/users.js
export const state = () => ({
users: []
});
export const mutations = {
SET_USERS(state, payload) {
state.users = payload;
}
};
export const actions = {
async fetchUsers({ commit }) {
const response = await this.$axios.get('/api/users');
commit('SET_USERS', response.data);
}
};
Vue CLI:
Nuxt.js 提供了自己的构建工具,但它也基于 Vue CLI。这意味着你可以使用类似 Vue CLI 的命令行工具,如 npx nuxt generate(静态生成)或 npx nuxt build(构建应用)。
Babel:
Nuxt.js 默认配置了 Babel,以便支持最新的 JavaScript 特性。你通常不需要手动配置 Babel,除非有特殊需求。
TypeScript:
若要使用 TypeScript,设置 typescript: true 在 nuxt.config.js 中,Nuxt.js 会自动配置 TypeScript 支持。
ESLint:
为了代码质量检查,可以在项目中安装 ESLint 并配置 .eslintrc.js。Nuxt.js 提供了 @nuxt/eslint-module 插件来简化集成。
javascript
// nuxt.config.js
module.exports = {
buildModules: [
'@nuxt/typescript-build',
'@nuxtjs/eslint-module' // 添加 ESLint 集成
],
eslint: {
fix: true, // 自动修复错误
ignoreDuringBuilds: true // 忽略构建期间的错误
}
};
VueUse:
VueUse 是一个包含各种实用功能的 Vue 用例库。要集成,首先安装 @vueuse/core
,然后在组件中导入并使用功能。
bash
npm install @vueuse/core
javascript
// 在组件中
import { useCounter } from '@vueuse/core';
export default {
setup() {
const count = useCounter(0); // 使用计数器功能
// ...
}
};
Vue插件:
可以通过 nuxt.config.js 的 plugins 配置项来全局注册 Vue 插件。例如,集成 Vue Toastify 用于显示通知:
javascript
// nuxt.config.js
export default {
plugins: [{ src: '~plugins/toastify.js', ssr: false }]
};
javascript
// plugins/toastify.js
import Vue from 'vue';
import Toastify from 'toastify-js';
Vue.use(Toastify);
使用Nuxt.js工作流
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器,nuxt generate生成静态文件。
性能优化
-
静态生成(SSG): 使用 nuxt generate 命令生成预渲染的HTML文件,这可以大大提高首屏加载速度,对SEO友好。
-
代码分割: Nuxt.js 默认会进行代码分割,将应用分为多个小块,只加载当前页面需要的代码,减少了初始加载的体积。
-
延迟加载(Lazy Loading): 对于大型应用,可以考虑延迟加载组件或模块,只在需要时加载。可以使用或结合async组件来实现。
-
优化资源:
- 图片:使用正确的格式(如WebP),压缩图片,使用懒加载(),或者使用nuxt-image或nuxt-picture组件。
- CSS:提取CSS到单独文件,减少内联样式。
- JS:利用Tree Shaking剔除未使用的代码。
-
异步数据预取: 使用 asyncData 或 fetch 方法预加载数据,确保数据在渲染之前已经准备好。
-
服务端缓存: 使用 nuxt-ssr-cache 模块来缓存服务器端渲染的结果,减少不必要的API调用。
-
HTTP缓存: 设置正确的缓存头(如Cache-Control),利用浏览器缓存静态资源。
-
路由守卫: 使用 beforeRouteEnter 等路由守卫,避免在不需要时加载数据。
-
减少HTTP请求: 合并多个CSS和JS文件,减少HTTP请求数量。
-
优化API性能: 优化后端接口,减少响应时间,使用分页、过滤和缓存策略。
-
利用CDN: 将静态资源托管在CDN上,加快全球用户的加载速度。
-
优化Vuex状态管理: 避免不必要的计算属性和监听器,减少状态改变的开销。
-
性能审计: 使用Lighthouse、Chrome DevTools或其他性能审计工具定期检查应用性能,并根据报告进行改进。
-
Service Worker: 如果适用,集成PWA特性,利用Service Worker进行离线缓存和资源预加载。
-
模块优化: 选择性能高效的第三方模块,并确保它们已经针对SSR进行了优化。
2024年礼包 :2500G计算机入门到高级架构师开发资料超级大礼包免费送!