#### Installnpm install vue3-lazy -S#### 引入 main.jsdemo: import { createApp } from ‘vue‘import App from ‘./app‘import lazyPlugin from ‘vue3-lazy‘const app = createApp(App)app.use(lazyPlugin, { loading: ‘loading.png‘, error: ‘error.png‘})app.mount(‘#app‘)实例：createApp(App).use(store).use(router).use(lazyPlugin, { loading: require(‘@/assets/images/default.png‘)})#### 使用<ul> <...
1：首先 查看node 版本node -v npm install stable 3:初始化 vitejs 然后就会叫你选择 语言直接选 vue-ts 然后cd 进入项目 初始化即可 npm init @vitejs/app 项目名称：vite-vue3-ts cd vite-vue3-tsnpm installnpm run dev 打开成功这个页面就说明成功了 4：打开项目 打开 vite-config.ts 文件，修改指向目录import { defineConfig } from ‘vite‘
import vue from ‘@vitejs/plugin-vue‘
import { resolve } ...
地址：https://github.com/LarchLiu/vue3-video-player这个上面有例子，可以参考。如果出现问题： npm install @cloudgeek/playcore-hls --save效果： 原文：https://www.cnblogs.com/qinghuaL/p/14772806.html
报错原因：vue-property-decorator目前不支持vue2以及它的ts定义，所以暂时无法让它和vue3一起使用。原帖： https://github.com/kaorun343/vue-property-decorator/issues/294解决方法：1.使用vue2搭建项目2.vue3中使用选项式属性定义或者CompositionAPI完成属性的注入都是比较正式的写法，而且通用，没有必要使用额外的语法糖。原文：https://www.cnblogs.com/cindy79/p/15245977.html
1. Vue 3.0 性能提升主要是通过哪几方面体现的？1.响应式系统提升vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时...
需求： 1、自定义多选样式 2、多选值为对象数组 3、已选项侧边显示，可删除，并关联“备选”的选择状态 4、此示例为组件，数据为父组件传递而来难点：多选项的值为对象数组，如果直接使用对象值进行匹配，由于对象的指引不同，所以即使完全相同的值，匹配也不相同。也就导致多选项的值匹配失败，显示为空。思路： 1、备选：多选框的显示使用对象数组，值使用id数组匹配 2、已选：选择“备选”生成的值为id数组，...
插件使用通过导出一个含有install方法的对象，即可作为插件使用，install方法始终接收一个app对象--createVue的返回值，所以app即是全局vue实例。配置全局属性// properties.js
export default {install(app) {app.config.globalProperties.$test = {a: "aa",};},
};
// main.js
import properties from "@/plugins/properties.js";
app.use(properties)
配置全局组件// components/index.js
import HelloWorld from "./HelloWorld...
Vue3停止支持IE的几点原因IE对Proxy不支持，Vue要使用Proxy => Evan You 带着 Vue3抛弃IEIE是一个过去式，微软自己都开发了一个Edge => 自己公司抛弃 IE一些政府机关网站（遗留系统）以前很喜欢IE,现在会提示使用Chrome => 抛弃IE综上前端er抛弃IE , 一种趋势！思考微软靠着强制携带IE浏览器来占领市场的力量在浏览器大战年代所向披靡，归其原因是市场的地位。但是时间是会将金子掏出来的，看现在的Chrome浏览器！！ 如果能...
Vue3.0全家桶最全入门指南 - 3.x跟2.x的其他差异：https://juejin.cn/post/6867123749565497358#heading-10Vue3.0 新特性以及使用变更总结(实际工作用到的)：https://blog.csdn.net/xgangzai/article/details/114957652原文：https://www.cnblogs.com/ziyoublog/p/14749229.html
vue3用composition api 取代了之前的options api，并且加强了支持typescript，另代码可读性和可改性更强了，用习惯了setup函数真的可以说句，真香。但是不可避免的，需要趟一些雷，比方说element-plus的表单验证功能。由于setup里取消了this获取实例，就突然变得不知所措。以下是我填坑的一些经验。先看element-plus官方文档中的验证写法。methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) ...
vue3中在setup中并没有this,所以路由跳转和传参的方式都要有所改变1.路由跳转1.1 引入import { useRouter } from ‘vue-router‘1.2在setup中创建路由对象 ，语法以前vue2类似，这里携带id的路由参数setup(){ const router = useRouter(); function goSeekHelpDetail (){ router.push({ name:‘taskSeekHelpDetail‘, query:{ id: ‘1‘ } }) }; return{ } }2.这里获取路...
retive的错误用法<template><div>司藤的信息==>{{ objInfo }}<button @click="handerHttpServe">获取远端的值</button></div>
</template>
<script>
import { reactive } from ‘@vue/reactivity‘
export default {setup () {let objInfo=reactive({ })function handerHttpServe(){setTimeout(()=>{objInfo={name:‘司藤‘,sex:‘女‘,}},400)}return {objInfo,handerHttpServe}}
}
</script>
为什么无法更新视图呢？？我们都知道...
Test1.vue<template><div class="test1"><h1>This is a test1 page</h1><Test1Top :add-person="addPerson"/><Test1Center :persons="persons":del-person="delPersonWithIndex":selected-all-persons="selectedAllPerson"/><Test1Bottom :persons="persons":del-checked-persons="delCheckedPersons"/></div></template><script>// @ is an alias to /srcimport Test1Top from ‘@/components/Test1Top.vue‘;
import Test1Center...
刚开始我用vue create hello-world 命令新建项目然后用向下箭头选中Manually select features配置项，最后点击Enter，没起作用，项目还是按照默认的配置default（babel,eslint）走；解决方法：按官网提示的 使用winpty vue.cmd create hello-world 命令创建项目，向下箭头选中Manually select features配置项，最后点击Enter会弹出可配置项。官网提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须...
非父子组件的通信Provide和InjectProvide和Inject基本使用Provide和Inject函数的写法处理响应式数据A pp.vue<template><div><home></home><button @click="addName">+name</button></div>
</template><script>import Home from "./Home.vue";import { computed } from "vue";export default {components: {Home,},// 为了使用this。，写成函数provide() {return {name: "why",age: 18,// this.names.length：一次性赋值，不会改变/...
