lishihuan大约 2 分钟

H5创建vue项目

https://blog.csdn.net/qq_44146522/article/details/137686746open in new window

  • 引入vue
  • elementUI
  • axios
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"
    />
  </head>
  <body>
    <div>
      <div>{{info}}</div>
      <input type="button" value="按钮" @click="onClick()" />
      <el-row gutter="20">
        <el-col style="margin: 10px 0" span="6">
          <el-card>
            <img :src="itemObj.url" width="100%" />
            <p>{{itemObj.title}}</p>
            <p style="font-size: 12px">
              ￥{{itemObj.price}} <s>{{itemObj.oldPrice}}</s>
              <span style="float: right">销量:{{itemObj.saleCount}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>

      <el-button type="primary" round @click="click2">主要按钮</el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </div>
  </body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<!-- 最好下载用本地的方式引入 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.6/index.min.js"></script>
  <script>
    let v = new Vue({
      el: "body>div", // 指定 Vue 实例的挂载点为 body>div。
      data: {
        info: "事件绑定",
        itemObj: {
          title: "测试",
          price: 20,
          oldPrice: "元",
          saleCount: 10,
        },
      },
      methods: {
        onClick() {
          alert("按钮点击了！");
          axios
            .get("http://192.168.2.231:19091/stage-api/code")
            .then((res) => {
              const code = res.data.code;
              console.log(this.info);
            })
            .catch((error) => {
              console.log(error);
            });
        },
        click2() {
          this.$notify({
            title: "成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
        },
      },
    });
  </script>
</html>
  • 如果讲文件放到本地

需要注意的是：需要less.min.js 引入放到本地的less文件下面否是无法正常编译less文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>文字转图片</title>
    
    <script src="./js/vue.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="./elementUi2.15.9/index.css"/>
    <link rel="stylesheet/less" type="text/css" href="./css/index.less"/>
    <!-- axios -->
    <script src="./js/axios.min.js"></script>
    <!-- import elementUi  -->
    <script src="./elementUi2.15.9/index.min.js"></script>
    <!-- 需要在本地lesse文件下面引入，否则无法正常编译less文件-->
    <script src="./js/less.min.js"></script>
</head>

<body>
<div class="container ">内容</div>
</body>
<script>

	let v = new Vue({
		el: "body>div", // 指定 Vue 实例的挂载点为 body>div。
		data: {
			imgList: [],
			contentData: '', // 用户输入的文本内容，指需要转图片的文本
			axiosBaseUrl: 'https://dashscope.aliyuncs.com/api/v1',// 请求前缀
			imageDescriptions: [],
			activateImageDescriptions: 0 // 默认当前展示的图片描述索引
		},
		mounted() {
		},
		computed: {
			getCurrentImgDescription() {
				return this.imageDescriptions[this.activateImageDescriptions];
			}
		},
		methods: {
			submit() {
				if (!this.contentData) {
					this.$message({
						message: '请输入您对图片的描述....',
						type: 'warning'
					});
					return;
				}
				const options = {
					method: 'POST',
					url: this.axiosBaseUrl + '/services/aigc/text2image/image-synthesis',
					data: {
						prompt: this.contentData, // 用户输入的内容（需要转换图片的文字描述）
					}
				};
				axios.request(options).then(response => {
					console.log(response.data?.output?.results);
					this.imgList = response.data?.output?.results.map(item => item.url) || [];
				}).catch(function (error) {
					this.imgList = [];
					this.$message({
						message: '加载失败，请重试....',
						type: 'warning'
					});
					console.error(error);
				});
			},

		},
	});
</script>
</html>