标签 VUE 下的文章

vue 简单实现购物车：商品基础信息最终的 html 文件 + 商品计数器的组件处理，实现了购物车；

2024-08-11




<template>
  <div id="app">
    <h1>购物车示例</h1>
    <div v-for="(item, index) in cart" :key="item.id">
      <div>
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
        <span>
          <button @click="decrementItem(index)">-</button>
          {{ item.quantity }}
          <button @click="incrementItem(index)">+</button>
        </span>
        <span>{{ item.price * item.quantity }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      cart: [
        { id: 1, name: '商品A', price: 100, quantity: 1 },
        { id: 2, name: '商品B', price: 200, quantity: 1 }
      ]
    }
  },
  methods: {
    incrementItem(index) {
      this.cart[index].quantity++;
    },
    decrementItem(index) {
      if (this.cart[index].quantity > 1) {
        this.cart[index].quantity--;
      }
    }
  }
}
</script>

这个简单的Vue应用展示了如何创建一个购物车组件，其中包含商品列表、商品单价、数量以及总价。用户可以通过点击按钮来增加或减少商品数量。这个例子教会了如何在Vue中处理简单的状态管理和用户事件。

- 阅读更多 -

vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

System

2024-08-11

所有,html

在Vue项目中嵌套静态HTML项目并实现数据交互，可以通过以下步骤实现：

在Vue项目中创建一个HTML文件，并将其放在Vue项目的静态资源目录（通常是public或static）中。
在Vue组件中，使用<iframe>标签嵌入这个HTML文件。
通过postMessage API在Vue组件和嵌套的HTML页面之间发送数据。

以下是具体实现的示例代码：

Vue组件中的代码：




<template>
  <div>
    <!-- 嵌入静态HTML页面 -->
    <iframe id="static-iframe" :src="iframeSrc" @load="iframeLoaded"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      iframeSrc: process.env.BASE_URL + 'static-page.html'
    };
  },
  methods: {
    iframeLoaded() {
      // 当iframe加载完成后发送数据
      const message = { greeting: 'Hello from Vue app!' };
      this.$refs.iframe.contentWindow.postMessage(message, '*');
    }
  }
};
</script>

静态HTML页面中的代码 (static-page.html)：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Static Page</title>
  <script>
    // 监听从Vue应用发送来的消息
    window.addEventListener('message', function(event) {
      if (event.origin !== window.location.origin) return;
      
      const data = event.data;
      console.log('Received message:', data);
      // 处理数据...
    });
  </script>
</head>
<body>
  <h1>This is a static HTML page.</h1>
</body>
</html>

在这个例子中，Vue组件中的<iframe>标签引用了位于Vue项目静态资源目录中的静态HTML页面。一旦iframe加载完成，Vue组件通过postMessage方法向iframe内部发送消息。静态HTML页面通过监听message事件来接收和处理这些消息。

请确保在实际部署时，静态资源的路径正确，并且遵循同源策略或者正确设置postMessage的允许来源。

- 阅读更多 -

vue项目打开地址默认是http://0.0.0.0:8080/的问题解决

System

2024-08-11

所有,css3

在Vue项目中，默认的开发服务器地址通常是http://localhost:8080或者http://0.0.0.0:8080。如果你遇到了打开地址默认是http://0.0.0.0:8080的问题，可能是以下原因导致的：

项目配置问题：检查vue.config.js文件中的devServer配置，确保没有错误地设置host。
环境变量问题：检查是否有环境变量影响了服务器启动的配置。
本地hosts文件：确保没有错误的条目影响0.0.0.0解析。
网络配置问题：检查网络设置，确保没有阻止0.0.0.0地址的访问。

解决方法：

检查并修改vue.config.js中的devServer.host选项，如果设置为0.0.0.0，将其改为localhost或者你需要的具体IP地址。
```
// vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080
  }
};
```
如果是环境变量问题，检查环境变量，确保没有错误地设置了影响服务器启动的变量。
检查本地hosts文件（在Windows系统中位于C:\Windows\System32\drivers\etc\hosts，在Unix/Linux系统中位于/etc/hosts），确保没有错误的条目。
检查网络配置，确保没有任何设置阻止了对0.0.0.0地址的访问。

如果以上步骤不能解决问题，可能需要更详细的错误信息来进行具体的问题诊断。

- 阅读更多 -

vue可拖拽移动放大缩小的弹框组件

System

2024-08-11

所有,css3

在Vue中创建一个可拖拽并且可以放大缩小的弹框组件，你可以使用基于Vue的第三方库如vuedraggable和vue-resizable。以下是一个简单的例子：

安装所需库：




npm install vuedraggable vue-resizable

创建Vue组件：




<template>
  <div>
    <draggable :options="dragOptions" @start="drag=true" @end="drag=false">
      <resizable :enable-native-drag="!drag" :class="{box: true, dragging: drag}" :style="style" @resizing="setSize">
        <div v-if="showHeader" class="header">
          <slot name="header">Header</slot>
        </div>
        <div class="content">
          <slot>Content</slot>
        </div>
      </resizable>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
import { Resizable } from 'vue-resizable';
 
export default {
  components: {
    draggable,
    Resizable
  },
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    w: {
      type: Number,
      default: 200
    },
    h: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      drag: false,
      size: {
        width: this.w,
        height: this.h
      }
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "name",
        disabled: false,
        ghostClass: "ghost"
      };
    },
    style() {
      return {
        width: `${this.size.width}px`,
        height: `${this.size.height}px`
      };
    }
  },
  methods: {
    setSize(event) {
      this.size.width = event.size.width;
      this.size.height = event.size.height;
    }
  }
};
</script>
 
<style scoped>
.box {
  position: absolute;
  background: #eee;
  border: 1px solid #ccc;
}
 
.header {
  padding: 10px;
  background: #ddd;
  cursor: move;
  border-bottom: 1px solid #ccc;
}
 
.content {
  padding: 10px;
  cursor: move;
}
 
.dragging {
  cursor: move;
  z-index: 100;
}
 
.ghost {
  opacity: 0.5;
  background: #ccc;
}
</style>

在父组件中使用这个弹框组件：




<template>
  <div id="app">
    <draggable-resizable-box :w="200" :h="100">
      <template #header>Custom Header</template>
      <p>Custom content...</p>
    </draggable-resizable-box>
  </div>
</template>
 
<script>
import DraggableResizableBox from './components/DraggableResizableBox.vue';
 
export default {
  components: {
    DraggableResizableBox
  }
};
</script>
 
<style>
#app {
  position: relative;
}
</style>

确保你已经安装了所需的库，并在你的主组件或应用

- 阅读更多 -

Vue3 + Vite + TS + Tailwind CSS 项目模板

System

2024-08-11

所有,css




<script setup lang="ts">
import { ref } from 'vue'
import { PlusIcon } from '@heroicons/vue/solid'
 
// 定义一个响应式变量
const message = ref('Hello, World!')
</script>
 
<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <div class="flex flex-col items-center justify-center max-w-2xl">
      <span class="text-6xl font-extrabold text-blue-600">{{ message }}</span>
      <button class="btn btn-primary" @click="message = 'Hello, Vue!'">
        <PlusIcon class="h-5 w-5" /> Add Message
      </button>
    </div>
  </div>
</template>
 
<style scoped>
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>

这个简单的Vue 3组件模板展示了如何使用Vue 3的<script setup>语法，TypeScript和Tailwind CSS来创建一个响应式的应用程序。它包括了一个响应式变量message，一个按钮用于更新这个变量，以及一个Tailwind CSS样式的按钮。这个例子简单且直接地展示了如何将三者结合起来。

- 阅读更多 -

vue3配置stylelint，利用stylelint让css更加规范

System

2024-08-11

所有,css

在Vue 3项目中配置Stylelint，首先需要安装stylelint及其相关的插件。以下是安装和配置的步骤：

安装stylelint及其相关插件：




npm install --save-dev stylelint stylelint-config-standard stylelint-webpack-plugin

在项目根目录下创建一个.stylelintrc.js配置文件：




module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    // 在这里添加或覆盖规则
  }
};

如果你使用的是webpack，可以配置stylelint-webpack-plugin：




// webpack.config.js
const StylelintPlugin = require('stylelint-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [
    new StylelintPlugin({
      files: ['**/*.{vue,css,scss,sass}'],
    }),
  ],
  // ...
};

如果你使用的是Vite，可以通过Vite插件进行配置：
首先安装vite-plugin-stylelint：




npm install --save-dev vite-plugin-stylelint

然后在Vite配置文件中添加插件：




// vite.config.js
import stylelintPlugin from 'vite-plugin-stylelint';
 
export default {
  plugins: [
    stylelintPlugin({
      files: ['**/*.{vue,css,scss,sass}'],
    }),
  ],
};

以上步骤完成后，Stylelint将会在你运行构建或开发服务器时对CSS文件进行lint检查，帮助你维护代码风格的一致性。

- 阅读更多 -

Vue.js 与 Ajax（vue-resource）的集成应用

System

2024-08-11

所有,ajax




<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$http.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.body;
        })
        .catch(error => {
          console.error('There was an error fetching the data: ', error);
        });
    }
  }
};
</script>

这个例子展示了如何在Vue组件中使用created生命周期钩子来获取数据，并在模板中使用获取到的数据。同时，使用了vue-resource插件来进行Ajax请求。这是一个简单的应用程序，但它展示了如何将Ajax请求整合到Vue.js应用程序中。

System

2024-08-11

所有,ajax

在Vue中，你可以使用axios库来上传文件和提交表单数据。以下是一个简单的例子：

安装axios（如果你还没有安装）：




npm install axios

在你的Vue组件中使用axios上传文件和表单数据：




<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="formData.name" placeholder="Name">
      <input type="file" @change="selectFile">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      formData: {
        name: '',
        file: null
      }
    };
  },
  methods: {
    selectFile(event) {
      this.formData.file = event.target.files[0];
    },
    submitForm() {
      const formData = new FormData();
      formData.append('name', this.formData.name);
      formData.append('file', this.formData.file);
 
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // Handle response
        console.log(response);
      })
      .catch(error => {
        // Handle error
        console.log(error);
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个简单的表单，包含一个文本输入和一个文件输入。我们使用FormData来存储表单数据，并在用户提交表单时调用submitForm方法。在submitForm方法中，我们将文件和表单数据通过axios发送到服务器的/upload路径。

请注意，你需要根据你的服务器端点和API要求调整URL和headers。

- 阅读更多 -

vue3+pdf.js读取pdf文件内容信息

System

2024-08-11

所有,javascript

在Vue 3中使用pdf.js读取PDF文件内容信息，你需要先安装pdf.js库：




npm install pdfjs-dist

然后，你可以创建一个Vue组件来读取和显示PDF文件的内容信息。以下是一个简单的例子：




<template>
  <div>
    <div v-if="pdfDocument">
      <h1>PDF内容信息</h1>
      <!-- 这里可以添加更多的内容信息显示 -->
      <p>页数: {{ pdfDocument.numPages }}</p>
    </div>
  </div>
</template>
 
<script>
import { getDocument } from 'pdfjs-dist/webpack';
 
export default {
  data() {
    return {
      pdfDocument: null,
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      try {
        // 用getDocument加载PDF
        this.pdfDocument = await getDocument(this.pdfUrl).promise;
      } catch (error) {
        console.error('Error loading PDF: ', error);
      }
    },
  },
};
</script>

在这个例子中，我们在组件的mounted钩子中调用loadPdf方法来异步加载PDF文件。加载完成后，我们将pdfDocument设置为返回的PDF文档对象。然后，你可以在模板中使用这个对象来访问PDF的内容信息，如页数。

请注意，你需要根据你的项目具体配置和需求调整这个例子。例如，你可能需要处理PDF的页面内容，这就涉及到遍历每一页并获取页面的详细信息。

- 阅读更多 -

vue3+Echarts+Nodejs实现动态数据可视化

System

2024-08-11

所有,javascript




// Vue 3 组件中获取数据并使用 ECharts 展示
<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
 
const chart = ref(null);
const option = ref({
  title: {
    text: '动态数据示例'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [],
    type: 'line'
  }]
});
 
onMounted(() => {
  const chartInstance = echarts.init(chart.value);
  getData();
  setInterval(() => {
    getData();
  }, 5000); // 每5秒钟获取一次数据
 
  function getData() {
    axios.get('/api/data') // 假设有一个API接口返回数据
      .then(response => {
        const data = response.data;
        option.value.xAxis.data = data.categories;
        option.value.series[0].data = data.values;
        chartInstance.setOption(option.value);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }
});
</script>

这个代码实例展示了如何在Vue 3组件中使用ECharts展示从Node.js后端API动态获取的数据。它使用了onMounted生命周期钩子来初始化ECharts实例，并通过setInterval定时获取新数据，然后更新ECharts图表。这个例子简洁地展示了如何将ECharts和Vue 3结合，实现动态数据可视化。

- 阅读更多 -