解决前端项目场景问题：vue如何组件化分离式编程（清晰易懂版）

组件就是将各个变化接近的结构都抽离出来，为了降低性能渲染，提高效率

1. components是放置各个组件的文件夹，homepage放置总vue文件，比如作者放的是CenterOverview.vue，主要看自己怎么命名

 

 2.在CenterOverview.vue里import引入各个组件

3. 然后在html结构里面两种方法都可以直接调用

比如<bar-chart /> ，或者引入组件时命名的 <BarChart />

作者用的第一种

4.最后在路由文件router.js里直接引centeroverview.vue就行

5.至于组件的写法，就是普通的vue单页面写法，没有区别，数据、接口、样式不用再放在一个总文件的写了，都在CenterOverview.vue写几千行代码根本看不过来的，拆成组件CenterOverview.vue只有五百行，完美。

至于为什么组件化分离式编程，主要是易于后期维护、迭代、调试

---

作者上一篇文章，

vue3+elementPlus+原生js：根据浏览器宽度的element进度条跟着缩放_意初的博客-CSDN博客项目背景：浏览器缩放时，el进度条还是固定的宽度无法达到自适应状态，所以要使用原生js获取dom来进行判断即可。js层，直接编写响应函数，先用querySelectorAll获取所有进度条的dom之后，在进行循环遍历在for循环里进行样式的改写.这里是浏览器的宽度，用来判断进度条的大小样式。获取所有进度条的dom，进度条的响应样式，最后在vue视图挂载，window.onresize指的是实时监听变化https://blog.csdn.net/weixin_43928112/article/details/127448957