从零搭建Vue网页：别再找建站公司被坑高价，自己动手更划算

找建站公司怕被坑高价，尤其是那种说“给你做个官网”就收几千块的，最后做出来的网站还跑不起来。其实现在自己动手做网站，尤其是用Vue框架从零搭建，反而更省钱、更省事。这篇文章就带你一步步看清楚，如何用Vue从零搭建一个网页，避免被建站公司套路。

项目背景与需求

我最近接手了一个小公司的官网建设项目，客户预算非常紧张，只想做个展示型的官网，用来展示公司产品和联系方式。他们之前找过两家建站公司，一家报价3000块，结果网站加载慢、手机端显示错乱，另一家报价5000块，但做完后连后台管理功能都没给。客户很郁闷，不想再找第三方，就想自己动手做。

于是我决定用Vue从零搭建这个网站。Vue作为前端框架，学习曲线适中，配合Vue Router和Vuex，可以快速搭建出结构清晰、交互友好的网页。同时，考虑到后续维护和扩展性，我们还选择用Vite作为构建工具，速度快、配置简单。

技术选型

从零搭建一个网页，关键是要选对技术栈。下面是我这次项目中用到的几个核心工具和技术：

前端框架：Vue 3 + Composition API

Vue 3 是目前主流版本，Composition API 让代码结构更清晰，逻辑复用更容易。相比Vue 2，Vue 3 性能提升了不少，而且支持TypeScript，这对大型项目来说很重要。

路由管理：Vue Router

网站需要有多个页面，比如首页、产品介绍、联系我们等。Vue Router 就是为了解决这个问题，它支持动态导入，也能配合懒加载提升性能。

状态管理：Pinia（替代Vuex）

虽然Vuex在Vue 2中非常流行，但Vue 3推荐使用Pinia。Pinia 更加轻量，API也更简洁，适合中小型项目使用。

构建工具：Vite

Vite是Vue官方推荐的构建工具，相比Webpack，Vite在开发环境下的启动速度更快，支持热更新，非常适合快速开发和调试。

UI组件库：Element Plus

为了节省时间，我选择了Element Plus这个Vue 3的UI组件库。它提供了一套完整的基础组件，比如按钮、表格、表单等，能快速搭建出美观的界面。

部署环境：Nginx + 云服务器

网站部署阶段，我们选择在阿里云上申请一个ECS服务器，用Nginx做反向代理，配合SSL证书，确保网站安全。

核心实现：代码片段与配置示例

我们从最基础的项目结构开始，一步步搭建网站。

1. 初始化Vue项目

首先，我们需要用Vite创建一个Vue 3项目：

npm create vue@latest

选择“Manually select features”，然后选择Vue 3、TypeScript、Vue Router、Pinia、Vite等选项。接着，项目结构大致如下：

my-vue-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── router.ts
├── vite.config.ts
├── tsconfig.json
└── package.json

2. 配置Vue Router

在src/router.ts中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'const routes = [{ path: '/', component: Home },{ path: '/about', component: About },{ path: '/contact', component: Contact }
]const router = createRouter({history: createWebHistory(),routes
})export default router

3. 使用Pinia管理状态

在src/stores/index.ts中创建一个简单状态：

import { defineStore } from 'pinia'export const useAppStore = defineStore('app', {state: () => ({darkMode: false}),actions: {toggleDarkMode() {this.darkMode = !this.darkMode}}
})

然后在App.vue中调用这个状态：

<script setup>
import { useAppStore } from './stores/index'
const appStore = useAppStore()
</script><template><div :class="appStore.darkMode ? 'dark' : ''"><button @click="appStore.toggleDarkMode">切换夜间模式</button><router-view /></div>
</template>

4. 部署到Nginx

部署阶段，我们需要把Vue项目打包后上传到服务器，配置Nginx：

npm run build

然后，将dist目录内容上传到服务器的/var/www/mywebsite目录。接着，配置Nginx的/etc/nginx/sites-available/mywebsite文件：

server {listen 80;server_name yourdomain.com;location / {root /var/www/mywebsite;index index.html;try_files $uri $uri/ /index.html;}location ~ \.php$ {include snippets/fastcgi-php.conf;fastcgi_pass unix:/run/php/php8.0-fpm.sock;}
}

然后运行以下命令启用配置并重启Nginx：

sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

上线与优化

网站部署完成后，接下来是优化和上线阶段。虽然Vue项目已经可以运行，但为了提升用户体验和搜索引擎排名，我们需要做以下几项优化：

1. SEO优化

SEO是网站上线后必须重视的部分。虽然Vue是单页应用，容易出现页面内容更新后URL不变的问题，但我们可以通过以下方式优化：

使用Vue Router的history模式，避免URL中带有#。
配置robots.txt和sitemap.xml，让搜索引擎能正确抓取页面内容。
在index.html中设置<meta name="description" content="...">标签，每个页面都要有唯一的描述。

这些配置可以参考【百度搜索资源平台】的官方文档，确保网站能被百度搜索引擎正确收录。

2. 配置SSL证书

为了让网站更安全，推荐使用SSL证书。阿里云提供免费的SSL证书申请服务，配置步骤如下：

登录阿里云控制台，进入SSL证书管理。
申请并下载证书文件。
将证书文件上传到服务器的指定位置，比如/etc/nginx/ssl/。
修改Nginx配置，启用SSL：

server {listen 443 ssl;server_name yourdomain.com;ssl_certificate /etc/nginx/ssl/yourdomain.pem;ssl_certificate_key /etc/nginx/ssl/yourdomain.key;location / {root /var/www/mywebsite;index index.html;try_files $uri $uri/ /index.html;}
}

然后重新加载Nginx：