Giter Club home page Giter Club logo

learning-vue3's Introduction

learning-vue3

Vue 3.0 从 2020 年 9 月份中旬正式发布,到 2022 年 2 月份代替 Vue 2 成为 Vue 的默认版本,经过长达一年半的市场验证,已经证明了它可以完美地支持常见的企业需求,适合投产使用,未来会被越来越多的企业所采用,只会 Vue 2 将远远不能满足企业的技能要求。

本书以 Vue.js 的 3.0 版本为核心技术栈,围绕 “前端工程化” 和 TypeScript 的知识点展开讲解,读者可以收获到:

  1. 了解如何入门前端工程化开发,掌握 Node.js 和 npm 的使用
  2. 掌握前端领域多年来趋势走高、带有类型支持的 TypeScript 语言
  3. 上手主流前端框架 Vue.js 的全新版本,并且在遇到常见问题时知道如何解决

本书的每一个小节都融入了笔者多年的开发实践经验,大部分知识点都搭配了通俗易懂的讲解和可实现的代码案例,在阅读的过程中可以亲自敲代码加强学习印象,毕竟上手一个新技术栈最快的方法,就是一边 Reading 一边 Coding 。

适合人群

本书作为一本入门类教程,主要面向以下读者人群:

  1. 掌握了基础的 HTML 页面编写知识,想学习一个主流前端框架的新手前端工程师
  2. 已经学会了 Vue 2 ,面对 Vue 3 的大版本更新,想快速上手使用的前端工程师
  3. 非职业前端开发,但涉及前端的工作,需要掌握一个主流前端框架的全栈工程师

内容说明

本书根据笔者多年的前端开发经验和一线团队管理经验,将 Vue 3 的知识点按照工程师做项目的顺序梳理成章,一步一步帮助工程师入门前端工程化和 Vue 3 的开发。

书中包含了很多在构建项目过程中容易遇到的问题点和解决方案,对 Vue 3 和 Vue 2 差异化较大的功能点还进行了版本之间的写法对比。

这一点和各个技术栈的官方文档有比较大的不同,官方文档更适合作为一本工具书,方便在需要的时候对 API 进行检索查询。

目前笔者所带领的前端团队已经全员使用 TypeScript 和 Vue 3 进行日常的开发工作,团队成员的学习过程都非常顺利,各位开发者可放心阅读。

开始阅读

点击在线阅读:https://vue3.chengpeiquan.com/

License

MIT License © 2020 chengpeiquan

learning-vue3's People

Contributors

19a avatar ad-feiben avatar awxiaoxian2020 avatar chengpeiquan avatar erhuabushuo avatar hellodword avatar huzhengen avatar justforuse avatar makonike avatar mao-dou avatar rainmong avatar sad912 avatar sean-lgt avatar senlizishi avatar yoke2002 avatar yyx990803 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

learning-vue3's Issues

Google translate

and there is no problem with Google translation now

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

Comments on the plugin page

npm 包的开发与发布

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

vue3+vite谷歌可以调试吗?

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

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

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

请教大佬问题

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

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

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

大佬快来

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

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

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

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

谢谢作者

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

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

作者你好,

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

typescript 相应写成了响应

typescript

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

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

单组件的编写中

Hello World!

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

Hello World!

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.