webpack会抛出钩子 webpack 钩子

vue组件封装几种方法

在Vue中，组件的封装有多种方法，常用的有以下几种：
1. 全局组件：在Vue的根实例中注册全局组件，可以在任何地方使用。在组件中定义template、data、methods等选项，并使用Vue.component()方法进行注册。
2. 局部组件：在一个组件的选项中定义另一个组件作为它的子组件，只能在父组件中使用。一般通过components选项或者在template中使用<component>标签来引入。
3. 插件：可以通过Vue.use()方法将一个组件作为插件注册到Vue中，使得该组件的功能可以在所有Vue实例中使用。
4. 混入：可以通过Vue.mixin()方法将一个混入对象合并到组件中，从而可以在多个组件中共享相同的选项。混入对象可以包含data、methods、生命周期钩子等选项。
5. 自定义指令：通过Vue.directive()方法自定义指令，可以在模板中使用v-指令对DOM进行操作。指令对象中可以定义bind、update、unbind等钩子函数来处理DOM的操作。
这些方法可以根据具体的需求和场景来选择合适的封装方式。

使用Vue-cli自带编译为库的功能进行封装，具体步骤如下：

编写好源码。

执行命令：vue-cli-service build --target lib --name index --dest dist ./src/lib/index.ts--name，其中，--name参数设置库的名字，--dest参数设置生成文件的保存目录，./src/lib/index.ts表示入口文件。

这个命令在dist目录中生成了CJS和UMD的文件，同时CSS也被处理出称为一个单独的文件。

使用webpack进行封装。

使用webpack进行封装的方法较多，如分割代码、代码压缩、加载器、插件、动态导入等等，具体方法可咨询专业人士。