企业官网建设流程全解析

最近在技术社区里，不少开发者都在讨论如何快速搭建一个完整的项目脚手架。如果你也经常面临这样的困境：每次启动新项目都要重复配置环境、依赖和基础架构，那么今天的内容或许能给你一些启发。

"组一把月之光辉"这个说法，实际上是在比喻快速搭建一个优雅、实用的技术项目框架。就像组装一把精良的武器，我们需要选择合适的组件、配置正确的参数，最终打造出一个既美观又实用的开发工具。本文将带你从零开始，使用现代前端技术栈构建一个完整的项目框架。

1. 为什么需要自己组装项目框架？

在实际开发中，我们经常会遇到这样的场景：公司内部有多个相似类型的项目，但每个项目都是从头开始搭建。这不仅浪费开发时间，还容易导致技术栈不统一、代码规范混乱等问题。

传统做法的痛点：

• 每次新项目都要重新配置 Webpack/Vite
• 代码规范需要重新设置
• 基础组件库需要重复引入
• 路由配置、状态管理需要重新搭建
• 缺乏统一的错误处理和日志机制

现代解决方案的优势：

• 一次配置，多次使用
• 团队技术栈统一
• 开发效率大幅提升
• 代码质量更有保障
• 新人上手更容易

2. 技术选型与核心组件

在开始搭建之前，我们需要明确技术选型。本次我们将使用以下技术栈：

2.1 前端框架选择

• Vue 3：组合式 API，更好的 TypeScript 支持
• React 18：并发特性，更好的性能（备选方案）
• Svelte：编译时优化，运行时更轻量（备选方案）

2.2 构建工具对比

2.3 核心依赖配置

{ "name": "moonlight-framework", "version": "1.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "dependencies": { "vue": "^3.3.0", "vue-router": "^4.2.0", "pinia": "^2.1.0", "axios": "^1.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.0", "typescript": "^5.0.0", "vue-tsc": "^1.4.0", "eslint": "^8.45.0", "prettier": "^3.0.0" } }

3. 环境准备与项目初始化

3.1 系统环境要求

• Node.js 版本 >= 16.0.0
• npm 版本 >= 8.0.0 或 yarn >= 1.22.0
• 推荐使用 VS Code 作为开发工具

3.2 创建项目目录结构

# 创建项目目录 mkdir moonlight-framework cd moonlight-framework # 初始化 package.json npm init -y # 安装核心依赖 npm install vue@next vue-router@next pinia axios # 安装开发依赖 npm install -D @vitejs/plugin-vue typescript vue-tsc eslint prettier

3.3 TypeScript 配置

// tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] }

4. Vite 配置详解

Vite 作为现代构建工具，其配置决定了项目的构建行为和开发体验。

4.1 基础 Vite 配置

// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } }, server: { port: 3000, open: true, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { outDir: 'dist', sourcemap: true, chunkSizeWarningLimit: 600, rollupOptions: { output: { manualChunks: { 'vue-vendor': ['vue', 'vue-router', 'pinia'], 'ui-library': ['element-plus', '@element-plus/icons-vue'] } } } } })

4.2 环境变量配置

// src/env.d.ts interface ImportMetaEnv { readonly VITE_APP_TITLE: string readonly VITE_API_BASE_URL: string readonly VITE_UPLOAD_URL: string } interface ImportMeta { readonly env: ImportMetaEnv }

# .env.development VITE_APP_TITLE=月之光辉开发版 VITE_API_BASE_URL=/api VITE_UPLOAD_URL=/upload

5. 项目架构设计

5.1 目录结构规划

src/ ├── assets/ # 静态资源 ├── components/ # 通用组件 ├── views/ # 页面组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── utils/ # 工具函数 ├── api/ # API 接口 ├── types/ # 类型定义 └── main.ts # 入口文件

5.2 路由配置实现

// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw } from 'vue-router' const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { title: '首页', requiresAuth: true } }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta: { title: '登录', requiresAuth: false } }, { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/views/404.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) // 路由守卫 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.meta.requiresAuth && !token) { next('/login') } else { document.title = to.meta.title as string || '月之光辉' next() } }) export default router

5.3 状态管理设计

// src/store/user.ts import { defineStore } from 'pinia' import type { UserInfo } from '@/types/user' export const useUserStore = defineStore('user', { state: () => ({ token: localStorage.getItem('token') || '', userInfo: {} as UserInfo, permissions: [] as string[] }), getters: { isLoggedIn: (state) => !!state.token, hasPermission: (state) => (permission: string) => { return state.permissions.includes(permission) } }, actions: { setToken(token: string) { this.token = token localStorage.setItem('token', token) }, setUserInfo(info: UserInfo) { this.userInfo = info }, logout() { this.token = '' this.userInfo = {} as UserInfo this.permissions = [] localStorage.removeItem('token') } } })

6. 核心功能实现

6.1 HTTP 请求封装

// src/utils/request.ts import axios from 'axios' import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import { useUserStore } from '@/store/user' class Request { private instance: AxiosInstance constructor(config: AxiosRequestConfig) { this.instance = axios.create(config) this.setupInterceptors() } private setupInterceptors() { // 请求拦截器 this.instance.interceptors.request.use( (config) => { const userStore = useUserStore() if (userStore.token) { config.headers.Authorization = `Bearer ${userStore.token}` } return config }, (error) => { return Promise.reject(error) } ) // 响应拦截器 this.instance.interceptors.response.use( (response: AxiosResponse) => { const { data } = response if (data.code === 200) { return data } else { return Promise.reject(new Error(data.message || '请求失败')) } }, (error) => { if (error.response?.status === 401) { const userStore = useUserStore() userStore.logout() window.location.href = '/login' } return Promise.reject(error) } ) } public request<T = any>(config: AxiosRequestConfig): Promise<T> { return this.instance.request(config) } public get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> { return this.instance.get(url, config) } public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> { return this.instance.post(url, data, config) } } export default new Request({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 })

6.2 通用组件开发

<!-- src/components/Loading.vue --> <template> <div v-if="visible" class="loading-overlay"> <div class="loading-spinner"> <div class="spinner"></div> <p class="loading-text">{{ text }}</p> </div> </div> </template> <script setup lang="ts"> defineProps({ visible: { type: Boolean, default: false }, text: { type: String, default: '加载中...' } }) </script> <style scoped> .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .loading-spinner { text-align: center; color: white; } .spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>

7. 代码规范与质量保障

7.1 ESLint 配置

// .eslintrc.js module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off' } }

7.2 Prettier 配置

{ "semi": false, "singleQuote": true, "printWidth": 80, "trailingComma": "none", "arrowParens": "avoid", "tabWidth": 2, "useTabs": false }

7.3 Git Hooks 配置

// package.json { "scripts": { "prepare": "husky install", "pre-commit": "lint-staged" }, "lint-staged": { "*.{vue,js,ts,jsx,tsx}": [ "eslint --fix", "prettier --write" ] } }

8. 构建与部署优化

8.1 构建配置优化

// vite.config.ts 生产环境配置 export default defineConfig(({ mode }) => { const isProduction = mode === 'production' return { // ...其他配置 build: { minify: isProduction ? 'terser' : false, terserOptions: { compress: { drop_console: true, drop_debugger: true } }, rollupOptions: { output: { chunkFileNames: 'js/[name]-[hash].js', entryFileNames: 'js/[name]-[hash].js', assetFileNames: '[ext]/[name]-[hash].[ext]' } } } } })

8.2 性能优化策略

// src/utils/lazyLoad.ts export const lazyLoad = (component: () => Promise<any>) => { return defineAsyncComponent({ loader: component, loadingComponent: LoadingComponent, delay: 200, timeout: 3000 }) } // 路由懒加载使用 const Home = lazyLoad(() => import('@/views/Home.vue'))

9. 常见问题与解决方案

9.1 开发环境问题排查

9.2 生产环境部署问题

9.3 性能优化建议

1. 代码分割策略

   • 路由级别分割：每个路由单独打包
   • 组件级别分割：大型组件异步加载
   • 第三方库分割：将稳定库单独打包

2. 缓存策略优化

   • 配置合适的缓存头
   • 使用内容hash命名文件
   • 考虑使用Service Worker

3. 监控与告警

   • 集成性能监控SDK
   • 设置错误监控和上报
   • 配置资源加载超时告警

10. 最佳实践总结

通过本文的实践，我们完成了一个现代化前端框架的搭建。这个"月之光辉"框架具备了以下特点：

技术特色：

• 基于Vue 3 + TypeScript的现代化技术栈
• Vite构建工具带来的极致开发体验
• 完整的工程化配置和代码规范
• 可扩展的架构设计和模块化组织

工程化价值：

• 统一的开发规范和代码风格
• 自动化的工作流和质量保障
• 完善的错误处理和日志机制
• 良好的性能优化和部署方案

在实际项目中使用时，建议根据具体业务需求进行适当调整。比如电商项目可能需要集成支付SDK，后台管理系统可能需要更复杂的权限控制，移动端项目可能需要考虑PWA特性等。

这个框架的真正价值在于为团队提供了一个可靠的技术基座，让开发者可以更专注于业务逻辑的实现，而不是重复的基础设施搭建工作。