uniapp-admin 项目安装与配置指南

uniapp-admin 项目安装与配置指南

uniapp-admin Muti-platform management system for uniapp, H5, Android, IOS, Min Program 项目地址: https://gitcode.com/gh_mirrors/uni/uniapp-admin

1. 项目基础介绍

uniapp-admin 是一个基于uni-app开发的多平台管理系统模板。该模板支持H5、Android、iOS以及小程序等多个平台。uniapp-admin 集成了丰富的UI组件和功能，如登录模板、顶部固定搜索框、顶部滑动选项卡等，适用于快速构建企业级管理系统。

主要编程语言：Vue.js、CSS、JavaScript

2. 项目使用的关键技术和框架

• uni-app：一个使用Vue.js开发所有前端应用的框架，可以发布到iOS、Android、H5、以及各种小程序等多个平台。
• Vuex：用于状态管理的Vue.js库。
• vue-router：Vue.js 的官方路由管理器。
• axios：基于Promise的HTTP客户端，用于发送请求。
• colorUI：一套基于uni-app的UI库。
• ThorUI：uni-app生态的UI组件库。

3. 项目安装和配置的准备工作

在开始安装之前，请确保您的开发环境满足以下要求：

• Node.js：建议使用最新版本的Node.js。
• Git：用于克隆和操作项目代码。
• 开发工具：HBuilderX 或 Visual Studio Code 等可以支持uni-app开发的IDE。

详细安装步骤

步骤 1：克隆项目

打开命令行窗口，使用以下命令克隆项目到本地：

git clone https://github.com/lavieAll/uniapp-admin.git

步骤 2：安装依赖

进入项目目录：

cd uniapp-admin

使用npm或yarn安装项目依赖：

npm install
# 或者
yarn install

步骤 3：运行项目

在项目目录中，运行以下命令启动项目：

npm run dev
# 或者
yarn run dev

首次运行项目可能会需要一些时间来编译资源。

步骤 4：配置API接口

在manifest.json文件中配置代理，以便在开发环境下能够请求后端接口。

"proxy": {
  "/ua/ua-service": {
    "target": "http://localhost:8080",
    "changeOrigin": true,
    "secure": false
  }
}

确保target属性的值是指向您的后端服务地址。

步骤 5：启动H5服务

在manifest.json的h5部分中配置端口：

"h5": {
  "devServer": {
    "port": 9090
  }
}

使用浏览器访问 http://localhost:9090 来查看您的项目。

以上步骤将帮助您成功安装并运行uniapp-admin项目。在开发过程中，您可能需要根据项目需求进一步调整配置和代码。

uniapp-admin Muti-platform management system for uniapp, H5, Android, IOS, Min Program 项目地址: https://gitcode.com/gh_mirrors/uni/uniapp-admin