Coder Social home page Coder Social logo

chengpeiquan / learning-vue3 Goto Github PK

View Code? Open in Web Editor NEW
1.0K 1.0K 121.0 7.12 MB

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

Home Page: https://vue3.chengpeiquan.com

License: MIT License

TypeScript 61.16% Vue 27.25% CSS 1.17% Markdown 10.42%
learning-vue3 vue vue-3 vue-cli vue3 vue3-typescript vuejs

learning-vue3's Issues

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

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

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>

git

该如何用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()呢

vue3+vite谷歌可以调试吗?

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

谢谢作者

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

Comments on the plugin page

npm 包的开发与发布

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

作者你好,

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

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

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

单组件的编写中

Hello World!

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

Hello World!

Google translate

and there is no problem with Google translation now

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

typescript 相应写成了响应

typescript

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

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

请教大佬问题

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

大佬快来

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.