小编Yan*_*lin的帖子

我尝试启动一个全新的 Vue 项目，并想向其中添加 Bootstrap。

一切都很好，但是当我尝试启动它时，出现以下错误：

node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

我从npm init vue@latest\n开始，之后我做了一个npm install。\n要安装我制作的bootstrap npm install bootstrap bootstrap-vue。\n如果此时我进行了npm run，一切都很好，但是当我尝试在我的项目中导入bootstrap时，我收到错误。这是我的使用方法：

import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport { BootstrapVue } from 'bootstrap-vue'\n\nimport App from './App.vue'\nimport router from './router'\n\nimport './assets/main.css'\n\nconst app = createApp(App)\n\nVue.use(BootstrapVue)\n\napp.use(createPinia())\napp.use(router)\n\napp.mount('#app')\n

这是错误的踪迹：

 npm run dev\n\n> test@0.0.0 dev C:\\Users\\ycolin\\projet\\test\n> vite\n\n\n  VITE v4.0.4  ready in 2204 ms\n\n  \xe2\x9e\x9c  Local:   http://127.0.0.1:5173/\n  \xe2\x9e\x9c  Network: …

对于 VueJS 项目，我有一个带有 HTML5<video>标签的视频播放器。在此视频中，我想在左下角显示一些模糊点。

我使用的是画布、纯 CSS 方法，但这些都不起作用。

在CSS中：我在视频前面的div上使用了过滤器：blur(20px)，但它不起作用，模糊影响div的边框而不是中心。

css 中进行模糊测试的图像

对于画布，我们尝试了同样的方法，但我从未在其上得到任何单一的模糊效果

我只需要对图像的红色部分进行模糊效果：

红色部分需要模糊处理

<template>
<div>  
  <div class="contenant">
    <input  type='range' v-model="width" min="0" max="1281" value="0" >
    <img id='image' class="img" src="image1.jpg" alt="test">
    <div id='filtre' v-bind:style="{ width: width + 'px'}"></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    width: 0,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contenant {
  width: fit-content;
}

#filtre {
  height: 96%;
  background-color: red;
  position: …