zc/admin_core

Fork 0

Files

张成 845658f193 1

2025-10-08 18:53:38 +08:00

3.0 KiB

Raw Blame History

Demo Project 安装指南

📦 安装步骤

步骤 1：复制框架文件

框架文件已经在创建 demo 时自动复制到 src/libs/admin-framework.js。

如果需要更新框架，执行：

# 在 admin-framework 目录重新构建
cd ../
npm run build

# 复制最新的框架文件
cp dist/admin-framework.js demo-project/src/libs/

步骤 2：安装依赖

cd demo-project
npm install

安装过程中会下载以下依赖：

vue, vue-router, vuex
view-design (UI 组件库)
axios (HTTP 客户端)
webpack 相关工具

步骤 3：启动项目

开发模式

npm run dev

启动后自动打开浏览器访问 http://localhost:8080

生产构建

npm run build

构建完成后，产物在 dist 目录。

🎯 功能演示

1. 登录页面

访问：http://localhost:8080/login

默认登录信息（示例）：

用户名：admin
密码：123456

2. 主页

登录后自动跳转到主页：http://localhost:8080/home

显示系统欢迎信息和标题。

3. 系统管理页面

框架内置的系统页面：

/system/user - 用户管理
/system/role - 角色管理
/system_high/menu - 菜单管理

4. 业务示例页面

访问：http://localhost:8080/business/product

查看产品列表示例（包含增删改查操作演示）。

🔧 开发提示

修改配置

编辑 src/config/index.js：

export default {
  title: '你的系统名称',           // 修改系统标题
  apiUrl: 'http://your-api.com/api/', // 修改 API 地址
  uploadUrl: 'http://your-api.com/api/upload'
}

添加新页面

在 src/views/business/ 创建新的 .vue 文件
在 src/main.js 中添加路由：

import NewPage from './views/business/new_page.vue'

const businessRoutes = [
  {
    path: '/business/newpage',
    name: 'new_page',
    component: NewPage
  }
]

调用 API

// GET 请求
const res = await this.$http.get('user/list', { page: 1 })

// POST 请求
const res = await this.$http.post('user/add', { name: '张三' })

使用 Store

// 获取用户信息
const userName = this.$store.getters['user/userName']

// 获取系统配置
const sysTitle = this.$store.getters['app/sysFormModel']

⚠️ 常见问题

Q1: 启动后页面空白？

检查浏览器控制台错误，确保：

框架文件已正确复制到 src/libs/
依赖已完全安装 npm install

Q2: 接口请求失败？

修改 src/config/index.js 中的 apiUrl 为正确的后端地址。

Q3: 样式显示异常？

确保已引入 ViewUI 样式：

import 'view-design/dist/styles/iview.css'

📚 更多帮助

查看完整框架文档：../完整使用文档.md
框架 API 文档：../完整使用文档.md#api-文档

🎉 开始开发

所有准备工作已完成，现在可以开始开发了！

npm run dev

祝开发愉快！🚀

3.0 KiB Raw Blame History Unescape Escape