vue+vant项目0-1快速发布到--钉钉应用

uniapp开发笔记----vue开发项目配置钉钉应用

  • 一、 vue+vant开发项目
      • 1. 自定义vue+vant项目或者已经有的旧项目
        • 1. 自定义vue+vant项目
          • 1. 创建vue项目
          • 2. 安装依赖
          • 3. 引入所有组件
          • 4. 使用一个组件/效果和代码如下:
      • 2. git官网仓库,直接拉默认dome代码
      • 3. 打包项目上线
  • 二、创建一个钉钉应用并内嵌vue移动端项目
      • 1. 创建测试公司(本公司已经有发布应用功能的忽略这一步)
      • 2. 创建一个钉钉应用
      • 3. 发布上线

背景介绍:vue+vant开发的移动端项目,内嵌到钉钉应用中

一、 vue+vant开发项目

1. 自定义vue+vant项目或者已经有的旧项目

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

  1. vue3对应文档:https://vant-ui.github.io/vant/#/zh-CN
  2. vue2对应文档:https://vant-ui.github.io/vant/v2/#/zh-CN/
1. 自定义vue+vant项目
1. 创建vue项目
vue create vue2-vant // 创建时候我先择的是vue2

在这里插入图片描述

2. 安装依赖
/// Vue 3 项目,安装最新版 Vant:
npm i vant -S/// Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
3. 引入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);
4. 使用一个组件/效果和代码如下:

在这里插入图片描述

<template><div class="hello"><van-nav-bartitle="标题"left-text="返回"right-text="按钮"left-arrow@click-left="onClickLeft"@click-right="onClickRight"/><h1>{{ msg }}</h1><van-tag type="primary">标签</van-tag><van-tag type="success">标签</van-tag><van-tag type="danger">标签</van-tag><van-tag type="warning">标签</van-tag><van-form @submit="onSubmit"><van-fieldv-model="username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="address"name="住址"label="住址"placeholder="住址":rules="[{ required: true, message: '请填写住址' }]"/><div style="margin: 16px"><van-button round block type="info" native-type="submit">提交</van-button></div></van-form></div>
</template><script>
export default {name: "HelloWorld",props: {msg: String,},data() {return {username: "",address: "",};},methods: {onSubmit(values) {console.log("submit", values);},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;width: 100vw;
}
</style>

2. git官网仓库,直接拉默认dome代码

git地址:https://github.com/vant-ui/vant-demo
代码目录如下:
在这里插入图片描述
运行后样式:
在这里插入图片描述

3. 打包项目上线

  1. vue正常打包

在这里插入图片描述
2. 发布到线上
确保浏览器可以直接通过地址访问

二、创建一个钉钉应用并内嵌vue移动端项目

1. 创建测试公司(本公司已经有发布应用功能的忽略这一步)

创建测试公司直通车:https://open-dev.dingtalk.com/unauth?redirectPath=%2Ffe%2Fapi-tools&hash=%23%2F#/
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2. 创建一个钉钉应用

  • 选择H5微应用
    在这里插入图片描述
  • 添加网页应用
    在这里插入图片描述

3. 发布上线

  • 配置页面地址(注意保存后要重新上线才行)
    在这里插入图片描述
  • 发布上线
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/837808.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CTF如何学习?

CTF如何学习&#xff1f;打CTF有什么用 CTF本身有几个常见的领域 MISC WEB [逆向 密码学](https://www.zhihu.com/search?q逆向 密码学&search_sourceEntity&hybrid_search_sourceEntity&hybrid_search_extra{“sourceType”%3A"answer"%2C"sourc…

Hadoop 3.4.0+HBase2.5.8+ZooKeeper3.8.4+Hive+Sqoop 分布式高可用集群部署安装 大数据系列二

创建服务器,参考 虚拟机创建服务器 节点名字节点IP系统版本master11192.168.50.11centos 8.5slave12192.168.50.12centos 8.5slave13192.168.50.13centos 8.5 1 下载组件 Hadoop:官网地址 Hbase:官网地址 ZooKeeper:官网下载 Hive:官网下载 Sqoop:官网下载 为方便同学…

TypeScript学习日志-第二十六天(weakMap,weakSet,set,map)

weakMap,weakSet,set,map 一、set set 的基本用法如下&#xff1a; 二、map map 与 set 的 区别 就是 map 的 key 可以是引用类型 object array , map 的添加时使用 set 三、weakmap weakset weakmap和weakset 都是弱项 弱引用 其键必须是引用类型&#xff0c;不能是其它类…

弹幕游戏-压力测试 Python-Locust模拟送礼物

Hey&#xff0c;读者们&#xff01;今天给大家带来一个Python性能测试的新玩法——使用Locust模拟发送礼物。是不是听起来就很酷&#xff1f;&#x1f60e; &#x1f3af;目标 想象一下&#xff0c;在直播平台上&#xff0c;你希望测试某个直播间的礼物发送功能。那么&#x…

有一个21年的前端vue项目,死活安不上依赖

在公司开发的时候遇到的一个很玄幻的问题,这个项目是21年开发的,现在我是24年中途二开增加新功能 这个项目经过多人之手,现在已经出现了问题------项目依赖安不上,我能启动完全是因为在23年的时候写这个项目的时候将依赖费九牛二虎之力下载好后打成了压缩包发给另外一个安不上依…

Qt学习笔记1.3.3QtCore-隐式共享

文章目录 概述隐式共享细节类列表 Qt中的许多c类使用隐式数据共享来最大化资源使用并最小化复制。隐式共享类作为参数传递时既安全又高效&#xff0c;因为只传递指向数据的指针&#xff0c;并且只有当函数写入数据时才会复制数据&#xff0c;即写时复制(copy-on-write)。 概述 …

【Node.js】事件循环

Node.js 中的事件循环是基于单线程的异步非阻塞模型。它是 Node.js 的核心机制&#xff0c;用于处理非阻塞的 I/O 操作和异步事件。 1. Node.js 事件循环介绍 Node.js 的事件循环是一个 Event Loop&#xff0c;通过异步回调函数的方式实现非阻塞的处理。事件循环会在主线程上…

信创替代后的设备处置

信创替代后的设备处置 在信创项目中替换下来的设备&#xff0c;如果从技术层面讲还具有较高的应用价值&#xff0c;如何处置呢&#xff1f; 一、数据处置 信创适配完成后&#xff0c;这些被替换下来的服务器上有大量的数据&#xff08;包括结构化和非结构化&#xff09;&…

NSSCTF中的1zjs、作业管理系统、finalrce、websign、简单包含、Http pro max plus

目录 [LitCTF 2023]1zjs [LitCTF 2023]作业管理系统 [SWPUCTF 2021 新生赛]finalrce exec()函数&#xff1a;php中exec介绍及使用_php exec-CSDN博客​​​​​​ 资料参考&#xff1a;RCE(远程命令执行)绕过总结_rce绕过-CSDN博客 [UUCTF 2022 新生赛]websign [鹏城杯 …

鱼哥好书分享活动第22期:《数字政府网络安全合规性建设指南》解锁数字政府网络安全新篇章

鱼哥好书分享活动第22期&#xff1a;《《数字政府网络安全合规性建设指南》》解锁数字政府网络安全新篇章 阅读对象&#xff1a;书籍目录&#xff1a;了解更多&#xff1a;赠书抽奖规则: 当今时代&#xff0c;数据已成为新型生产要素&#xff0c;不仅是个人、企业乃至国家的重要…

29、Qt使用上下文菜单(右键菜单)

说明&#xff1a;使用四种方式实现鼠标右击界面&#xff0c;显示出菜单&#xff0c;菜单上有两个动作&#xff0c;选择两个动作&#xff0c;分别打印“111”和“222”。 界面样式如下&#xff1a; 一、方法1&#xff1a;重写鼠标事件mousePressEvent .h中的代码如下&#xff…

ip addr 或 ip address 是 Linux 系统中的一个命令,用于显示或修改网络接口的地址信息。

ip addr 或 ip address 是 Linux 系统中的一个命令&#xff0c;用于显示或修改网络接口的地址信息。这个命令是 iproute2 软件包的一部分&#xff0c;通常在现代 Linux 发行版中都是预装的。 当你运行 ip addr 或 ip address 命令时&#xff0c;你会看到系统上所有网络接口的地…

不踩雷k8s部署

一、前提 服务器规划&#xff1a; 服务器要求&#xff1a; 建议最小硬件配置&#xff1a; 2核CPU、2G内存、20G硬盘。服务器可以访问互联网&#xff0c;能够联网下载镜像。时间进行同步!!! 软件环境&#xff1a; 软件版本操作系统> CentOS 7.5Docker最新 26.1.1K8Sv1.28.1…

react Effect副作用 - 避免滥用Effect

react Effect副作用 - 避免滥用Effect react Effect副作用基础概率什么是纯函数? 什么是副作用函数?纯函数副作用函数 什么时候使用Effect如何使用Effect 避免滥用Effect根据 props 或 state 来更新 state当 props 变化时重置所有 state将数据传递给父组件获取异步数据 react…

关于配置深度学习虚拟环境(conda)的一些概念和常用命令

一、概念 下面介绍显卡驱动&#xff08;例NVIDIA GeForce&#xff09;、CUDA、cuDNN 的概念和联系。 显卡驱动 显卡驱动是封装成软件的程序&#xff0c;硬件厂商根据操作系统编写的配置文件。安装成功后成为操作系统中的一小块代码。它是硬件所对应的软件&#xff0c;计算机有…

QT学习(1)——创建第一个QT程序,信号和槽,打开关闭窗口的案例

目录 引出规范和帮助文档创建第一个Qt程序对象树概念信号signal槽slot自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式返回值mutable修饰案例 打开关闭窗口案例 总结 引出 QT学习&#xff08;1&#…

Android 集成Bugly完成线上的异常Exception收集及处理

文章目录 &#xff08;一&#xff09;添加产品APP&#xff08;二&#xff09;集成SDK&#xff08;三&#xff09;参数配置权限混淆 &#xff08;四&#xff09;初始化 &#xff08;一&#xff09;添加产品APP 一&#xff09;在个人头像 -> 我的头像 -> 新建产品 二&…

如何在 Mac 上恢复已删除的文件

点击“删除”后立即后悔&#xff1f;不用担心。我们的教程介绍了如何恢复已删除的 Mac 文件、电子邮件、iTunes 音乐等&#xff0c;即使您没有 Time Machine 备份并且无需支付软件费用。 在 macOS 中丢失文件可能会非常痛苦&#xff0c;如果您是点击删除的人&#xff0c;情况会…

关于vs2019 c++ STL 中容器的迭代器的 -> 运算符的使用,以 list 双向链表为例

&#xff08;1&#xff09;如下的结构体 A &#xff0c;若有指针 p new A() &#xff1b;则可以使用 p->m &#xff0c; p->n 解引用运算符。 struct A { int m ; int n; } 对于 STL 中提供的迭代器&#xff0c;提供了类似于指针的功能。对迭代器也可以使用 -> 运算…

【应用案例】Trinamic全闭环步进驱控方案

大家都很熟悉了传统的步进电机控制方式。如果在电机控制中采用反馈装置或者无传感器控制方式&#xff0c;将可以为那些对安全性、可靠性和精度有较高要求的运动控制应用提供更经济的选择。 大部分基于步进电机的运动系统运行在开环状态下&#xff0c;因此能够提供低成本的解决…