搭建vue3 & ts组件库脚手架 - 自己撸组件库篇一

作者：问答酱2024.02.04 17:06浏览量：6

简介：本文将带领大家一步步搭建Vue3和TypeScript的组件库脚手架，让我们从零开始自己动手创建一个组件库。我们会详细介绍每个步骤，并使用生动的语言和实例来解释抽象的技术概念，让大家都能轻松理解。在本文的结尾，我们将提供一些可操作的建议和解决问题的方法，帮助大家更好地构建自己的组件库。

在开始之前，我们需要先安装一些必要的工具和依赖。首先，确保你的计算机上已经安装了Node.js和npm。然后，通过以下命令全局安装Vue CLI和Vite：

  1. npm install -g @vue/cli @vitejs/cli

接下来，我们创建一个新的Vue3项目，并选择TypeScript作为开发语言：

  1. vue create my-component-library

在提示时选择“Manually select features”，然后勾选“TypeScript”。
进入项目文件夹：

  1. cd my-component-library

现在，我们需要安装一些额外的依赖，以便于我们开发组件库。通过以下命令安装vue-class-component、vue-property-decorator和vue-template-compiler：

  1. npm install vue-class-component vue-property-decorator vue-template-compiler --save-dev

接下来，我们需要创建一个新的文件夹来存放我们的组件库。在项目根目录下创建一个名为“components”的文件夹：

  1. pwd
  2. mkdir components

现在，我们将开始创建我们的第一个组件。在“components”文件夹下创建一个名为“HelloWorld.vue”的文件，并添加以下内容：

  1. <template>
  2. <div class="hello">
  3. {{ message }}
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { defineComponent } from "vue"
  8. export default defineComponent({
  9. name: "HelloWorld",
  10. data() {
  11. return {
  12. message: "Hello, world!"
  13. }
  14. }
  15. })
  16. </script>
  17. <style scoped>
  18. .hello {
  19. color: #42b983;
  20. }
  21. </style>

这个组件非常简单，它只显示一条“Hello, world!”的消息。现在，我们需要告诉Vue CLI这个文件的存在，以便它可以被正确地编译和打包。打开“main.ts”文件，并添加以下内容：

  1. import { createApp } from "vue"
  2. import App from "@/App.vue"
  3. import HelloWorld from "@/components/HelloWorld.vue"
  4. createApp(App)
  5. .component("HelloWorld", HelloWorld)
  6. .mount('#app')

在这里，我们首先导入了createApp函数、App组件和HelloWorld组件。然后，我们使用createApp函数创建了一个新的Vue应用实例，并使用.component方法将HelloWorld组件注册到应用中。最后，我们使用.mount方法将应用挂载到id为“app”的元素上。
现在，我们可以运行我们的项目来看看我们的第一个组件是否正常工作：

  1. npx vite

最热文章