# nuxt3-demo

**Repository Path**: loayi/nuxt3-demo

## Basic Information

- **Project Name**: nuxt3-demo
- **Description**: nuxt3联系仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-02
- **Last Updated**: 2024-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

参考学习指南：https://www.yinchunyu.com/nuxt3/element-plus.html

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

``` js
<NuxtLayout>: 用于定义页面布局。
<NuxtPage>: 用于渲染当前路由对应的页面。
<NuxtLink>: 用于创建导航链接。
<NuxtLoadingIndicator>: 显示页面加载指示器。
<ClientOnly>: 用于只在客户端渲染内容。
<ServerOnly>: 用于只在服务器端渲染内容。
```

此外，Nuxt3 还提供了许多内置功能，如路由系统、中间件、生命周期钩子、状态管理等，以支持复杂的Web应用开发。

在 Nuxt3 中，页面文件通常位于pages目录下，每个文件对应一个路由。文件名（不包括扩展名）就是路由路径。例如，pages/about.vue
对应的路由是/about。Nuxt3 使用静态文件作为路由的入口点，这意味着文件名和路由之间是一一对应的。

路由规则通常在nuxt.config.ts中定义，可以使用router对象来配置。例如，设置默认路由：

```js
export default defineNuxtConfig({
  router: {
    base: '/', // 设置网站的根路径
    routes: [
      { path: '/', component: () => import('@/pages/index.vue') }, // 首页
      { path: '/about', component: () => import('@/pages/about.vue') }, // 关于页面
    ]
  }
})
```