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

最新推荐文章于 2024-05-28 16:10:19 发布

大白菜1号

最新推荐文章于 2024-05-28 16:10:19 发布

阅读量767

点赞数 24

分类专栏： uniapp 文章标签： vue.js 钉钉前端

本文链接：https://blog.csdn.net/men_gqi/article/details/138837894

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

一、 vue+vant开发项目

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

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

vue3对应文档：https://vant-ui.github.io/vant/#/zh-CN
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-bar
      title="标题"
      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-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-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>