chengpeiquan / learning-vue3

超过 230w+ 阅读人次的《Vue3 入门指南与实战案例》，关于前端工程化开发的基础知识点，以及 TypeScript 、 Vue 3 、 Pinia 的入门学习指南。

• 纹了一条花臂，钟爱 Blackwork Tattoo 风格，第一个文身是我的琴
• 养了三只猫，从 2016 年到现在，超粘人，喜欢抱着我的花臂睡觉
• 自己跟自己玩的贝斯手，常用五弦的 MusicMan Neck-Through Bass
• 从 2018 年留长发至今，已过肩快及腰，喜欢听摇滚乐 / 新金属 / 核
• 家庭主厨，小红书的潮汕美食博主 @底迪 ，擅长烹饪粤菜和潮汕菜
• ---------------------------------------------------
• 在 2023 年出版了一本 《前端工程化：基于 Vue.js 3.0 的设计与实践》 纸质书 📖 ，欢迎购买和查看其 写作背后的故事 🏕

learning-vue3's Issues

直接就是这内容开头,是不是缺少了什么? `的 build script 无需修改 `

直接就是这内容开头,是不是缺少了什么?
的 build script 无需修改

Comments on the communication page

~

有没有考虑加入Pinia学习教程？

首先感谢learning-vue3，边学习边落地了一个vue3+vite+ts新项目。
项目最开始用的是vuex4，当然也非常能满足需求。
但是近日看到pinia简洁和随处可用的API后，果断重构了项目的store部分。
在官方文档上学习pinia过程中，发现虽然pinia是vue3优先且兼容vue2，但文档store中的大部分例子都是基于options API写法，很多composition API的写法需要自己摸索。
所以较为好奇有没有考虑加入Pinia学习教程？
万分感谢。

作者你好，

看 了你的教程很不错，有微信群吗，否考虑建一个

插件Vue VSCode Snippets不可用

Vue VSCode Snippets依赖Vetor，安装后会提示错误。
需要卸载后安装插件Vue Language Features (Volar)。

Comments on the upgrade page

~

vue3+vite谷歌可以调试吗？

之前使用vue2+webpack的时候在谷歌调试工具中是可以直接调试script中的代码的，现在换成vue3+vite之后谷歌调试工具中源代码里可以找到vue文件，但是底下会自动生成一些文件，然后在方法处加断点后会加到底下生成的代码中，没有办法对方法进行调试。从网上搜了一堆解决方案，但是目前我还没找到能用到的，请问大佬十vite没有办法在源代码调试吗？如果能在源代码中调试可以告诉一下吗。谢谢大佬，祝大佬新年快乐。

elementui-plus按需引入在vue3 script-setup ts中报错问题

// main.ts
...
app.use(ElForm).use(ElFormItem).use(ElInput).use(ElButton).use(ElCard).use(ElMessage)
...
// Login.vue
<script setup lang="ts">
// 下面这一行不加进来vscode会报下图的错，但实际run serve又完全没问题，求问🧠是插件的问题么，应该怎么设置呢。
// import { ElForm, ElMessage } from "element-plus";
...
const form = ref<typeof ElForm | null>(null);
...
ElMessage.success("Login successfull");
<script>

创建npm包那一节过于晦涩，不好懂

在看到进行本地调试的时候就有点懵了，很混乱。比如为什么会出现“path/to/xxx”这样的目录，本地测试的npm link作用机制是什么，等等

Comments on the engineering page

~

vue.chengpeiquan.com无法访问

作者您好，您的vue.chengpeiquan.com目前无法访问，请问方便修复吗

Comments on the typescript page

~

Google translate

and there is no problem with Google translation now

Translate your translated stuff back, and tell me. Dont you see a problem? 😉

谢谢作者

找遍全网都没找到过一个好的setup-script的详细教程，文章让我受益匪浅

大佬 您个人网站是用node写的后端吗

大佬这个小图标是您自己设计的吗

Comments on the component page

~

feat: 建议更新官方文档链接说明

Vue3的中文官方文档已经上线, 跳转链接还是staging的那个, 虽然现在都有重定向到新地址, 但是后续关闭后应该会有打不开的问题吧? 另外就是建议2021旧版的链接是不是也可以去掉, 看起来尤大还是主推新的官方文档, 应该也更适合作为Vue3的学习和入门指导.

单组件的编写中

Hello World!

需要借助ES6动态属性值 [key] ,要不然对象会把 activeClass1、activeClass2 直接当做属性名

Hello World!

Comments on the guide page

~

该如何用useSlots() 和 useAttrs() 替代useContext()呢？

最近一个vue版本中有这样一个提示：
useContext() has been deprecated and will be removed in the next minor release. Use useSlots() and useAttrs() instead.

我当前用在父子组件间的调用，用法是这样：

const ctx = useContext()
const msb = () => {
  ctx.emit('update:msb')
}

我在网上没找到相关说明，该如何用useSlots() 和 useAttrs()呢

Comments on the efficient page

~

typescript 相应写成了响应

typescript

@types 类型包的命名格式为 @types/ ，也就是在原有的包名前面拼接 @types ，日常开发要用到的知名 npm 包都会有响应的类型包，只需要将其安装到 package.json 的 devDependencies 里即可解决该问题。

这个地方的 响应 是不是应该为 相应？

建议代码块上面加上代码的文件名字

教程里面的部分示例代码是相互关联的，但是示例代码的最上方没有显示代码的文件名。阅读起来比较困难。

请教大佬问题

将getTableData.ts文件移动到其他路径，保存后，在还原到原路径，保存好就会爆红，重启后则可以正常

Comments on the plugin page

~

Good tutorial~

Comments on the plugin page

npm 包的开发与发布

1. 在次标题添加入口文件中: 在初次运行 npm run build 指令时, 需确保 Node.js 的版本 >= 12.0.0。利用nvm进行node版本切换,确保正确运行。
2. 在次标题生成 DTS 文件中: 添加ts的 compilerOptions 字段时, 可补增"exclude": ["./node_modules"]注释。

要不要讲一讲 pug 和 ref 糖？

如题，vsc 插件 volar 带了支持

请问 https://vue3.chengpeiquan.com 这个网站是用那个UI框架做的？

请问 https://vue3.chengpeiquan.com 这个网站是用那个UI框架做的？

希望增加一个描述通过preset生成的vue-ts-vite项目的解析

我通过preset生成项目，由于我之前写的vue2+js，新项目有的文件不是很理解其作用，比如为什么有的类型文件写在同一个目录，有的单独放在一个types文件内？等等... ... 希望可以出个文档解释一下，类似于vben的文档解释❤️，https://doc.vvbin.cn/guide/settings.html

这里是而??的DOM ?

样式表的组件作用域

Style Module

这里是不是没有说明清楚

关于教案的主题风格

您好，看了这个地址vue3.chengpeiquan.com的教案帮助很大，发现代码主题风格也相当nice，能告知一下是什么吗？谢谢了。

插件使用章节cnpm的registry域名更新

按照天猪的说法 淘宝镜像源的域名要更换了, http://registry.npm.taobao.org 域名将于 2022 年 05 月 31 日零时起停止服务. 详见https://zhuanlan.zhihu.com/p/430580607
希望能更新 避免将来可能出现的错误

请教问题，按照大佬的教程配置tsconfig和vue.config

将getTableData.ts文件移动到其他路径，保存后，在还原到原路径，保存好就会爆红，重启后则可以正常

Comments on the router page

~

How to contribute articles to this repo?

How to contribute articles to this repo?

通信那里感觉写的很一般，Composition API 用起来非常简洁

建议结合Vue3中文官网看...

Comments on the pinia page

~

大佬快来

非常感谢作者写出来这么好的文章 对我自己帮助很大、在这里支持一下。希望能保持更新，不要断更，我自己也会一直支持。大佬方便的话加个v 🤭，也希望出一期打包 自己的npm包 例如构建一个简单的vue3组件库 发布到npm 、 构建自己的函数工具库发布到npm