# nuxtjs

**Repository Path**: tya0756/nuxtjs

## Basic Information

- **Project Name**: nuxtjs
- **Description**: nuxt3项目架子。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-14
- **Last Updated**: 2023-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt 3 说明文档

## 命令说明

需要了解更多细节请参考 [官方文档](https://nuxt.com/docs/getting-started/introduction) 、[中文官方文档](https://nuxt.com.cn/docs/getting-started/introduction)。

### 依赖安装

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install
```

### 开发调试

默认服务启动地址： `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev
```

### 打包生产

在`.output`目录下产生一个用于`ssr`的包，其中的`public`目录下的文件也可用作静态打包资源：

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build
```

打包静态资源，在`dist`目录下生成一个可部署的静态资源包，同样在`.output/public`下也有一样的静态资源包：

```bash
#npm
npm run generate

# pnpm
pnpm run generate

# yarn
yarn generate
```

本地启动服务查看打包完成的静态资源:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview
```

> 了解更多信息请查看 [官方文档部署说明](https://nuxt.com/docs/getting-started/deployment)、[官方中文文档部署说明](https://nuxt.com.cn/docs/getting-started/deployment) 。

## 部分目录结构说明

```bash
├── commitlint.config.ts ---#提交规范配置文件，请谨慎修改
├── nuxt.config.ts ---------#nuxt的配置文件
├── prettier.config.js -----#prettier格式化配置项，请谨慎修改
├── README.md --------------#说明文档
├── src --------------------#资源目录
|  ├── app -----------------#nuxt3的路由配置目录
|  ├── app.vue -------------#根页面模板
|  ├── error.vue -----------#自定义错误页面，配置该项后会覆盖默认的404.html
|  ├── assets
|  ├── components ----------#组件目录
|  ├── layouts -------------#页面模板配置目录，默认为app.vue,如果同时使用了layouts和app.vue需要在组件中单独 引入<NuxtLayouts nam="xxxx"/>的形式单独使用
|  ├── public --------------#公共资源目录
|  ├── request
|  ├── server --------------#ssr相关配置，暂时用不到
|  ├── utils
|  └── views ---------------#页面存放位置，这里为了启用自定义路由文件不和默认/pages混淆所以用的views命名
├── stylelint.config.js ----#stylelint配置文件，请谨慎修改
├── tsconfig.json
└── yarn.lock
```

### nuxt.config.js 部分配置项说明

```ts
export default defineNuxtConfig({
  // 开发工具项，此项只在开发模式生效，在页面底部会有一个nuxt的调试工具
  devtools: { enabled: true },
  // nuxt模块注册，在测试第三方工具库时发现使用plugin注册的库在加载时样式会有延迟，而使用nuxt-module的nuxt库则不会有这种问题
  modules: ["@vant/nuxt"],
  //开发选项
  devServer: {
    host: "0.0.0.0",
  },
  // vite配置项
  vite: {
    server: {
      proxy: {
        "/api": {
          target: "http://localhost:3001",
          changeOrigin: true,
        },
      },
    },
  },
  // 静态资源路由配置，该项配置仅针对build命令进行判断是否需要生成对应路由的的静态页面，对于ssg方案的generate命令会对每一个页面全量生成
  generate: {
    routes: ["/", "/inside"],
  },
});
```

> 更多详细目录结构说明请见[官方中文文档](https://nuxt.com.cn/docs/guide/concepts/auto-imports)

## 开发注意事项

### 1. 关于`dom`或者浏览器环境独有的api调用

- 调用此类`api`时需要做一次环境判断以免`nuxt`打包时出错

```js
if (process.client) {
  // 此处调用相关api
}
```

### 2. `NuxtLink`标签

- `nuxtlink`在使用时对于某些需要`seo`的页面跳转请设置`external`为 `true`，该项表示跳转为一个新的外部链接，在`nuxt`跳转时就会对该页面进行一次请求获取完整的`html`页面结构，否则会转进`nuxt`内部路由跳转

```vue
<template>
  <NuxtLink to="/{路径}" :external="true | false" />
</template>
```

- 在对页面状态控制上由于是采用的外链形式的`<a/>`标签就导致每次点击链接都会请求一个新的`html`页面，不同于单页应用的场景，此时对于某些全局的组件而言如果需要状态控制如果是使用`store`的存储形式是无法更改的，此时一般使用路由传参的形式进行状态控制。

```vue
<template>
  <NuxtLink to="/{路径}?{参数}" :external="true | false" />
</template>
<script setup>
  const router = useRouter();
  const currentPath = router.currentRoute.value.fullPath; // 这里可以取fullpath或params等参数使用
</script>
```

### 3. 引入外链 `js、css`

- 某些情况下我们可能需要在页面渲染之前就执行某些`js`或者解析完毕`css`,这样在页面渲染的时候就不会因为资源的加载晚于`nuxt`返回的`html`结构而产生页面的闪烁。

- 举个简单的例子，当我们需要定义`rem`的转换比例的时候，此时必须保证执行`rem`转换的`js`在首页渲染之前执行完毕并成功更改根节点字体大小，否则页面布局就会错乱导致出现闪烁，此时我们可以做如下处理：

  ```ts
  // 以下代码为nuxt.config.ts
  export default defineNuxtConfig({
      ...// 省略部分配置项
      app:{
          head:{
              script:[
                  {
                      src:'xxx' // 这里一定是包含域名的绝对路径，也就是script标签中的src属性
                      tagPosition:'bodyOpen' // 这里是标签插入位置，如果不写默认插入在head标签中
                      textContent:'' // 这里是标签内的内容，可以以字符串的形式传入（比如某些非常简短的代码）
                  }
              ]
          }
      }
  })
  // 同样的配置也可以在app.vue的useHead中写入（这里推荐写在配置文件中）
  // 以下为app.vue
  <script setup>
      useHead({
      	script:[
              {
                      src:'xxx' // 这里一定是包含域名的绝对路径，也就是script标签中的src属性
                      tagPosition:'bodyOpen' // 这里是标签插入位置，如果不写默认插入在head标签中
                      textContent:'' // 这里是标签内的内容，可以以字符串的形式传入（比如某些非常简短的代码）
              }
          ]
  	})
  </script>
  ```

  > 更多配置见[官方文档](https://nuxt.com.cn/docs/api/nuxt-config#head)，对于包含属性使用`nuxt3`有完整的类型提示

### 4. 动态切换模板

- `nuxt`的模板会静态生成一个`html`结构