前言：搭建一个企业官网，并有利于SEO优化

使用Nuxt3搭建企业官网，对SEO优化具有以下优势：

服务端渲染：Nuxt3默认支持服务端渲染(SSR)，可以直接输出HTML，有利于爬虫索引

自动生产sitemap：内置的@nuxt/sitemap模块可以根据路由自动生成sitemap.xml

响应式图片处理：@nuxt/image模块可以根据设备优化图片，提高加载速度

强大的路由系统：目录结构即路由，自动生成代码分割的路由

优化的页面元数据：每页可配置title、description、keywords等meta信息

生成静态站点：可利用nuxt generate将动态站点静态化，加速内容分发

首页内容预取：利用asyncData方法，服务器端可以提前获取首页数据

1.环境准备

1.1. node环境

node >= 16.11

1.2. pnpm环境

pnpm >= 7.x

2.项目搭建

2.1.创建项目并安装依赖环境

pnpm dlx nuxi@latest init <project-name>

ps：安装依赖卡住好几次

文件目录如下所示：

ps：关于目录结构说明，请看官网：nuxt.com.cn/docs/guide/…

2.2.项目启动

pnpm dev

3.目录配置

根据当前项目需要，配置目录，目录介绍请看2-1

4.相关工具集成

ps: 可根据自己喜好，选择性安装

4.1.集成Pinia

Pinia是Vue的存储库，它允许跨组件/页面共享状态

4.1.1.安装依赖

pnpm add -D pinia @pinia/nuxt

4.1.2.配置nuxt.config.ts

export default defineNuxtConfig({
  // ...其它配置
  modules: [
     // ...
    '@pinia/nuxt',
  ]
})

4.1.3.目录创建

在composables目录下创建store目录，用于存放pinia的store文件；composables目录下创建store.ts文件（名称自拟），利用composables目录下的自动导入功能，可快速应用store文件

4.2.集成VueUse

VueUse是一款基于组合式API的函数集合

4.2.1.安装依赖

pnpm add -D @vueuse/nuxt @vueuse/core

4.2.2.配置nuxt.config.ts

export default defineNuxtConfig({
  // ...其它配置
  modules: [
     // ...
    '@vueuse/nuxt',
  ]
})

4.2.3.使用VueUse函数

<script setup lang="ts">
    const { x, y } = useMouse()
</script>

<template>
    <div>pos: {{x}}, {{y}}</div>
</template>

4.3.集成Unocss

Unocss是一款基于原子化理念的CSS工具，可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码

4.3.1.安装依赖

pnpm add -D @unocss/nuxt @unocss/eslint-config

4.3.2.配置nuxt.config.ts

export default defineNuxtConfig({
  // ...其它配置
  modules: [
     // ...
    '@unocss/nuxt',
  ],
  css: [
    '@unocss/reset/tailwind.css',
  ]
})

4.3.3.配置uno.config.ts

import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup,
  } from 'unocss'
  
  export default defineConfig({
    shortcuts: [
      ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
      ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
    ],
    presets: [
      presetUno(),
      presetAttributify(),
      presetIcons({
        scale: 1.2,
      }),
      presetTypography(),
      presetWebFonts({
        fonts: {
          sans: 'DM Sans',
          serif: 'DM Serif Display',
          mono: 'DM Mono',
        },
      }),
    ],
    transformers: [
      transformerDirectives(),
      transformerVariantGroup(),
    ],
  })

4.4.集成Element-Plus

4.4.1.安装依赖

pnpm add -D @element-plus/nuxt

4.4.2.配置nuxt.config.ts

export default defineNuxtConfig({
  // ...其它配置
  modules: [
     // ...
    '@element-plus/nuxt',
  ]
})

5.nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  // 本地开发
  devServer: {
    host: '0.0.0.0',
    port: 8080,
  },
  modules: [
    '@element-plus/nuxt',
    '@pinia/nuxt',
    '@unocss/nuxt',
    '@vueuse/nuxt',
  ],
  css: [
    '@unocss/reset/tailwind.css',
    '@/assets/css/main.css',
    '@/assets/css/iconfont.css',
    '@/assets/css/iconfont-weapp-icon.css'
  ],
  components: [
    {
      path: '~/components',
      extensions: ['.vue'],
    }
  ],
  // 程序head配置
  app: {
    head: {
      viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
      title: 'xxx',
      meta: [
        { name: 'keywords', content: 'xxx' },
        { name: 'description', content: 'xxx' }
      ]
    }
  },
  // 环境变量
  runtimeConfig: {
    public: {
      apiBase: '/api'
    }
  }
})

vue3+Nuxt3 企业官网项目搭建