intro to vuepres 1,x

前端狗

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

Vue  vueconf 

文字内容
1. Intro to VuePress Next (1.x) ULIVZ x 真山 蚂蚁⾦金金服微贷前端团队 · Vue.js Team
2. ⾸首先,我们来看⼀一些来⾃自社区的作品 Special thanks to @vicbergquist ❤
3. https://alexjover.com/
4. https://vuepress-portfolio.netlify.com/
5. https://lusaxweb.github.io/vuesa
6. https://www.amie-chen.com/
7. 想查看更更多的案例例 vuepress.gallery awesome-vuepress
8. 1 什什么是 VuePress
9. 默认 静态⽹网站 主题 ⽣生成器器 布局 系统 「在 Markdown 中使⽤用 Vue」 简单的主题系统 「⼊入⼝口只能是⼀一个 SFC」 VuePress 0.x
10. 静态⽹网站 ⽣生成器器 布局 系统 内部 插件 外部 插件 插件系统 默认 主题 博客 主题 主题系统 VuePress 1.x https://v1.vuepress.vuejs.org/zh/miscellaneous/design-concepts.html
11. 2 快速上⼿手
12. create-vuepress
13. $ yarn create vuepress ? Select the boilerplate type (Use arrow keys) › docs - Create a documentation project with VuePress blog - Create a blog with VuePress. yarn create vuepress ? Select the boilerplate type docs ? What's the name of your project? my-docs ? What's the description of your project? My Docs ? What's your email? chl814@foxmail.com ? What's your name? ULIVZ ? What's the repo of your project. https://github.com/ulivz/docs $ yarn && yarn dev > VuePress dev server listening at http://localhost:8080/
15. 项⽬目结构 . !"" # # # # # # # # %"" docs !"" README.md !"" config # %"" README.md # !"" guide # !"" README.md # %"" using-vue.md %"" .vuepress package.json . !"" # # !"" %"" components !"" MyComponent.vue %"" my-component.vue styles !"" index.styl %"" palette.styl config.js
16. 如果你不不喜欢在本地创建项⽬目 ...
17. https://codesandbox.io/s/ @vicbergquist
18. 新建了了项⽬目后,我发现我想换个主题...
19. 3 主题
20. 依照惯例例,我们先来看⼀一看现有的主题 @vuepress/theme-default https://vuepress.vuejs.org/ @vuepress/theme- https://
21. 我不不喜欢官⽅方推出的主题怎么办 😂
22. vuepress-theme-bulma by @nakorndev
23. vuepress-theme-api by @sqrthree
24. vuepress-theme-indigo-material by @zhhlwd
25. vuepress-theme-ktquezby @ktquez
26. portfolio-vuepressby @itsnwa
27. 如何使⽤用⼀一个主题? // .vuepress/config.js module.exports = { theme: 'vuepress-theme-xx', themeConfig: { // ... } }
28. 没有我喜欢的主题怎么办 😂
29. 那就来写⼀一个主题 theme !"" # !"" # !"" # # !"" # # %"" global-components components layouts !"" Layout.vue (Mandatory) %"" 404.vue styles !"" index.styl %"" palette.styl index.js
30. 说到这⾥里里,我们好像还没⻅见过插件 😅
31. 4 插件
32. ⾸首先来看看我们有哪些插件
33. @vuepress/plugin-pwa 让你的⽹网站更更快
34. @vuepress/plugin-pwa Access Website User Click "Refresh" Register Cache Updated Refresh Service Worker refs How to Fix the Refresh Button When Using Service Workers > Approach #3
35. @vuepress/plugin-search 让搜索更更简单 Algolia Search 集成 基于 Headers 的搜索
36. @vuepress/plugin-search 匹配 键⼊入关键词 ⽤用户 <SearchBox /> 组件 Metadata 结果 匹配结果 搜索体验 匹配算法
37. 由于⻚页⾯面都是异步加载的 如何实现开箱即⽤用的全⽂文搜索呢?
38. @vuepress/plugin-blog 让开发博客主题更更简单 ⾃自定义基于⽬目录(_post)或者 Front Matter (如 tag)的分类 内置博客⻛风格的 Permalinks 开箱即⽤用的分⻚页功能
39. “ 博客主题开发者能够更更关注主题的交互体验 ⽽而⾮非分类分⻚页等逻辑 ” 如何⽤用70⾏行行代码实现⼀一个博客主题 https://github.com/ulivz/70-lines-of-vuepress-blog-theme
40. vuepress-plugin-yuque 创造了了纯动态数据源的可能性 Input Output
41. 实现这个转换需要多少⾏行行代码? // .vuepress/config.js module.exports = { plugins: [ ['vuepress-plugin-yuque', { repoUrl: 'https://www.yuque.com/vuepress/vuepress-plugin-yuque' }] ] } https://vuepress-plugin-yuque.ulivz.com/
42. “ 只要你愿意 你可以将任意的数据源 连接到 VuePress ”
43. 了了解了了⼏几个 VuePress 插件后 我们再来看看 VuePress 的插件系统是如何运作的
45. 再來來看看有哪些插件 API
46. Life Cycle Webpack Markdown Page Management ready chainWebpack extendMarkdown extendPageData updated define / alias chainMarkdown clientDynamicMod ules generated beforeDevServer / afterDevServer additionalPages Other APIs: globalUIComponents、extendCLI
47. 如何书写⼀一个 VuePress 插件? #1 Export a plain object #2 A function that returns a plain object module.exports = { // ... } module.exports = (options, ctx) => { return { // ... } }
48. 插件案例例 const { join } = require('path') module.exports = (options, context) => ({ additionalPages() { return { path: '/info/', // 在 SFC 中通过 this,$site.pages 拿到所有⻚页⾯面 filePath: join(__dirname, 'info.vue') } }, 实现⼀一个 VuePress 插件,包含如下功能: 1. 添加⼀一个额外的⻚页⾯面 /info/; 2. 在 /info/ ⻚页展示出当前站点下所有的⻚页⾯面信息; 3. 新增⻚页⾯面信息“字数”; 4. 注册 vuepress view-info 指令,实现上述相同的功能; extendPageData($page) { const { _content } = $page $page.charsCount = _content.length }, extendCli(cli) { cli .command('view-info [targetDir]', '') .action(async (dir = '.') => { // 通过 ctx.pages 拿到所有的⻚页⾯面 }) } }) 在线演示
49. 除此之外,1.x 还给我们带来了了什什么?
50. 5 永久链接
51. 源⽂文件 默认⾏行行为 使⽤用永久链接 . %"" _posts !"" 2018-4-4-intro-to-vuepress.md %"" 2019-6-8-intro-to-vuepress-next.md _posts/2018-4-4-intro-to-vuepress.html _posts/2019-6-8-intro-to-vuepress-next.html /2018/04/04/intro-to-vuepress/ /2019/06/08/intro-to-vuepress-next/ 在线演示
52. 5 Markdown 插槽
53. 布局组件和 Markdown ⽂文件之间的关系 Provider Consumer
54. ⼀一个 Markdown ⽂文件能够提供多少数据源 Front Matter this.$page.frontmatter Content <Content /> ——title: Intro to VuePress 1.x layout: CustomLayout ——- # Intro to VuePress 1.x June 8th, 2019, in Shanghai, ...
55. 但是,假设我的布局是这样的 ... Left Right 我将⽆无从下⼿手 … 除⾮非我只想在⼀一侧渲染 <Content />
56. 有了了 Markdown 插槽,我们便便可以将源⽂文件分⽚片 Markdown: ::: slot left > I’m on the left ::: ::: slot right > I’m on the right ::: Layout Component: <div id="layout"> <Content slot-key="left"/> <Content slot-key="right"/> </div> 在线演示
57. 7 使⽤用 SFC 作为源⻚页⾯面
58. 在 SFC 中使⽤用 Front Matter <frontmatter> title: VuePress 1.x description: Vue SFC as source pages </frontmatter> <template> <div id="page"> <div class="title">{{ $frontmatter.title }}</div> <div class="description">{{ $frontmatter.description }}</div> </div> </template> 在线演示
59. 8 主题继承
60. 为什什么需要主题继承 ? 避免不不必要的 eject
61. 覆盖⽗父主题中的的组件 Parent Theme !"" # # # !"" # # !"" %"" components !"" Navbar.vue !"" Home.vue %"" Sidebar.vue Child Theme %"" components %"" Navbar.vue layouts !"" 404.vue %"" Layout.vue package.json index.js @theme/components/Navbar.vue 在线演示
62. 说了了这么多,我们来总结⼀一下
63. VuePress 1.x 给我们带来了了 强⼤大的 插件 API 增强的 主题 系统 新增的 博客 主题
64. Q&A
65. 最后,我们来发布 VuePress 1.x
66. VuePress 是⼀一个开源项⽬目 Thanks 感谢所有的贡献者 ❤ @bencodezen @itsnwa @jjyyxx @ktquez @meteorlxy @nakorndev @Shigma @sqrthree @ulivz @vicbergquist @yyx990803 @ycmjason