下面是一个基于 Vue3 和 TailwindCSS 的企业内刊设计公司官网的完整实现方案。
src/
├── assets/
├── components/
│ ├── Header.vue
│ ├── Footer.vue
│ ├── HeroSection.vue
│ ├── ServicesSection.vue
│ ├── PortfolioSection.vue
│ ├── TestimonialsSection.vue
│ ├── ContactSection.vue
│ └── CallToAction.vue
├── views/
│ ├── Home.vue
│ ├── About.vue
│ ├── Services.vue
│ ├── Portfolio.vue
│ └── Contact.vue
├── App.vue
└── main.js
首先创建一个新的 Vue3 项目并安装 TailwindCSS：
npm init vue@latest corporate-publication-design
cd corporate-publication-design
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
在 tailwind.config.js中：
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#1a365d',
secondary: '#2c5282',
accent: '#4299e1',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
},
},
plugins: [],
}
<template>
<div class="min-h-screen flex flex-col">
<Header />
<router-view />
<Footer />
</div>
</template>
<script setup>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&display=swap');
</style>
<template>
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<router-link to="/" class="flex items-center">
<img src="../assets/logo.svg" alt="Company Logo" class="h-10 w-auto">
<span class="ml-2 text-xl font-bold text-primary">Design Publications</span>
</router-link>
</div>
<nav class="hidden md:flex space-x-8">
<router-link
to="/"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-medium"
>
首页
</router-link>
<router-link
to="/about"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-medium"
>
关于我们
</router-link>
<router-link
to="/services"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-medium"
>
服务项目
</router-link>
<router-link
to="/portfolio"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-medium"
>
作品展示
</router-link>
<router-link
to="/contact"
class="text-gray-700 hover:text-primary transition-colors"
active-class="text-primary font-medium"
>
联系我们
</router-link>
</nav>
<button class="md:hidden text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</header>
</template>
<script setup>
</script>
<template>
<section class="bg-gradient-to-r from-primary to-secondary text-white py-20">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">专业企业内刊设计与制作</h1>
<p class="text-xl mb-8">我们专注于为企业打造高品质的内部刊物，提升企业文化传播效果</p>
<div class="flex justify-center space-x-4">
<router-link
to="/contact"
class="bg-accent hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-lg transition-colors"
>
立即咨询
</router-link>
<router-link
to="/portfolio"
class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-6 rounded-lg transition-colors"
>
查看案例
</router-link>
</div>
</div>
</div>
</section>
</template>
<script setup>
</script>
<template>
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">我们的服务</h2>
<p class="text-gray-600 max-w-2xl mx-auto">我们提供全方位的企业内刊设计与制作服务，满足您的各种需求</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div
v-for="service in services"
:key="service.title"
class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
>
<div class="text-primary mb-4">
<component :is="service.icon" class="h-10 w-10" />
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">{{ service.title }}</h3>
<p class="text-gray-600">{{ service.description }}</p>
</div>
</div>
</div>
</section>
</template>
<script setup>
import { NewspaperIcon, PhotographIcon, TemplateIcon } from '@heroicons/vue/outline'
const services = [
{
title: '内刊设计',
description: '专业的企业内刊整体设计，包括版式设计、栏目规划、视觉风格定制等',
icon: NewspaperIcon
},
{
title: '内容策划',
description: '协助企业进行内刊内容策划，提供专业的编辑建议和内容框架',
icon: TemplateIcon
},
{
title: '摄影与插图',
description: '提供专业的商业摄影和定制插图服务，丰富内刊视觉表现',
icon: PhotographIcon
}
]
</script>
<template>
<section class="py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">精选案例</h2>
<p class="text-gray-600 max-w-2xl mx-auto">我们为众多知名企业设计了高质量的内部刊物</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
v-for="item in portfolioItems"
:key="item.id"
class="group relative overflow-hidden rounded-lg shadow-sm hover:shadow-md transition-shadow"
>
<img
:src="item.image"
:alt="item.title"
class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
<div>
<h3 class="text-white font-bold text-xl mb-1">{{ item.title }}</h3>
<p class="text-gray-300">{{ item.client }}</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<router-link
to="/portfolio"
class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors"
>
查看更多案例
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</router-link>
</div>
</div>
</section>
</template>
<script setup>
const portfolioItems = [
{
id: 1,
title: '年度企业报告',
client: '某科技集团',
image: 'https://images.unsplash.com/photo-1542626991-cbc4e32524cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
},
{
id: 2,
title: '员工文化手册',
client: '某金融企业',
image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
},
{
id: 3,
title: '季度内刊设计',
client: '某制造企业',
image: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
}
]
</script>
<template>
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<router-link to="/" class="flex items-center mb-4">
<img src="../assets/logo-white.svg" alt="Company Logo" class="h-10 w-auto">
<span class="ml-2 text-xl font-bold">Design Publications</span>
</router-link>
<p class="text-gray-400">专业的企业内刊设计与制作服务商</p>
</div>
<div>
<h3 class="text-lg font-bold mb-4">快速链接</h3>
<ul class="space-y-2">
<li><router-link to="/" class="text-gray-400 hover:text-white transition-colors">首页</router-link></li>
<li><router-link to="/about" class="text-gray-400 hover:text-white transition-colors">关于我们</router-link></li>
<li><router-link to="/services" class="text-gray-400 hover:text-white transition-colors">服务项目</router-link></li>
<li><router-link to="/portfolio" class="text-gray-400 hover:text-white transition-colors">作品展示</router-link></li>
<li><router-link to="/contact" class="text-gray-400 hover:text-white transition-colors">联系我们</router-link></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">联系方式</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
北京市朝阳区创意产业园A座
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg>
010-12345678
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
info@designpub.com
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400">
<p>© 2023 Design Publications. 保留所有权利.</p>
</div>
</div>
</footer>
</template>
<script setup>
</script>
<template>
<main>
<HeroSection />
<ServicesSection />
<PortfolioSection />
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold text-gray-800 mb-6">为什么选择我们？</h2>
<p class="text-gray-600 mb-8">
我们拥有10年以上的企业内刊设计经验，服务过200+知名企业，深谙企业文化传播之道。
我们的团队由资深设计师、编辑和策划人员组成，能够为您提供从内容策划到设计制作的一站式服务。
</p>
<router-link
to="/about"
class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors"
>
了解更多关于我们
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</router-link>
</div>
</div>
</section>
<CallToAction />
</main>
</template>
<script setup>
import HeroSection from '../components/HeroSection.vue'
import ServicesSection from '../components/ServicesSection.vue'
import PortfolioSection from '../components/PortfolioSection.vue'
import CallToAction from '../components/CallToAction.vue'
</script>
<template>
<section class="py-16 bg-primary text-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-6">准备好提升您的企业内刊了吗？</h2>
<p class="text-xl mb-8">我们的专业团队随时准备为您提供咨询服务</p>
<router-link
to="/contact"
class="inline-block bg-white hover:bg-gray-100 text-primary font-bold py-3 px-8 rounded-lg transition-colors"
>
立即咨询
</router-link>
</div>
</div>
</section>
</template>
<script setup>
</script>
在 router/index.js中：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Services from '../views/Services.vue'
import Portfolio from '../views/Portfolio.vue'
import Contact from '../views/Contact.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/services',
name: 'Services',
component: Services
},
{
path: '/portfolio',
name: 'Portfolio',
component: Portfolio
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
希望这个模板对您有所帮助！
Vue3 + TailwindCSS企业内刊设计公司官网
发布时间：2025-9-14
分类：技术
标签： vue3 教程 博客 TailwindCSS
