Vue：组件化开发

我们为什么要组件化开发？

在之前的vue中，我们要么是通过本地引入vue.js进行开发，要么就是通过CLI（脚手架）来创建环境然后单独在App.vue中进行开发，这样的开发模式当然没有问题，但是当项目庞大起来后，将所有的组件，data,methods等等选项式组件放在一个文件中进行开发是很不理智的，后期维护的成本巨大是毋庸置疑的，同时文件庞大带来的首页渲染问题该如何解决呢？向服务器申请网页源码所花费的时间提升也不利于用户的体验，当然还有命名上同名的情况，即使可以设置不同的作用域，但会造成代码的冗余，不利于优化。

所以，我们将不同的组件抽离出来写在不同文件中，这样可以让每个部分各司其职，而且最重要的是这大大提升了组件的复用性，我们把写好的组件写好作为类似ppt模板的东西，当我们需要在某个地方使用这个组件时只需要导入并注册一下这个组件就可以而不需要去思考其他逻辑。简单来讲，组件化开发把过去混杂在一起的代码模式转变成了如拼图一般的代码模式。当然，组件化开发产生了文件的分离，这使得如果要构建的组件间的通信也不如之前同一文件下简单。总的来说，组件化除了难一些以外基本上优于过去的编程模式。

组件化开发如何部署环境？

为了部署vue组件化开发的环境，我们一般采用脚手架，也就是CLI，在使用脚手架之前，我们得确保nodejs的配置：找到nodejs官网后根据自己设备选择合适的安装包后一路next就可以了。

在安装CLI中，我们会使用到nodejs中的npm，当然也可以使用pnpm（这个更新一点，但是好像得自己配环境，这个看其他的pnpm配置文章就可以了）。这里就用npm了。