Vue3从0搭建Vite打包组件库使用详解

下面我将详细讲解“Vue3从0搭建Vite打包组件库使用详解”的完整攻略。

如何搭建

步骤一：安装Vue CLI

首先安装 Vue CLI。打开终端并运行以下命令：

npm install -g @vue/cli

步骤二：创建Vue项目

生成一个新的Vue项目，安装 Vue Router 和 Vuex。进入项目路径，执行以下命令：

vue create my-component-library
cd my-component-library
npm install vue-router vuex --save

步骤三：安装Vite

安装 Vite。在项目路径下运行以下命令：

npm install vite --save-dev

步骤四：调整项目目录

调整项目目录结构，创建 src/components 目录下的 index.js 文件，导出组件如下：

export { default as MyButton } from './MyButton.vue'
export { default as MyInput } from './MyInput.vue'

步骤五：使用Vite打包组件库

修改 package.json 文件，添加 "build-bundle": "vite build --target lib src/index.js" 命令：

{
  ...
  "scripts": {
    "dev": "vite",
    "build": "vue-cli-service build",
    "build-bundle": "vite build --target lib src/index.js"
  },
  ...
}

然后运行 npm run build-bundle 命令，即可生成一个 UMD 包 /dist/my-component-library.umd.js。

示范一：使用组件库

在需要使用组件库的项目中安装组件库，在需要使用的页面引入组件即可。示例如下：

import Vue from 'vue'
import { MyButton } from 'my-component-library'

new Vue({
  components: {
    MyButton
  }
}).$mount('#app')

示范二：添加指令

在组件库中添加一个全局指令 v-focus，修改 /src/index.js 中的内容如下：

import Vue from 'vue'
import MyButton from './components/MyButton.vue'
import MyInput from './components/MyInput.vue'

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

const Components = {
  MyButton,
  MyInput
}

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name])
})

export default Components

在需要使用 v-focus 指令的页面中即可使用该指令。

总结

以上就是关于“Vue3从0搭建Vite打包组件库使用详解”的完整攻略，其中包括了搭建、示范和总结等内容，希望对您有所帮助。