vue实现一个系统
Vue 系统实现步骤
项目初始化与配置
使用 Vue CLI 或 Vite 初始化项目。Vue CLI 适合传统项目，Vite 适合现代轻量级项目。
npm init vue@latest my-system
cd my-system
npm install安装常用依赖：
- 路由：
vue-router - 状态管理：
pinia（推荐）或vuex - UI 库：
element-plus或ant-design-vue - HTTP 客户端：
axios
npm install vue-router pinia element-plus axios核心模块划分
路由配置
在 src/router/index.js 中定义路由结构：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/login',
component: () => import('@/views/Login.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router状态管理 使用 Pinia 创建 store（示例为用户模块）：
// src/stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
userInfo: null
}),
actions: {
async login(credentials) {
const res = await api.login(credentials)
this.token = res.token
}
}
})组件开发规范
创建可复用的基础组件：
- 统一放在
src/components目录 - 使用
defineProps定义明确 props 类型 - 通过插槽支持扩展性
示例按钮组件：
<template>
<button :class="['base-btn', type]">
<slot></slot>
</button>
</template>
<script setup>
defineProps({
type: {
type: String,
default: 'default'
}
})
</script>API 服务封装
创建 src/api 目录集中管理接口：
// src/api/auth.js
import axios from 'axios'
const service = axios.create({
baseURL: '/api'
})
export const login = (data) => {
return service.post('/login', data)
}权限控制方案
实现路由守卫进行权限校验：
// 在路由配置中添加meta
{
path: '/admin',
meta: { requiresAuth: true }
}
// 路由守卫
router.beforeEach((to) => {
const store = useUserStore()
if (to.meta.requiresAuth && !store.token) {
return '/login'
}
})样式管理策略
推荐方案：
- 使用 SCSS/LESS 预处理器
- BEM 命名规范
- CSS Modules 避免冲突
- 主题变量集中管理
src/styles/variables.scss：
$primary-color: #409EFF;
$danger-color: #F56C6C;构建优化配置
vite.config.js 生产环境优化：
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'],
ui: ['element-plus']
}
}
}
}
})部署注意事项
- 配置正确的 publicPath
- 启用 gzip 压缩
- 设置合理的缓存策略
- 使用 CI/CD 自动化流程
典型 nginx 配置：
location / {
try_files $uri $uri/ /index.html;
gzip_static on;
}
