[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8747":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},8747,"intro-to-vue","sdras\u002Fintro-to-vue","sdras","Workshop Materials for my Introduction to Vue.js Workshop","https:\u002F\u002Ffrontendmasters.com\u002Fworkshops\u002Fvue-v2\u002F",null,"Vue",2767,574,83,185,0,57.28,false,"main",true,[22,23,24,25,26,27,28,29,30,31],"introduction-to-nuxt","introduction-to-vue","nuxt","vue","vue-animations","vue-cli","vue-directive","vue-methods","vue-watchers","vuex","2026-06-12 04:00:41","# [Introduction to Vue.js 3 Course](https:\u002F\u002Ffrontendmasters.com\u002Fcourses\u002Fvue-3\u002F) Materials\n\nAuthor: Sarah Drasner\n\nFYI The previous version [Vue 2 course is available here.](https:\u002F\u002Ffrontendmasters.com\u002Fcourses\u002Fvue\u002F)\n\nThis repo houses the materials and resources for the Introduction to Vue.js course on Frontend Masters.\n\nMost of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6, and resources like Vue.js, both prod and dev versions, codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. There are more true-to-life build process examples, in the VueCLI, Nuxt, and Vuex Resource Sections. It's encouraged to watch the lecture to learn how to set up the builds yourself, though.\n\n- Here are the [Vue chrome devtools](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fvuejs-devtools\u002Fnhdogjmejiglipccpnnnanhbledajbpd?hl=en)\n- Here are the [Vue 3 beta chrome devtools](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fvuejs-devtools\u002Fljjemllljcmogpfapbkkighbhhppjdbg)\n- Here is the codepen debugger [chrome extension](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fcodopen\u002Fagnkphdgffianchpipdbkeaclfbobaak)\n- Here is [Vetur](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=octref.vetur) for VS Code\n- Here are the snippets I'll be using [vue vscode snippets](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=sdras.vue-vscode-snippets)\n- Here is my [Vue Extension Pack for VS Code](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=sdras.vue-vscode-extensionpack)\n- Here is the [hub tool](https:\u002F\u002Fhub.github.com\u002F) I use to work with GitHub from the command line\n\n# Materials for Vue 3 Course\n\n## Slides:\n\n**All slides have password `!vue!`**\n\n- [Intro to Vue Intro](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fdeck?token=gsSM2n2V)\n- [Intro to Vue 1: Directives & Data Rendering](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue3-1?token=n3Yja_t9)\n- [Intro to Vue 2: Methods, Computed, Watchers](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue3-2?token=jgTfDndR)\n- [Intro to Vue 3: Components and Slots](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue-3-3?token=NLsRwMvr)\n- [Intro to Vue 4: Vue CLI and Nuxt](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue-3-4?token=0IQFDZvK)\n- [Intro to Vue 5: Animation](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue-3-5?token=YXhIwtpW)\n- [Intro to Vue 6: Composition API and Custom Directives](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue-3-6?token=yidUZcRL)\n- [Intro to Vue 7: Vuex](https:\u002F\u002Fslides.com\u002Fsdrasner\u002Fintro-to-vue-3-7?token=YvT8ZUzV)\n\n_This course has been updated in 2020 for the Vue3 release, older materials for Vue 2 course available in the vue2-resources directory._\n\n## License\n\n[![Creative Commons License](https:\u002F\u002Fi.creativecommons.org\u002Fl\u002Fby-nc-sa\u002F4.0\u002F88x31.png)](http:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc-sa\u002F4.0\u002F)\n\nThis work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc-sa\u002F4.0\u002F)\n","该项目是为Sarah Drasner的Vue.js入门课程准备的教学材料。它涵盖了从基础到进阶的多个Vue.js主题，包括指令、数据渲染、方法、计算属性、侦听器、组件与插槽、Vue CLI和Nuxt框架、动画、Composition API及Vuex状态管理等，并提供了丰富的示例代码和在线资源链接，帮助学习者快速上手实践。此外，项目还推荐了一些开发工具如Vue Devtools、Vetur插件以及VS Code扩展包，以提高开发效率。这些材料非常适合希望系统性地学习Vue.js或了解其最新特性的前端开发者使用。",2,"2026-06-11 03:19:33","top_language"]