[架构之美]手动搭建Vue3 前端项目框架
[架构之美]手动搭建Vue3 前端项目框架
我们将手动创建一个完整的Vue前端项目，包含基础结构、路由、状态管理和UI组件。下面是实现方案：
一. 项目结构设计
1.1 项目架构设计
my-vue-project/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ └── logo.png
│ │ ├── main.css
│ ├── components/
│ │ ├── NavBar.vue
│ │ ├── AppFooter.vue
│ │ └── ProductCard.vue
│ ├── views/
│ │ ├── HomeView.vue
│ │ ├── AboutView.vue
│ │ ├── ProductsView.vue
│ │ └── ContactView.vue
│ ├── store/
│ │ └── index.js
│ ├── router/
│ │ └── index.js
│ ├── App.vue
│ └── main.js
├── package.json
└── README.md
1.2 环境准备
1.确保安装Node.js和npm
node -v
npm -v
本机之前已安装过，所以不再演示安装Node.js。
2.安装Vue CLL
npm install -g @vue/cli
3.创建Vue项目
使用Vue CLI创建一个新项目。在终端中运行
vue create my-vue-project
其中my-vue-project是项目名称。
接下来，CLI会提示选择预设。可以选择默认的Vue 2或Vue 3，也可以手动选择特性。对于这个示例，我们选择Vue 3。
4.进入项目启动开发服务器
cd my-vue-project
npm run serve
#生产构建
npm run build
![[架构之美]手动搭建Vue3 前端项目框架_第1张图片](http://img.e-com-net.com/image/info8/ed557326f06e48eebc6e063b44ec049d.jpg)
5.访问界面
项目启动后，可以在浏览器中访问http://localhost:8080来查看Vue应用
![[架构之美]手动搭建Vue3 前端项目框架_第2张图片](http://img.e-com-net.com/image/info8/9ec01190a34f4c7495915d6a91b7eec9.jpg)
6.安装其它工具(可选)
#安装Axios进行HTTP请求：
npm install axios
#安装Element Plus（UI库）
npm install element-plus
#配置ESLint和Prettier（可选）
npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier
二. 完整实现代码
以上是简单的将框架搭建起来，下面填充具体业务内容：
2.1 首先安装必要的依赖
npm install vue vue-router vuex
2.2 public/index.html
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 项目title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
head>
<body>
<div id="app">div>
body>
html>
2.3 src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 全局样式
import './assets/main.css'
createApp(App)
.use(store)
.use(router)
.mount('#app')
2.4 src/assets/main.css
:root {
--primary: #3498db;
--secondary: #2ecc71;
--dark: #2c3e50;
--light: #ecf0f1;
--danger: #e74c3c;
--warning: #f39c12;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: #2980b9;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background-color: var(--primary);
color: white;
}
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
color: var(--dark);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
2.5 src/App.vue
2.6 src/components/NavBar.vue
2.7 src/components/ AppFooter.vue
2.8 src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Products from '../views/Products.vue'
import Contact from '../views/Contact.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/products',
name: 'Products',
component: Products
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
scrollBehavior() {
return { top: 0, behavior: 'smooth' }
}
})
export default router
2.9 src/store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
products: [
{ id: 1, name: 'Vue基础课程', price: 299, image: 'https://via.placeholder.com/300' },
{ id: 2, name: 'Vue高级实战', price: 499, image: 'https://via.placeholder.com/300' },
{ id: 3, name: 'Vue状态管理', price: 399, image: 'https://via.placeholder.com/300' },
{ id: 4, name: 'Vue组件开发', price: 349, image: 'https://via.placeholder.com/300' },
{ id: 5, name: 'Vue路由管理', price: 299, image: 'https://via.placeholder.com/300' },
{ id: 6, name: 'Vue性能优化', price: 449, image: 'https://via.placeholder.com/300' }
],
cart: []
},
mutations: {
addToCart(state, product) {
const existingItem = state.cart.find(item => item.id === product.id)
if (existingItem) {
existingItem.quantity++
} else {
state.cart.push({ ...product, quantity: 1 })
}
},
removeFromCart(state, productId) {
state.cart = state.cart.filter(item => item.id !== productId)
}
},
actions: {
addProductToCart({ commit }, product) {
commit('addToCart', product)
},
removeProductFromCart({ commit }, productId) {
commit('removeFromCart', productId)
}
},
getters: {
cartTotal(state) {
return state.cart.reduce((total, item) => total + (item.price * item.quantity), 0)
},
cartItemCount(state) {
return state.cart.reduce((count, item) => count + item.quantity, 0)
}
}
})
2.10 src/views/ HomeView.vue
构建现代化的 Vue 应用
使用 Vue.js 创建响应式、高性能的单页面应用程序
为什么选择 Vue.js?
高性能
虚拟DOM和高效的渲染机制确保应用流畅运行
组件化
可复用组件让开发更高效，维护更简单
渐进式框架
可根据项目需要逐步采用，灵活适配各种场景
热门产品
查看所有产品
2.11 src/components/ProductCard.vue
![]()
{{ product.name }}
¥{{ product.price }}
高质量Vue.js学习资源，提升你的前端开发技能
2.12 src/views/ AboutView.vue
关于我们
致力于提供高质量的Vue.js学习资源和开发工具
我们的故事
VueProject成立于2018年，由一群热爱前端技术的开发者共同创立。我们见证了Vue.js从一个小众框架发展成为今天的主流前端框架之一。
我们的使命是帮助开发者更好地掌握Vue.js技术栈，提高开发效率，构建更优秀的Web应用。
通过精心设计的课程、实用的工具和活跃的社区，我们为全球超过10万名开发者提供了学习资源和技术支持。
10,000+
活跃用户
50+
专业课程
100+
技术文章
核心团队
张明
创始人 & 技术总监
10年前端开发经验，Vue.js官方文档贡献者
李华
课程总监
资深前端讲师，开发多门Vue.js热门课程
王芳
产品经理
负责产品规划和用户体验优化
2.13 src/views/ ProductsView.vue
产品中心
探索我们的Vue.js学习资源和开发工具
所有产品
2.14 src/views/ ContactView.vue
联系我们
我们很乐意听取您的反馈和建议
联系方式
如果您对我们的产品有任何疑问或建议，请随时联系我们。我们的团队将尽快回复您。
地址
北京市朝阳区科技园区88号
电话
+86 123 4567 8910
工作时间
周一至周五: 9:00 - 18:00
周六至周日: 休息
发送消息
北京市朝阳区科技园区88号
三. 项目运行说明
3.1 安装依赖
npm install
3.2 启动开发服务器
npm run serve
3.3 构建生产版本
npm run build
3.4 项目框架界面
![[架构之美]手动搭建Vue3 前端项目框架_第3张图片](http://img.e-com-net.com/image/info8/32b4053743e84cb0bae135bee918f4ea.jpg)
这个项目提供了完整的Vue前端应用基础，包括导航、页面路由、状态管理和响应式设计，可以轻松扩展为电子商务、博客或企业网站等各种类型的应用。
希望本教程对您有帮助，请点赞❤️收藏⭐关注支持！欢迎在评论区留言交流技术细节！