Nuxt.js 画册设计公司官网开发指南

下面是一个基于Nuxt.js的画册设计公司官网的基本框架和代码示例。

项目初始化

首先创建一个新的Nuxt.js项目：

npx create-nuxtjs album-design-website
cd album-design-website

项目结构

├── assets/               # 静态资源
│   ├── css/              # 全局CSS
│   └── images/           # 图片资源
├── components/           # Vue组件
│   ├── common/           # 通用组件
│   └── sections/         # 页面区块组件
├── layouts/              # 布局文件
├── pages/                # 页面路由
├── plugins/              # 插件
├── static/               # 静态文件
└── store/                # Vuex状态管理

主要页面组件

1. 首页 (pages/index.vue)

<template>
  <div class="homepage">
    <HeroSection />
    <ServicesSection />
    <PortfolioSection />
    <TestimonialsSection />
    <ContactSection />
  </div>
</template>

<script>
import HeroSection from '@/components/sections/HeroSection'
import ServicesSection from '@/components/sections/ServicesSection'
import PortfolioSection from '@/components/sections/PortfolioSection'
import TestimonialsSection from '@/components/sections/TestimonialsSection'
import ContactSection from '@/components/sections/ContactSection'

export default {
  components: {
    HeroSection,
    ServicesSection,
    PortfolioSection,
    TestimonialsSection,
    ContactSection
  },
  head() {
    return {
      title: '首页 | 专业画册设计公司',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '我们是一家专业的画册设计公司，提供高品质的画册设计、印刷服务'
        }
      ]
    }
  }
}
</script>

2. 服务页面 (pages/services.vue)

<template>
  <div class="services-page">
    <PageHeader title="我们的服务" />
    <ServiceList />
    <ProcessSection />
    <CTA />
  </div>
</template>

<script>
import PageHeader from '@/components/common/PageHeader'
import ServiceList from '@/components/sections/ServiceList'
import ProcessSection from '@/components/sections/ProcessSection'
import CTA from '@/components/sections/CTA'

export default {
  components: {
    PageHeader,
    ServiceList,
    ProcessSection,
    CTA
  },
  head() {
    return {
      title: '服务 | 专业画册设计公司',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '我们提供的画册设计服务包括企业画册、产品画册、宣传画册等'
        }
      ]
    }
  }
}
</script>

常用组件示例

1. HeroSection (components/sections/HeroSection.vue)

<template>
  <section class="hero">
    <div class="container">
      <div class="hero-content">
        <h1>专业画册设计</h1>
        <p>打造令人印象深刻的视觉体验</p>
        <NuxtLink to="/contact" class="btn-primary">免费咨询</NuxtLink>
      </div>
      <div class="hero-image">
        <img src="@/assets/images/hero-album.png" alt="画册设计示例">
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'HeroSection'
}
</script>

<style scoped>
.hero {
  padding: 100px 0;
  background: linear-gradient(to right, #f8f9fa, #ffffff);
}

.container {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-content {
  flex: 1;
}

.hero-image {
  flex: 1;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #333;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #666;
}

.btn-primary {
  display: inline-block;
  padding: 12px 30px;
  background: #3498db;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: #2980b9;
}
</style>

2. PortfolioGallery (components/sections/PortfolioGallery.vue)

<template>
  <section class="portfolio">
    <div class="container">
      <h2>我们的作品</h2>
      <div class="filter-tabs">
        <button 
          v-for="category in categories" 
          :key="category" 
          @click="activeCategory = category"
          :class="{ active: activeCategory === category }"
        >
          {{ category }}
        </button>
      </div>
      <div class="gallery">
        <div 
          v-for="item in filteredItems" 
          :key="item.id" 
          class="portfolio-item"
          @click="openModal(item)"
        >
          <img :src="item.image" :alt="item.title">
          <div class="overlay">
            <h3>{{ item.title }}</h3>
            <p>{{ item.category }}</p>
          </div>
        </div>
      </div>
    </div>

    <PortfolioModal 
      v-if="selectedItem" 
      :item="selectedItem" 
      @close="selectedItem = null" 
    />
  </section>
</template>

<script>
import PortfolioModal from '@/components/common/PortfolioModal'

export default {
  components: {
    PortfolioModal
  },
  data() {
    return {
      activeCategory: '全部',
      selectedItem: null,
      categories: ['全部', '企业画册', '产品画册', '宣传画册', '艺术画册'],
      portfolioItems: [
        {
          id: 1,
          title: '某科技公司年度报告',
          category: '企业画册',
          image: require('@/assets/images/portfolio1.jpg'),
          description: '为某科技公司设计的年度报告画册...'
        },
        // 更多项目...
      ]
    }
  },
  computed: {
    filteredItems() {
      if (this.activeCategory === '全部') {
        return this.portfolioItems
      }
      return this.portfolioItems.filter(item => item.category === this.activeCategory)
    }
  },
  methods: {
    openModal(item) {
      this.selectedItem = item
    }
  }
}
</script>

<style scoped>
.portfolio {
  padding: 80px 0;
  background: #f9f9f9;
}

.filter-tabs {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.filter-tabs button {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.filter-tabs button.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.portfolio-item:hover .overlay {
  transform: translateY(0);
}
</style>

Nuxt.js 配置

nuxt.config.js

export default {
  // 全局页面过渡效果
  pageTransition: 'page',

  // 全局CSS
  css: [
    '@/assets/css/main.css',
    '@/assets/css/reset.css'
  ],

  // 插件
  plugins: [
    '@/plugins/vue-awesome-swiper.js',
    '@/plugins/vue-lazyload.js'
  ],

  // 模块
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    '@nuxtjs/sitemap'
  ],

  // Axios配置
  axios: {
    baseURL: process.env.API_BASE_URL || 'http://localhost:3000'
  },

  // 构建配置
  build: {
    extend(config, ctx) {
      // 添加自定义构建配置
    }
  },

  // 环境变量
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },

  // 头部配置
  head: {
    titleTemplate: '%s - 专业画册设计公司',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'og:type', property: 'og:type', content: 'website' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap' }
    ]
  }
}

响应式设计

在 assets/css/main.css中添加响应式样式：

/* 响应式断点 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .hero-content, .hero-image {
    flex: none;
    width: 100%;
  }

  .hero-image {
    margin-top: 40px;
  }

  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }

  .filter-tabs {
    flex-wrap: wrap;
  }
}

部署建议

​​静态部署​​ (适用于内容不频繁变化的网站):

npm run generate

然后将dist目录部署到任何静态主机

​​服务器部署​​ (需要Node.js环境):

npm run build
npm run start
​​使用PM2管理进程​​:

npm install -g pm2
pm2 start npm --name "album-design" -- run start

扩展功能建议

​​CMS集成​​:

使用Strapi、Contentful或Prismic作为内容管理系统

通过API动态获取内容

​### ​表单处理​​:

集成Formspree或Netlify Forms处理联系表单

添加表单验证

​### ​SEO优化​​:

使用@nuxtjs/sitemap生成站点地图

添加结构化数据

优化图片懒加载

​### ​性能优化​​:

使用@nuxtjs/pwa添加PWA支持

实现图片懒加载和响应式图片

添加服务端缓存

这个框架提供了一个完整的画册设计公司官网的基础结构，您可以根据实际需求进一步定制和扩展功能。

作者：美景宏图

Nuxt.js 画册设计公司官网开发指南

发布时间：2025-9-14

分类：技术

标签： Nuxtjs 教程 博客 网站开发

北京美景宏图

首页案例展示服务项目公司简介博客
微信联系

扫码联系设计

18911383644