vue怎样封装组件 vue封装组件办法

首先，利用vue官方提供的cli（3.x）生成一个Vue工程，具体的cli安装和生成工程的过程可以参考官网Vue CLI的章节。看下生成的vue工程结构，如下

可以看到工程中有个APP.vue，这是整个工程*顶端的组件，之后所有新开发的组件都是嵌套在这个组件中。

从App.vue中可以看出，组件分为三个部分

1.  template ： 这是html部分，负责组件的展示

2.  script ： 这是js部分，负责组件的逻辑

3.  style : 这是css部分，负责组件的渲染

一般所有的组件都带有这三部分

现在我们来写一个自己的组件Demo.vue， 可以看出该组件仅仅是一个黑边框的粉红色方块，长宽均为100px

那在App.vue里怎么使用Demo.vue呢，首先我们在App.vue的js模块用import语句导入进来，然后在components节点将Demo.vue进行注册，接下来就可以在App.vue的任何地方使用Demo.vue组件了。

接下来，我们先启动服务，查看结果，组件展现正确。