vue3使用Vite打包组件库从0搭建过程详解

目录

• 手动搭建一个用于测试组件库组件 Vue3 项目
• 初始化 ts
• 搭建一个基于 vite 的 vue3 项目
• 安装插件
• 配置 vite.config.ts
• 新建入口 html 文件
• app.vue
• 入口 main.ts
• 配置脚本启动项目

手动搭建一个用于测试组件库组件 Vue3 项目

本篇文章将在项目中引入 tyPEscript,以及手动搭建一个用于测试组件库组件 Vue3 项目

因为我们是使用 VITe+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理

pnpm add vue@next typescript less -D -w

使用pnpm如果要安装在项目根目录下,则需要加-w

初始化 ts

在根目录执行npx tsc --init,然后就会自动生成 ts 的配置文件tsconfig.json,然后我们对其做一个更换

{
  "compilerOptions": {
    "baseUrl": ".",    "jsx": "PReserve",    "strict": true,    "target": "ES2015",    "module": "ESNext",    "skipLibCheck": true,    "ESModuleinterop": true,    "moduleResolution": "Node",    "lib": ["esnext", "dom"]  }
}
    

tsconfig.json暂时先做这样一个配置,后续可能会有一定的调整

搭建一个基于 vite 的 vue3 项目

因为我们要开发的是一个 Vue3 组件库,肯定需要一个 Vue3 项目来测试我们的组件库,所以这里将自己搭建一个基于 Vite 的 Vue3 项目来对组件进行调试。因此我们在根目录新建一个叫 play 的文件夹然后初始化pnpm init,后续的组件调试就在这个项目下进行。接下来我们就开始搭建一个 Vue3+Vite 的项目

安装插件

我们需要安装vite和vitejs/plugin-vue插件,@vitejs/plugin-vue插件是为了解析后缀为.vue文件的。在 play 目录下执行

pnpm add vite @vitejs/plugin-vue -D

配置 vite.config.ts

新建vite.config.ts配置文件

import {
 defineConfig }
     From "vite";
    import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],}
    );
    

新建入口 htML 文件

@vitejs/plugin-vue会默认加载 play 下的 index.html

!DOCTYPE html>
    html lang="en">
      head>
        meta charset="UTF-8" />
        meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        meta name="viewport" content="width=device-width, initial-scale=1.0" />
        title>
    play/title>
      /head>
      body>
        div id="app">
    /div>
        script src="main.ts" type="module">
    /script>
      /body>
    /html>
    

因为 vite 是基于 esmodule 的,所以script标签中需要添加type="module"

app.vue

新建app.vue文件

template>
      div>
    启动测试/div>
    /template>
    

入口 main.ts

新建main.ts

import {
 createApp }
     from "vue";
    import App from "./app.vue";
    const app = createApp(App);
    app.mount("#app");
    

配置脚本启动项目

在package.json配置scripts脚本

{
  "name": "play",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {
    "dev": "vite"  }
,  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",    "vite": "^4.1.1"  }
}
    

因为 play 项目需要测试本地的组件库,所以也需要将 play 和我们的组件库关联在一起。修改一下pnpm-workspace.yaml文件

packages:  - "packages/**"  - "play"

此时 play 项目便可以安装本地 packages 下的包了

最后执行pnpm run dev,便可启动我们的 play 项目

但是有一个问题就是 ts 无法识别*.vue文件,所以编译器会报红

此时我们需要新建一个声明文件vue-shim.d.ts,让 ts 认识*.vue的文件

declare module '*.vue' {
    import type {
 Definecomponent }
     from "vue";
    const component: DefineComponent{
}
, {
}
    , any>
}
    

此时报错便消失了。

到这里我们就完成一个 Vue3 项目的搭建,后续便可以在这个项目中进行本地组件的调试了

本篇文章仓库地址:配置环境

以上就是vue3使用Vite打包组件库从0搭建过程详解的详细内容，更多关于vue3 Vite打包组件库搭建的资料请关注其它相关文章！

• Vue3从0搭建Vite打包组件库使用详解
• Vue3+Vite项目按需自动导入配置以及一些常见问题修复
• 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程
• vue3+vite+ts使用monaco-editor编辑器的简单步骤
• Vue3中Vite和Vue-cli的特点与区别详解
• vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！