使用vue.js第三版本vite构建一个简单的在线敲击木鱼网站Demo

使用vue.js第三版本vite构建一个简单的在线敲击木鱼网站Demo!这个网站代码是可以正常执行的。已经解决了所有的已知的错误问题。大家可以放心演示使用。

1：使用vite框架构建好自己一个初始化的项目。

复制代码

npm create vite@latest woodfish-app

2：进入项目文件夹，安装一下vue.js ，并执行启动，测试一下是否正常打开。

复制代码

cd woodfish-app
npm install

3：下面是核心的业务代码

3-1：业务敲击木鱼的模块文件WoodFish.vue的代码内容

复制代码

<template>
  <div class="container">
    <div @click="incrementCount" class="clickable">
      <img src="/img/muyu.gif" alt="木鱼" />
    </div>
    <p>点击次数: {{ count }}</p>
    <p><button @click="clearCount">清零次数</button></p>
    <audio ref="audio" :src="audioSrc" preload="auto"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0, // 计数器
      audioSrc: "/audio/click_muyu.mp3" // 音效文件路径
    };
  },
  methods: {
    incrementCount() {
      // 增加计数器
      this.count += 1;
      // 播放音效
      this.playSound();
    },
    playSound() {
      const audio = this.$refs.audio;
      audio.play();
    },
    clearCount() {
      this.count = 0;
    }
  }
};
</script>

<style scoped>
.container {
  text-align: center;
  margin-top: 50px;
}

.clickable {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 20px;
}

.clickable img {
  width: 200px;
  height: 200px;
}

p {
  font-size: 20px;
  font-weight: bold;
  color: #555;
}
</style>

3-2：App.vue的内容介绍：

复制代码

<script setup>
import WoodFish from './components/WoodFish.vue';
</script>
<template>
  <WoodFish></WoodFish>
</template>
<style scoped lang="scss">
</style>

3-3：main.js的内容介绍

复制代码

import { createApp } from 'vue'

import App from './App.vue'

//引入持久化插件
const app = createApp(App)
app.mount('#app')

3-4：index.html的内容介绍：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线祈福木鱼敲击</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

故障提示解决办法：可能会启动报错，说缺少js的代码编译模块，需要自己额外创建一个vite.config.js在根目录下面，

配置内容如下：

复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
})

需要自己安装一下插件：

复制代码

1、下载@vitejs/plugin-vue：npm i @vitejs/plugin-vue


2、将导入的 @vitejs/plugin-vue 插件添加到项目的插件列表中：

vite.config.js文件中，加入：
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
})

静态资源调用，我是存在了public下面了，所以安装我写的代码是可以正常调用起来的

执行结果如下图所示：

点击这个图片，会自动累加计算数字，

点击清零按钮，会复原到0.

下一次改成动态上传数据到后端数据库内容。感谢大家的互动。交流。