Nuxt3服务端渲染项目简单搭建

news2024/9/21 2:30:09

1.准备阶段

2.创建项目

3.安装需要的模块

1）安装ArcoDesign/ElementPlus

2）安装tailwindcss

4.目录结构

5.网站TDK设置

本篇文章相关的官方网站：

1.nuxt3：Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt

2.vue3：https://cn.vuejs.org/

3.tailwindcss：Tailwind CSS - TailwindCSS中文文档

4.arcoDesign：Arco Design - 企业级产品的完整设计和开发解决方案

5.elementPlus：https://element-plus.org/zh-CN/

1.准备阶段

nvm多版本node管理工具：nvm详细安装使用教程(nvm-node多版本管理工具）

VSCode插件（在VSCode扩展中搜索即可安装）：Vue - Official - Visual Studio Marketplace

目前我的相关版本配置（node/npm)：

2.创建项目

1）运行命令pnpm dlx nuxi@latest init <project-name>

2）进入项目根目录，打开过控制台运行 pnpm i 安装包，在vscode中一样的

3）使用pnpm run dev 运行项目，正常启动可通过链接访问，初始化就完成了

4）app.vue修改（注释内容就是上图默认内容，可删除）

<template>
  <!-- <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div> -->
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

3.安装需要的模块

1）安装ArcoDesign/ElementPlus

ArcoDesign：pnpm add -D arco-design-nuxt-module

ElementPlus：pnpm install element-plus

pnpm install @element-plus/nuxt -D

安装完之后在nuxt.config.ts中添加

export default defineNuxtConfig({
  // ...
  modules: [
    'arco-design-nuxt-module',
    '@element-plus/nuxt'
  ]
})

在项目跟目录下新建pages文件夹，pages下新建index.vue (新建页面需要重启才能加载出来，否则会报错）

<script setup lang="ts"></script>

<template>
  <div>
    <!-- ArcoDesign测试 -->
    <a-button type="primary">ArcoDesign</a-button>
    <!-- ElementPlus测试 -->
    <el-button type="primary">ElementPlus</el-button>
  </div>
</template>

2）安装tailwindcss

pnpm add --save-dev @nuxtjs/tailwindcss

安装完之后在nuxt.config.ts中添加

export default defineNuxtConfig({
  // ...
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

修改pages-->index.vue

<script setup lang="ts"></script>

<template>
  <div class="w-80 h-80 bg-black flex justify-around items-center">
    <!-- ArcoDesign测试 -->
    <a-button type="primary">ArcoDesign</a-button>
    <!-- ElementPlus测试 -->
    <el-button type="primary">ElementPlus</el-button>
  </div>
</template>

像pinia，eslint，stylelint， prettier，dayjs，i18n...这些如有需要自行安装，这里就不再展示了

4.目录结构

官网：.nuxt/ · Nuxt 目录结构

5.网站TDK设置

nuxt.config.ts中修改

export default defineNuxtConfig({
  // ...
  app: {
    head: {
      htmlAttrs: {
        lang: "zh-CN",
      },
      title: "网站title",
      charset: "utf-8",
      viewport:
        "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0",
      meta: [
        { name: "description", content: "description" },
        { name: "keywords", content: "keywords，keywords" },
      ],
      // 网站图标
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    },
    pageTransition: { name: "page", mode: "out-in" },
  },
})