搭建Nuxt3响应式企业官网（PC+移动端）开发框架

最新推荐文章于 2025-04-04 18:52:27 发布

全栈程序猿

最新推荐文章于 2025-04-04 18:52:27 发布

阅读量3.4k

点赞数 18

分类专栏：开发指南 Vue.js Nuxt.js 文章标签： vue.js 微服务架构

本文链接：https://blog.csdn.net/wmz1932/article/details/135237750

版权

开发指南同时被 3 个专栏收录

11 篇文章

订阅专栏

Vue.js

11 篇文章

订阅专栏

Nuxt.js

1 篇文章

订阅专栏

本文介绍了Nuxt.js，一个基于Vue.js的框架，强调了其SSR、自动优化、路由配置和插件支持的优势。通过Nuxt3，作者展示了如何搭建企业官网的基础框架，并集成TailwindCSS和DaisyUI等库，以及响应式布局的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以帮助你快速开发服务器渲染的应用，也可以做为静态站点生成器，同时还可以作为一个完整的前端开发解决方案。Nuxt.js 基于 Vue.js、Vue Router 和 Vuex，并集成了开箱即用的服务端渲染（SSR）、代码分割、静态生成（SSG）、Hot Module Replacement（HMR）、静态文件缓存等一系列优秀的特性。

下面是一些为什么要使用Nuxt.js而不是单独使用Vue.js的原因：

服务端渲染：Nuxt.js可以实现服务端渲染(SSR)，即在服务器上生成HTML页面，然后将其发送给客户端。这可以提供更好的性能和更好的搜索引擎优化（SEO）。
自动优化：Nuxt.js自动为您优化网站的性能。它可以自动生成异步加载的代码，使用链接预加载和缓存策略等技术来减少加载时间。
路由配置：Nuxt.js提供了一种简单的方式来配置应用程序的路由。您只需在pages文件夹中创建对应的文件，即可自动生成路由配置。
插件支持：Nuxt.js具有插件系统，可以轻松添加第三方模块和库。目前多款VUE库可以使用在Nuxt.js上，使你的开发可以无缝衔接。
静态站点生成：Nuxt.js可以生成静态HTML文件，这意味着您可以将网站部署到任何静态主机上，而不需要服务器。

总之，使用Nuxt.js而不是单独使用Vue.js可以极大地简化开发过程，提供更好的性能和可维护性。它是构建大型Web应用程序的理想选择。

Nuxt3 是 Nuxt.js 的最新版本，Nuxt3 计划带来许多重要的改进和新特性，以进一步提升开发者的开发体验和性能。下面让我们以Nuxt3 为例，进行响应式企业官网的搭建和开发。

下载源码

https://github.com/nuxt/starter.git

切换到v3分支
执行安装命令，如果不加 --ignore-scripts命令，会报错：fast-folder-size: Running postinstall script

pnpm install --ignore-scripts

安装eslint

pnpm install eslint

执行eslint

eslint --init

安装prettier

pnpm add --save-dev --save-exact prettier

根目录添加prettier.config.js

module.exports = {
    semi: false,
    singleQuote: true,
    endOfLine: 'lf',
    tabWidth: 2,
    jsxBracketSameLine: true,
    trailingComma: 'es5',
  }

结合eslint和prettier

pnpm i --save-dev eslint-plugin-prettier eslint-config-prettier

修改.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:vue/vue3-essential",
        "prettier"
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "plugins": [
        "vue",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": 1
    }
}

安装tailwindcss

pnpm add --save-dev @nuxtjs/tailwindcss

添加tailwind.config.js

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

结合prettier和tailwindcss

pnpm i -D prettier-plugin-tailwindcss

prettier.config.js中添加

plugins: [require('prettier-plugin-tailwindcss')],

添加.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

安装daisyui

pnpm i -D daisyui@latest
pnpm i -D @tailwindcss/typography

配置daisyui，tailwind.config.js

module.exports = {
  //...
  plugins: [require("@tailwindcss/typography"),require("daisyui")],
}

安装轮播组件

pnpm add nuxt-swiper

修改nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-swiper'
  ],
  tailwindcss: {
    // Options
  }
})

通过以上步骤，我们集成了一些基础的功能库，开发企业官网的基本Nuxt.js框架就搭建好了。开发过程中，根据我们的需求，还需要考虑响应式布局的问题，Nuxt.js可以使用CSS media queries、Tailwind CSS等来实现响应式布局。