Vue Beyond Vue Loader

前端狗

2019/06/10 发布于 技术 分类

Vue 

文字内容
1. Vue Beyond Vue Loader 蒋豪群
2. 关于我 • 蒋豪群 • Vue CLI / Vue Loader • Weibo @哦胖茶 • Twitter @haoqunjiang
3. 书写⼀一个 Vue 组件
4. Vue.component
5. In-DOM Template
6. Behind The Scene
7. Render Functions
8. Virtual DOM & VNode
9. Virtual DOM & VNode
10. Hyper Script
11. 所以……
12. 预编译(使⽤用Vue Loader)
13. Vue Loader 做了了什什么 主要⼯工作: • 模板解析和编译 • 表达式的新语法⽀支持 + 作⽤用域分析 • 合并组件的所有区块 并⽀支持 scoped css,资源 url 变换,等等 vue-template-compiler vue-template-es2015-compiler @vue/component-compiler-utils vue-loader
14. • 但是…… • 假如我不不想/不不能⽤用 webpack? • 假如我需要更更进⼀一步⾃自定义我的⼯工具链?
15. SFC without Vue Loader
16. rollup-plugin-vue “Rollup is ideal for library bundling”
17. @vue/dev-server • Demo • ⼀一个⽤用于静态⽂文件服务器器的中间件 • 直接在浏览器器中使⽤用 import App from "App.vue" 语句句 • 原理理: • 遇到 .vue ⽂文件时⾃自动处理理成 ES modules • 浏览器器只需要 MIME type,扩展名对执⾏行行⽆无影响
18. ⾃自⼰己动⼿手! • @vue/component-compiler-utils • ⽤用于 Parcel,Gridsome 等开源项⽬目
19. Any Alternatives to SFC?
20. JSX • ⼿手动拼装 VNode 数据结构 • @vue/babel-preset-jsx • @babel/plugin-syntax-jsx
21. JSX - Directives & Modifiers
22. Alternative Syntaxes
23. Template Strings • 换⼀一种⽅方式⼿手动拼装 VNode • 考虑利利⽤用 JavaScript 内置语⾔言特性解析模板,进⼀一步减⼩小体积 • vue-html
24. vue-html
25. 类型安全?
26. Vue ♥ TypeScript
27. Vue 2 • vue-class-component • vue-property-decorator
28. Vue 2
29. Decorators 的问题 • Stage 2 标准,未来仍可能变动 • TypeScript 的实现已经与最新标准脱节很久 • Babel 的实现与 TypeScript 的实现也有差别
30. Decorators 的问题
31. Vue 3 • Class API 不不再在 Vue Core 中⽀支持 • Composition function 能提供更更好的类型推断 • vue-class-component & vue-property-decorator 仍然会在 Vue 3 中 继续提供⽀支持
32. Thanks