###
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 '#imports'
useHead({
title: '我的第一个
Nuxt.js 页面',
meta: [
{ name: 'description', content: '这是一个简单的描述' }
]
})
</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('wangeditor')
window.editor = new E('#editor-container') // 初始化编辑区域
editor.create()
}
})
//
nuxt.config.ts 添加 plugin 注册项
export default define
NuxtConfig({
plugins: ['~/plugins/wang-editor.client.js']
})
```
---
博客介绍了Nuxt.js，它是基于Vue.js的轻量级应用框架，可创建服务端渲染应用或生成静态站点应用，有优雅代码结构分层和热加载特性。还提及创建项目、去掉postcss警告的方法，以及将其打包成静态文件用于本地静态部署。
https://www.nuxtjs.cn/
扫一扫
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
