一、项目架构设计
技术栈选型
- 客户端官网：Vue3 + Vue Router + Pinia + Element Plus（UI 框架）
- 管理端官网：Vue3 + Vue Router + Pinia + Element Plus（统一 UI 风格）
- 服务端：Node.js + Express + SQLite（轻量数据库）
- 富文本：TinyMCE（支持图片上传 / 格式编辑）
- 图片处理：Multer（文件上传）+ Sharp（图片压缩）
二、项目结构设计
enterprise-website/
├── client/ # 客户端官网（用户访问）
├── admin/ # 管理端（后台编辑）
├── server/ # 服务端API
└── docs/ # 部署文档
三、详细实现步骤
1. 初始化项目（命令行）
# 创建主目录
mkdir enterprise-website && cd enterprise-website# 初始化客户端
vue create client
cd client
vue add router
vue add pinia
npm i element-plus @element-plus/icons-vue
npm i axios tinymce @tinymce/tinymce-vue # 接口请求+富文本
npm run serve # 启动客户端（http://localhost:8080）
cd ..# 初始化管理端
vue create admin
cd admin
vue add router
vue add pinia
npm i element-plus @element-plus/icons-vue
npm i axios tinymce @tinymce/tinymce-vue
npm run serve # 启动管理端（http://localhost:8081）
cd ..# 初始化服务端
mkdir server && cd server
npm init -y
npm i express cors sqlite3 sequelize multer sharp dotenv # 核心依赖
npm i nodemon -D # 开发热更新
# 创建启动脚本（package.json）
# "scripts": { "start": "node app.js", "dev": "nodemon app.js" }
npm run dev # 启动服务端（http://localhost:3000）
2. 服务端实现（核心功能）
① 配置文件（server/.env）
PORT=3000
DB_PATH=./database.db # SQLite数据库路径
UPLOAD_DIR=./uploads # 图片上传目录
② 数据库模型（server/models/index.js）
const { Sequelize, DataTypes } = require('sequelize');
const path = require('path');
require('dotenv').config();// 初始化数据库连接
const sequelize = new Sequelize({dialect: 'sqlite',storage: path.resolve(__dirname, process.env.DB_PATH)
});// 内容模型（用于存储富文本和图片信息）
co
