Vue CLI是一個基于Vue.js的標準化工具，用于快速構建Vue.js應用程序。Vue CLI提供了創建和管理Vue應用程序所需的一切，包括腳手架，構建配置，插件系統等。而且，Vue CLI不僅僅用于構建整個Vue應用程序，還可以用于打包特定的Vue組件。
Vue組件是構成Vue應用的核心部分，它們可以由多個單文件組件組合成。使用Vue CLI打包Vue組件可以將這些組件在外部使用，提高代碼復用率和維護性。下面是使用Vue CLI打包Vue組件的步驟。
1. 安裝Vue CLI
npm install -g @vue/cli
安裝完成后，使用以下命令創建Vue組件項目。
2. 創建Vue組件項目
vue create my-component
其中，my-component為項目名稱。
3. 創建Vue組件
在src目錄下創建一個.vue文件，這個文件就是一個Vue組件。
<template> <div> <h1>Hello World!</h1> </div> </template>
這個Vue組件只是簡單的輸出“Hello World!”文本。
4. 配置打包文件
// vue.config.js
module.exports = {
outputDir: 'dist',
configureWebpack: {
entry: './src/main.ts',
output: {
filename: 'my-component.min.js',
library: 'MyComponent',
libraryTarget: 'umd',
libraryExport: 'default'
}
}
}其中，outputDir指定輸出目錄為dist文件夾，entry配置入口文件名為main.ts，output配置輸出文件名為my-component.min.js，以UMD的形式暴露library，并且默認導出組件。
5. 打包Vue組件
npm run build
打包完成后，dist目錄下就生成了Vue組件打包文件my-component.min.js。
6. 使用Vue組件
將my-component.min.js引入到HTML中，然后就可以使用Vue組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./my-component.min.js"></script>
<script>
const app = new Vue({
el: '#app',
template: '<my-component/>'
})
</script>
</body>
</html>以上就是使用Vue CLI打包Vue組件的完整步驟。Vue CLI提供了非常方便的構建工具，可以輕松地打包Vue組件，節省時間和精力，提高工作效率。
上一篇vue$emit和$on
下一篇vue 鼠標拖動事件