FrontEnd Demo World

# 生产环境报错DOMException: ...，开发环境无措

  • 具体报错内容：DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

网络原因 发布更更新想，显示较慢

# VuePress 文档中写组件 引入的路径问题

  • 注意是以/docs/...开头，有斜杠

# Element.getBoundingClientRect()

  • Element.getBoundingClientRect() MDN (opens new window)
  • 该API返回元素的大小及其相对于视口的位置
    • 如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和
    • 如果box-sizing: border-box，元素的的尺寸等于 width/height。
  • 返回值是一个 DOMRect 对象，一组矩形的集合，该元素的 CSS 边框大小

# v-slot

  • Vue Animation
<ClientOnly>
  <code-drawer slotName="AnimeJS" :resourceCode='`<h2>FkWd</h2>`'>
  <template v-slot:AnimeJS>
    <Vue-Animation-AnimeJS></Vue-Animation-AnimeJS>
  </template>
  </code-drawer>
</ClientOnly>
1
2
3
4
5
6
7
  • slotName 和 v-slot 传入名相同， 但slotName传的是字符串， v-slot传变量名不加引号
  • 注意缩进，可能会引起页面失效

# ESLint warning

# 如何在enhanceApp.js导入库使用

# 如何配置enhanceApp.js

# 电脑环境与依赖版本不同 引入的库可能失效

  • 查看package.jason内容一致
  • yarn install重装依赖
  • 在win平台和mac下
  • 分别启动yarn serve
  • win安装animate.css@4.1.1的trasition失效，改为animate@3.6.1后有效
  • mac安装animate.css所有版本都有效
  • 不用太纠结是否最新的版本，开发中能正常运行即可
    • 优先使用稳定版
    • 优先使用仍然在维护、活跃的库
    • 优先使用星标多的

# 在 Vue 或 VuePress 中使用SVG

  • 最初的方法是使用阿里的iconfont创建好图标项目-选取图标-下载为js文件-放入本地项目的资源目录-在项目中导入import './src/assets/icons'
  • 另一种方法是 VuePress中尝试之前Vue一次性导入SVG的配置，失败
  • 转而尝试VuePress的插件，发现不怎么好用，SVG总显示不出
  • 又尝试使用Vue的插件，再用ehanceApp.js引入第三方 Vue 组件

推荐vue awsome 上的几个 SVG图标库 动效库

参考

# 使用VuePress插件对TypeScript的支持

# 如果需要插入Vue组件的话，不推荐 不结合具体项目而单独使用VuePress

  • VuePress简化了Vue的配置，导致许多功能不能使用，复杂逻辑的组件不能使用
  • 最佳实践为在Vue项目中使用VuePress
    • 项目源码仓库
    • 项目页面展示仓库
    • 项目文档源码仓库
    • 项目文档页面展示仓库
  • 在一个现有项目中使用 VuePress
    • 将文档集成到项目中，让开发人员可以在一个地方同时进行文档编写和代码开发
    • 在该项目中管理文档，应该将 VuePress 安装为本地依赖
    • 作为本地依赖安装让你可以使用持续集成工具，或者一些其他服务（比如 Netlify）来帮助你在每次提交代码时自动部署

# VuePress1.x 中插入的组件的SCSS报错

  • 引入SCSS的版本过新
  • 以下的版本(package.json)经测试在 VuePress1.x 版本中是可用的
  "devDependencies": {
    "node-sass": "^4.9.0",
    "sass": "^1.17.3",
    "sass-loader": "^7.0.1"
  }
...
1
2
3
4
5
6

# 在markdown文件中插入Vue单文件组件

官网没重点说明

  • 参照官网，将需要在文件中插入的组件全部放到 docs/components/ 目录下，VuePress会将其自动注册到全局中
  • 需要注意的是，目录docs/components/如果有嵌套的其他目录，组件名开头需要加上嵌套目录的名字，并以短杠连接原组件名
    • 例如components/Foo/ 目录中的Bar.vue
    • 插入到markdown时需要这要引入：<Foo-Bar/>

# vuepress中实现代码折叠、高亮；排版高亮网页代码块 让页面上显示的代码拥有高亮效果

# 不太好的第一个实现方法

# 安装 highlight.js

# 仍有缺点的第二个实现方法

# 之后再去完善

参考文章

Last Updated: 1/18/2022, 6:09:16 AM