{
}
// fig.2 — 关于这个项目,问点别的
问关于「webstack-vue」的细节 —— 技术选型 / 踩坑 / 部署。
试试下面的问题,或直接输入。
使用 Vue 3 + Vite 构建的现代化网址导航系统
原项目灵感来源:WebStackPage
webstack-vue 是一个基于 Vue 3 生态构建的网址导航/书签管理系统,提供书签收藏、分类管理、用户系统以及完整的后台管理功能。前端采用现代化技术栈,后端通过独立 API 服务对接,可用于个人书签云端管理或团队站点导航中心。
清爽的卡片式书签陈列,左侧分类导航一目了然。
支持父子级分类切换,定位精准。
护眼舒适的暗黑主题,夜间浏览更友好。
显示当前用户身份与权限,提供密码修改入口。
对所有书签条目进行集中维护,支持图标、链接、来源备注等字段。
管理书签的一级、二级分类结构,支持分页与搜索。
管理员可对系统用户进行查看、编辑、删除及权限分配。
支持上传浏览器导出的 HTML 文件,自动生成卡片;同时支持反向导出。
| 技术 | 说明 |
|---|---|
| Vue 3 | 渐进式 JavaScript 框架 (Composition API) |
| Vue Router 4 | 官方路由管理器 |
| Pinia | 新一代 Vue 状态管理库 |
| Pinia Plugin Persistedstate | Pinia 状态持久化插件 |
| 技术 | 说明 |
|---|---|
| Element Plus | Vue 3 桌面端 UI 组件库 |
| Element Plus Icons | 官方图标组件库 |
| 技术 | 说明 |
|---|---|
| Vite | 下一代前端构建工具 |
| Vue DevTools | Vue 调试工具 |
| unplugin-auto-import | API 自动导入 |
| unplugin-vue-components | 组件自动注册 |
| 技术 | 说明 |
|---|---|
| Axios | HTTP 客户端 |
| VueUse | Vue 组合式 API 工具集 |
| Driver.js | 用户操作引导库 |
| 技术 | 说明 |
|---|---|
| ESLint | 代码质量检查 |
| Prettier | 代码格式化 |
webstack-vue/
├── docs/
│ └── screenshots/ # 项目截图
├── public/ # 静态资源
│ └── favicon.ico
├── src/
│ ├── assets/ # 资源文件 (css / js / 图片)
│ ├── components/ # 公共组件
│ │ ├── form/ # 表单子组件
│ │ ├── AdminSideBar.vue # 后台侧边栏
│ │ ├── CardHeader.vue # 卡片头部
│ │ ├── CardVue.vue # 书签卡片
│ │ ├── CommonHeader.vue # 公共顶部栏
│ │ ├── CommonUpload.vue # 通用上传组件
│ │ ├── SideBar.vue # 前台侧边栏
│ │ └── ToggleDarkButton.vue # 主题切换按钮
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态
│ ├── utils/ # 工具函数 (axios 封装等)
│ ├── views/
│ │ ├── Admin/ # 管理员页面
│ │ ├── User/ # 用户页面
│ │ └── HomeView.vue # 首页
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── .eslintrc.cjs # ESLint 配置
├── .prettierrc.json # Prettier 配置
├── index.html # HTML 模板
├── jsconfig.json # JS 路径别名
├── package.json
├── pnpm-lock.yaml
├── vite.config.js # Vite 配置
└── README.md
# 1. 克隆仓库
git clone https://github.com/zxbdzh/webstack-vue.git
cd webstack-vue
# 2. 安装依赖 (推荐 pnpm)
pnpm install
# 3. 启动开发服务器
pnpm dev
# 4. 构建生产版本
pnpm build
# 5. 本地预览生产构建
pnpm preview
修改根目录下的环境变量文件:
# .env.development
VITE_API_URL=http://localhost:3000/api
# .env.production
VITE_API_URL=https://your-api-domain.com/api
VITE_BASE_API=/
本项目仅为前端实现,需配合后端 API 服务运行:
🔗 后端仓库:webstack-backend
请按照后端项目的 README 完成部署与配置。
| 命令 | 说明 |
|---|---|
pnpm dev | 启动开发服务器(热更新) |
pnpm build | 构建生产版本 |
pnpm preview | 本地预览生产构建 |
pnpm lint | ESLint 代码检查并修复 |
pnpm format | Prettier 格式化代码 |
server {
listen 80;
server_name your-domain.com;
root /path/to/webstack-vue/dist;
index index.html;
# SPA 路由 fallback
location / {
try_files $uri $uri/ /index.html;
}
# API 反向代理
location /api {
proxy_pass http://your-backend-api;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
OpenResty 部署方式与 Nginx 完全兼容,可直接复用上述配置。
| 模块 | 功能 |
|---|---|
| 标签管理 | 书签条目的增删改查、批量管理、图标与链接维护 |
| 分类管理 | 一级 / 二级分类的层级管理 |
| 用户管理 | 用户列表、权限分配、账号操作 |
| 书签导入导出 | 支持 Chrome / Edge / Firefox / 360 浏览器的 HTML 书签互导 |
| 浏览器 | 导出步骤 |
|---|---|
| Chrome / 360 极速 | Ctrl + Shift + O → 右上角三个点 → 导出书签 → 保存 |
| Firefox | Ctrl + Shift + B → 打开"我的足迹" → 选择所有书签 → 导出书签为 HTML |
| Microsoft Edge | 地址栏访问 edge://favorites/ → 右上角三个点 → 导出收藏夹 |
随后在"书签导入"页面上传得到的 HTML 文件即可。
src/views/ 下创建页面组件src/router/index.js 注册路由src/stores/ 创建对应 Pinia storesrc/components/<script setup>)pnpm lint 与 pnpm format欢迎提交 Issue 与 Pull Request!
git checkout -b feature/AmazingFeaturegit commit -m 'feat: add some AmazingFeature'git push origin feature/AmazingFeature本项目基于 MIT License 开源。
⭐ 如果这个项目对你有帮助,欢迎 Star 支持一下!