快速开始

字母搬运工大约 3 分钟

快速开始

准备工作

安装HBuilderX

HbuilderX 建议安装以下插件

Prettier
sscc/sass 编译
easy-git Git 源码管理

运行系统

略

注意

注意使用 npm install命令安装包

必要配置

修改后端请求接口，编辑项目根目录下的 api/config.service.js

let BASE_URL = '';

if (process.env.NODE_ENV == 'development') {
  // 小程序访问，不能用localhost
  //  #ifdef H5
  // 本地开发调试小程序功能，后端需要使用IP的方式启动、注意跨域配置
  BASE_URL = 'http://192.168.31.95:8888'; //改成你自己电脑的IP地址
  //  #endif

  //  #ifdef H5
  // 本地开发后端接口地址
  BASE_URL = 'http://localhost:8888'; //本地开发，服务端远程在后面加/dev-api 或其他根据情况
  //  #endif
} else {
  // 线上环境 小程序访问
  BASE_URL = 'https://api.xxx.cn/uni-api'; //改成你自己后端的域名，注意小程序必须是https

  //  #ifdef H5
  // 线上环境 同域名部署
  BASE_URL = '/prod-api';
  //  #endif
}
const configService = {
  apiUrl: BASE_URL
};

export default configService;

let BASE_URL = '';
let MSG_HUB_URL = '';
if (import.meta.env.DEV) {
  // 本地开发小程序访问通过IP地址(替换成你自己电脑的内网IP地址)
  BASE_URL = `http://192.168.31.95:8888`;
  //  #ifdef H5
  BASE_URL = `http://${window.location.hostname}:8888`; //注意：后面没有/
  //  #endif
  MSG_HUB_URL = BASE_URL;
} else {
  // 线上环境 小程序访问
  BASE_URL = 'http://api.xxx.cn/uni-api'; //改成你自己后端的域名，注意小程序必须是https
  MSG_HUB_URL = BASE_URL;

  //  #ifdef H5
  BASE_URL = '/prod-api'; //注意：nginx需要配置访问api代理
  MSG_HUB_URL = '';
  //  #endif
}
const configService = {
  apiUrl: BASE_URL,
  msgHubUrl: MSG_HUB_URL
};

export default configService;

其他配置

config.js文件说明

// 应用全局配置
module.exports = {
  // 应用信息
  appInfo: {
    // 应用名称
    name: 'zradmin-app',
    // 应用版本
    version: '1.2.0',
    // 应用logo
    logo: '/static/logo.png',
    // 官方网站
    site_url: 'http://www.izhaorui.cn',
    // 政策协议
    agreements: [
      {
        title: '隐私政策',
        url: 'http://www.izhaorui.cn/html/protocol.html'
      },
      {
        title: '用户服务协议',
        url: 'http://www.izhaorui.cn/html/protocol.html'
      }
    ]
  }
};

启动打包配置

修改 manifest.json文件


"h5": {
	"publicPath": "/h5/", //资源前缀
	"template": "static/index.html",
	"devServer": {
		"port": 8886, //启动端口
		"https": false
	},
	"title": "ZRAdmin-App",
	"router": {
		"mode": "hash",
		"base": "/h5/"
	}
}


"h5": {
    "publicPath": "/",
    "template": "static/index.html",
    "title": "ZRAdmin-App",
    "router": {
      "mode": "hash",
      "base": "/"
    }
  }

需要登录才能访问

在App.vue页面中将下面大代码注释去掉即可，下面条件编译是只针对 H5

// 初始化应用
initApp() {
	// 检查用户登录状态
	# ifdef H5
	this.checkLogin()
	# endif
},

在 uni-app 中封装自定义组件

传送门

保存时自动格式化代码

传送门

全局方法

全局方法在main.js定义，如/utils/permission.js，把checkPerm、checkRole方法注册到全局使用。

import { checkPermi, checkRole } from './utils/permission';

Vue.prototype.checkPermi = checkPermi;
Vue.prototype.checkRole = checkRole;

测试验证

<view v-if="checkRole(['admin'])">角色权限控制</view> <view v-if="checkPermi(['system:user:list'])">按钮权限控制</view>

全局变量机制(vue2)

全局变量机制 globalData，支持全端通用。

以下是 App.vue 中定义 globalData 的相关配置：

<script>
  export default {
    globalData: {
      text: 'text'
    }
  };
</script>

其他页面获取方法

console.info(getApp().globalData.text);

修改 globalData 变量的方式如下：getApp().globalData.text = 'hello'

注意

globalData 是简单的全局变量，如果使用状态管理，请使用 vuex（main.js 中定义）

工作台菜单配置

从后端接口获取SysLoginController.GetAppRouters

/// <summary>
/// 获取路由信息
/// </summary>
/// <returns></returns>
[Verify]
[HttpGet("getAppRouters")]
public IActionResult GetAppRouters()
{
    long uid = HttpContext.GetUId();
    var perms = permissionService.GetMenuPermission(new SysUser() { UserId = uid });

    return SUCCESS(sysMenuService.GetAppMenus(perms));
}

注意

移动端(vue3)的菜单显示同样支持配置,具体可查看代码SysMenuService.GetAppMenus,默认账号admin拥有所有的菜单权限

运行到 iOS 或 Android

https://uniapp.dcloud.net.cn/tutorial/run/run-app.html