方案一，通过ast解析console 将变量名放在console后面，奈何esbuild不支持ast操作(不是我不会 哈哈哈哈), 故放弃。
方案二，既然vue能代理对象，那么console是不是也能被代理。
第一步代理console,将原始的console,用全局变量originConsole保存起来，以便后续使用 withLogging 函数拦截console.log 重写log参数
js复制代码const originConsole = window.console;
var console = new Proxy(window.console, {
get(target, property) {
if(property === 'log') {
return withLogging(target[property])
}
return target[property] },
})
Vite是一种新型的前端构建工具，它能显著改善前端开发体验。
Vite由两个主要部分组成：
dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMRVite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。
什么是npm？npm是nodejs上集成的原第三方包管理工具
npm config get registry
Vue 要求将传递给组件的任何数据显式声明为 props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的合同一样，确保组件按预期使用。
让我们来探讨一下这个强大的工具，它可以帮助我们在开发和调试过程中减少错误并增加我们的信心。
验证原始类型就像为原始类型构造函数设置类型选项一样简单。
export default {
props: {
// Basic type check
// (`null` and `undefined` values will allow any type)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with a default value
propD: {
type: Number,
default: 100
},
}
}
本文主要是讲解了组件传值过程中的两个容易犯的小错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
};
},
template: `
<div>
<counter :count = "num"/>
</div>
`
});
// 错误示例 对父组件传递过来的值做操作时，发现操作无效，
app.component('counter',{
props: ['count'],
template: `<div @click="count+=1">{{count}}</div>`
});
// 正确示例 复制一份父组件传递过来的值，对我们自己的值进行操作：
app.component("counter", {
props: ["count"],
data() {
return {
mCount: this.count
};
},
template: `<div @click="mCount+=1">{{mCount}}</div>`
});
const vm = app.mount("#root");
</script>
</html>