vk-unicloud-router - 云开发路由模式企业级快速开发框架
作者：VK
下载地址：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、其他更多功能点可下载体验。
文档
-
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 整个目录
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
