Vue 组件学习总结

Posted 2023-05-08

参考技术A

组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。

我觉得，组件库的左右只能是一个 —— 提高生产效率。所以，在当前有不少优秀的组件库的情况下，我们能做的应该是帮助那些组件库变得更好。同时基于自己的业务写一些适用于自身业务的前度组件。

关于组件的发布流程， 手把手教你封装 Vue 组件，并使用 npm 发布 这篇文章对组件库从搭建到发布进行了详细的描述，亲测可用。

其实是一些组件库中实现特殊效果所用到的思路。在下面整理了一下用法和应用场景：

DOM 操作

CSS

Vue 功能应用

其他

根据这段时间学习组件库的经验，自己动手写了一个组件库项目 otter-ui 。本项目仅用于交流学习。可以参考着自己写一套组件库玩玩，还是挺酷的！

截止到这篇文章发布，我的 《Vue实验室》 已经有30篇博客了~
算是对 Vue 相关知识大概学习了一遍了，通过输出的方式学习技术知识让我对这些技术知识学习的非常扎实。
接下来，我会继续维护之前的文章，让那些文章更简单易懂。并且不定期发布一些我觉得有意思的值得深入学习的 Vue 相关知识点。

vue学习问题总结

1. 使用comopontent组件报错
   错误信息：vue.js:491 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
   代码：
   

   <p>
      使用component组件<br>
      <todo-item></todo-item>
   </p>

   Vue.component(‘todo-item‘,{
       template:‘I am a component‘
   });

   解决办法：将vue的全局注册提取到body的上面，html中就可以引用了

2. 仍然使用上面的js代码，会报出第二个错误
   错误信息：Component template requires a root element, rather than just text.
   解决办法：错误提示中说组件模版中需要一个根元素，而不是文本，将里面的tempate增加html标签即可，更改完的代码
   

   Vue.component(‘todo-item‘,{
       template:"<li>I am a component</li>"
   });