【开箱即用】vk-uniCloud-router - 云函数路由模式 - uniCloud企业级快速开发框架

VK1688

已于 2022-05-18 16:04:13 修改

阅读量2.4k

点赞数 3

分类专栏： uniapp uniCloud vk 文章标签： vk 前端框架后端 node.js mongodb

于 2022-05-18 16:02:03 首次发布

本文链接：https://blog.csdn.net/wwqwwq112/article/details/124844145

版权

uniapp 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 1 订阅

订阅专栏

uniCloud

2 篇文章 0 订阅

订阅专栏

vk-unicloud-router - 云开发路由模式企业级快速开发框架

作者：`VK`

框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

下载地址：https://ext.dcloud.net.cn/plugin?id=2204

文档地址：https://vkdoc.fsq.pub/client/

序

如果你热爱编程，想快速入门云开发，欢迎使用vk-unicloud系列开发框架
无需转变开发习惯，0成本上手云开发。
框架内置了众多API、工具包，为你的业务扫平障碍。使你的项目刚起步进度就是50%（微信登录、短信、验证码、缓存、生成小程序码等等）
从此你又get一个新技能，只需用js，轻松搞定前后台整体业务。

云开发优势

无服务器：无需服务器运维，你再也不用担心服务器突然崩了，半夜起来重启服务器了。
抗ddos：再也不用担心ddos攻击而导致服务器崩了。
部署简单：直接通过HBX一键上传云函数。
阿里云空间免费：目前阿里云空间完全免费，连oss储存和cdn流量都是免费的。（当然目前阿里云空间也有小问题，就是偶尔不稳定，毕竟免费的，想要稳定可以选腾讯云付费空间）

框架优势

1、框架基本上已完成常规项目中50%甚至以上的功能点，你只需要专注写自己的业务逻辑即可。（大量现成轮子供你使用，你只需要搭积木造房子）
2、框架简洁高效，框架没有引入任何第三方npm包（使用npm包会影响云函数上传效率，有些npm包会依赖其他npm包，导致无限套娃）
3、框架集成 uniCloud 官方 uni-id、uni-pay、云对象、短信发送、一键登录 等扩展插件，且其他官方插件基本也可以无缝兼容。
4、特有的请求日志打印系统，可以让你更直观的在浏览器控制台（非HBX控制台）查看请求参数、返回参数等信息。
5、全面支持 云函数url化 请求（目前插件市场功能最全），且支持 url重写 （你的url格式你做主）
6、vk.baseDao 数据库API，数据库操作、连表查询轻松搞定。（支持副表与副表的副表连表）
7、哪些页面需要登录，或哪些页面不需要登录，可以直接通过全局配置搞定。（支持通配符）
8、其他更多功能点可下载体验。关于框架使用问题，可加Q群 22466457 提问，只要是框架问题，在群内一定可以得到解决。

点击查看更新日志

文档

client端 框架地址：https://ext.dcloud.net.cn/plugin?id=2204 点击查看
admin端 框架地址：https://ext.dcloud.net.cn/plugin?id=5043 点击查看
VK框架快速开发辅助工具 下载地址 https://ext.dcloud.net.cn/plugin?id=6663 点击查看
client端 框架文档：https://vkdoc.fsq.pub/client/ 点击查看
admin端 框架文档：https://vkdoc.fsq.pub/admin/ 点击查看
统一支付 文档：https://vkdoc.fsq.pub/vk-uni-pay/ 点击查看
Redis 最全API中文文档：https://vkdoc.fsq.pub/vk-redis/ 点击查看
unicloud数据库一键搬家工具 文档 https://vkdoc.fsq.pub/db-migration/ 点击查看

插件API体验地址

插件首页体验地址

快速上手 - 安装步骤

下载地址：https://ext.dcloud.net.cn/plugin?id=2204

后端（云函数端）安装步骤

打开 uniCloud/cloudfunctions 目录

前置工作：修改云函数全局配置文件（用到微信登录的必须要配置）微信小程序配置详细教程

注意：

1、开发微信小程序和APP微信登录需要额外配置 manifest.json 以及 uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json 这2个配置文件，且改动配置后需要重新上传公共模块和 router 函数。
2、若你的电脑没有安装 Node.js，则无法使用 npm 命令。
3、Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/
4、Node.js 安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

查看 uni-id/config.json 代码格式点击查看

正式安装

直接右键uniCloud目录点击 运行云服务空间初始化向导 即可

前端（页面端）安装步骤

Vue2.0版本

main.js 引入 vk-unicloud-page 库

// 引入 vk框架前端
import vk from './uni_modules/vk-unicloud';
Vue.use(vk);

完整 main.js 示例

import Vue from 'vue'
import App from './App'
import store from './store'
import config from '@/app.config.js'

// 引入 vk框架前端
import vk from './uni_modules/vk-unicloud';
Vue.use(vk);

// 初始化 vk框架
Vue.prototype.vk.init({
  Vue,               // Vue实例
  config,	     // 全局配置
});

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
});
app.$mount();

Vue3.0版本

main.js 引入 vk-unicloud-page 库

完整 main.js 示例

import App from './App'
import store from './store'
import config from '@/app.config.js'

// 引入 vk框架前端
import vk from './uni_modules/vk-unicloud';

import { createSSRApp } from 'vue'

export function createApp() {
  const app  = createSSRApp(App)
  
  // 使用 vuex
  app.use(store)
  
  // 使用 vk框架前端
  app.use(vk);
  
  // 初始化 vk框架
  app.config.globalProperties.vk.init({
    Vue: app,          // Vue实例
    config,	           // 配置
  });
  
  return { app }
}

自 client端框架 2.6.0 起，不再内置任何 UI 框架，你可以选择自己喜欢的 UI 组件库进行开发。

集成 `vk-uview-ui`（vue2.0版）

若不想集成 vk-uview-ui 可跳过此处

适合开发：H5、App(vue版本)、微信小程序、支付宝小程序（其他小程序未验证）

插件市场导入 vk-uview-ui 框架：点击前往

1、main.js 引入 vk-uview-ui

import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);

2、App.vue 引入基础样式（注意style标签需声明scss属性支持）

<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>

3、uni.scss 引入全局 scss 变量文件

@import "@/uni_modules/vk-uview-ui/theme.scss";

集成 `vk-uview-ui`（vue3.0版）

若不想集成 vk-uview-ui 可跳过此处

适合开发：H5、App(vue版本)、微信小程序（其他小程序未验证）

插件市场导入 vk-uview-ui 框架：点击前往

不建议把老项目升级到 Vue3.0 (升级非常麻烦，建议新项目才考虑是否使用Vue3.0)

注意：目前（2020-11-18） uniapp 的 Vue3.0 版本只兼容：H5、App、微信小程序

1、前置步骤：修改 manifest.json 内的 vue 版本为 vue3
2、项目根目录新增 index.html 文件，文件代码为

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<!--preload-links-->
		<!--app-context-->
		<!-- 配置H5的 web图标static/logo.png -->
		<link rel="icon" href="./static/logo.png" />
	</head>
	<body>
		<div id="app">
			<!--app-html-->
		</div>
		<script type="module" src="/main.js"></script>
	</body>
</html>

3、main.js 引入 vk-uview-ui

// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';

import { createSSRApp } from 'vue'

export function createApp() {
  const app  = createSSRApp(App)
  
  // 使用 uView UI
  app.use(uView)
  
  return { app }
}

4、App.vue 引入基础样式（注意style标签需声明scss属性支持）

<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>

5、uni.scss 引入全局 scss 变量文件

@import "@/uni_modules/vk-uview-ui/theme.scss";

集成 `uview-ui`（nvue2.0版）

若不想集成 uview-ui 可跳过此处

适合开发：App(nvue版本)，如果你只开发App，推荐用这个UI

插件市场导入 uview-ui 框架：点击前往

1、main.js 引入 uview-ui

import uView from './uni_modules/uview-ui';
Vue.use(uView);

2、App.vue 引入基础样式（注意style标签需声明scss属性支持）

<style lang="scss">
	@import "./uni_modules/uview-ui/index.scss";
</style>

3、uni.scss 引入全局 scss 变量文件

@import "@/uni_modules/uview-ui/theme.scss";

集成 `uview-ui`（nvue3.0版）

别想了，uniapp官方也还没支持。

组件库并不限制只能从以上选择，理论上支持任何uniapp的UI组件库进行开发。

卸载 `uView1` 的步骤

1、main.js 删除 uView1

import uView from 'uview-ui'
Vue.use(uView);

2、App.vue 删除基础样式

<style lang="scss">
	@import "uview-ui/index.scss";
</style>

3、uni.scss 删除全局 scss 变量文件

@import "uview-ui/theme.scss";

4、pages.json 删除 easycom 规则

"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
},

5、package.json 删除 uview-ui 依赖

"dependencies": {
  "uview-ui": "^1.8.3"
},

6、package-lock.json 删除 uview-ui 依赖

"dependencies": {
  "uview-ui": {
    "version": "1.8.3",
    "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.8.3.tgz",
    "integrity": "sha512-DqKc+qRrOZLPcyfWv4b0HspSS9n1Cd6BbgKiYEv9rjTAnWoqJV7rXsvWqZdr5iKGP5EMNbNS741GLNw4sIHbpw=="
  }
}

卸载 `vk-uview-ui` 的步骤

1、main.js 删除vk-uview-ui

import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);

2、App.vue 删除基础样式

<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>

3、uni.scss 删除全局 scss 变量文件

@import "@/uni_modules/vk-uview-ui/theme.scss";

4、删除 uni_modules/vk-uview-ui 整个目录

更多文档

client端 框架地址：https://ext.dcloud.net.cn/plugin?id=2204 点击查看
admin端 框架地址：https://ext.dcloud.net.cn/plugin?id=5043 点击查看
VK框架快速开发辅助工具 下载地址 https://ext.dcloud.net.cn/plugin?id=6663 点击查看
client端 框架文档：https://vkdoc.fsq.pub/client/ 点击查看
admin端 框架文档：https://vkdoc.fsq.pub/admin/ 点击查看
统一支付 文档：https://vkdoc.fsq.pub/vk-uni-pay/ 点击查看
Redis 最全API中文文档：https://vkdoc.fsq.pub/vk-redis/ 点击查看
unicloud数据库一键搬家工具 文档 https://vkdoc.fsq.pub/db-migration/ 点击查看

VK1688

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【开箱即用】vk-uniCloud-router - 云函数路由模式 - uniCloud企业级快速开发框架

如果你热爱编程，想快速入门云开发，欢迎使用`vk-unicloud`系列开发框架。无需转变开发习惯，0成本上手云开发。框架内置了众多API、工具包，为你的业务扫平障碍。使你的项目刚起步进度就是50%（微信登录、短信、验证码、缓存、生成小程序码等等）从此你又get一个新技能，只需用js，轻松搞定前后台整体业务。
复制链接

扫一扫