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,一经查实,立即删除!

相关文章

Gone是什么—— 一个轻量的,基于Golang的,依赖注入框架

我从头到尾实现了一个Golang的依赖注入框架&#xff0c;并且集成了gin、xorm、redis、cron、消息中间件等功能&#xff1b;自己觉得还挺好用的&#xff0c;推荐给你&#xff01;也欢迎一起维护&#xff01; github地址&#xff1a;https://github.com/gone-io/gone 文档地址&am…

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:官网下载 为方便同学…

【Web前端】JavaScript基本知识

1.Javascript简介 简称JS&#xff0c;是当前最流行、应用最广泛的客户端脚本语言&#xff0c;用来在网页中添加一些动态效果与交互功能。在web开发领域有着举足轻重的地位。 2.JavaScript包含内容 核心ECMAScript(es):提供语言的语法和基本对象(数据类型、运算符、流程控制等…

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;不能是其它类…

数据结构之图的学习

为自己复习时使用 图、树和线性表在数据结构中有显著的区别&#xff0c;主要体现在以下方面&#xff1a; 数据元素名称&#xff1a; 线性表&#xff1a;其中的数据元素被称为元素。树&#xff1a;数据元素被称为结点。图&#xff1a;数据元素被称为顶点&#xff08;Vertex&…

数组中求本元素临近下一个比它大的数(c实现)

题目描述 有一个数组&#xff0c;请找出数组中每个元素的下一个比它大的元素。 要求&#xff1a; 给定一个int数组arr以及数组大小为n&#xff0c;请返回一个int数组,代表每个元素比它大的下一个元素&#xff0c;若不存在返回-1&#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;通过异步回调函数的方式实现非阻塞的处理。事件循环会在主线程上…

代码随想录算法训练营第三十九天| 62.不同路径 63. 不同路径 II

62.不同路径 题目链接 解题方法 1.确定dp[i][j]及下标的含义&#xff1a;dp[i][j]表示到达目的地的路径数&#xff0c;i表示行,j表示列 2.确定递推公式dp[i][j]dp[i-1][j]dp[i][j-1] 3.初始化&#xff1a;第一行和第一列 4.确定遍历顺序&#xff1a;从上往下和从左向右…

信创替代后的设备处置

信创替代后的设备处置 在信创项目中替换下来的设备&#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 [鹏城杯 …

Flink面试整理-如何提高Flink处理数据的效率和吞吐量

提高 Apache Flink 处理数据的效率和吞吐量通常涉及对配置、代码设计和资源管理的优化。以下是一些关键的策略: 1. 优化并行度 调整并行度:并行度应根据可用的硬件资源(如 CPU 核心数)进行调整。不同的算子可以有不同的并行度。确保数据均衡分配:避免某些任务过载而其他任…

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

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

Linux定时任务备份文件并传输到指定服务器

需求&#xff1a;需要将本服务器上的文件压缩后发送到指定的备份服务器上&#xff0c;并且只保留最新的两个 思路&#xff1a; 1.将需要备份的文件夹压缩 tar -zcvf 压缩后的名字.tar.gz 压缩的文件夹 2.通过scp命令传输压缩文件到指定的服务器 scp 压缩文件 root服务器地…

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…