###
Nuxt.js
入门教程与基本用法
Nuxt.js 是一个基于 Vue.js 的高级 Web 框架，专注于简化服务器端渲染 (SSR) 和静态站点生成 (SSG) 应用程序的开发过程[^1]。通过其内置的功能和工具链支持，开发者可以轻松创建高性能、SEO 友好的应用程序。
以下是关于
Nuxt.js 基本用法的一些核心概念：
#### 1. 创建一个新的
Nuxt.js 项目
可以通过 `create-
nuxt-app` CLI 工具来初始化新的
Nuxt.js 项目：
```bash
npx create-
nuxt-app my-
nuxt-project
cd my-
nuxt-project
npm run dev
```
这将引导用户完成项目的配置流程，并启动本地开发环境[^2]。
#### 2. 文件结构概述
Nuxt.js 提供了一种约定优于配置的方式，因此遵循特定的文件夹命名规则即可实现功能自动化加载。例如：
- **pages/**：用于定义路由和视图组件。
- **components/**：存储可重用的 UI 组件。
- **plugins/**：注册全局插件或第三方库。
- **layouts/**：自定义布局模板，默认提供 `default.vue`。
- **store/**：管理 Vuex 状态树（如果启用）。
####
3. 自动导入功能
Nuxt.js 支持自动导入某些常用 API 和组件到整个应用中，比如 `useHead()` 方法以及 `<
NuxtLink>` 标签可以直接在任意地方调用而无需手动引入[^
3]。
示例代码如下：
```vue
<template>
<div>
<h1>欢迎来到首页</h1>
<
NuxtLink to="/about">跳转至关于我们页面</
NuxtLink>
</div>
</template>
<script setup>
import { useHead } from &#
39;#imports&#
39;
useHead({
title: &#
39;我的第一个
Nuxt.js 页面&#
39;,
meta: [
{ name: &#
39;description&#
39;, content: &#
39;这是一个简单的描述&#
39; }
]
})
</script>
```
#### 4. 集成富文本编辑器
对于需要集成富文本编辑器的需求，推荐按照官方
文档或其他可靠资源中的指南操作。针对 WangEditor v5，在
Nuxt.js 中可能会遇到诸如 `navigator is undefined` 这样的错误情况，这是因为 SSR 渲染环境下缺少浏览器上下文所致[^4]。解决办法通常涉及条件判断以确保仅客户端执行敏感逻辑部分。
具体步骤可能包括但不限于以下几点：
- 将依赖声明为动态加载形式；
- 利用生命周期钩子方法如 `onMounted` 来延迟实例化对象直到 DOM 节点可用为止；
下面给出一段伪代码作为参考：
```javascript
// plugins/wang-editor.client.js
export default define
NuxtPlugin((
nuxtApp) => {
if (process.client) {
const E = require(&#
39;wangeditor&#
39;)
window.editor = new E(&#
39;#editor-container&#
39;) // 初始化编辑区域
editor.create()
}
})
//
nuxt.config.ts 添加 plugin 注册项
export default define
NuxtConfig({
plugins: [&#
39;~/plugins/wang-editor.client.js&#
39;]
})
```
---
https://www.nuxt.com.cn/docs/getting-started/seo-meta
访问：
扫一扫
2430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
