构建lib
通过创建一个vue项目，实现自己的组件或工具类。然后创建一个index.ts作为导出的入口文件，接下来就可以通过Vue CLIkais构建自己的lib了。
index.ts
export {Fns} from './utils/fn';创建了导出文件后，在package.json配置构建命令：
--name [name]构建的lib名称；--entry [entry]构建的入口文件（可省略--entry直接写入口文件路径）;--dest [path]构建文件地址（不指定默认构建到dist目录）。
"scripts": {
"serve": "vue-cli-service serve",
"lint": "eslint --ext .ts,.vue packages/",
"build": "vue-cli-service build --target lib --name index --entry packages/index.ts --dest statics"
},运行npm run build，等构建完毕就可以了引用自己的lib了。
在package.json中配置lib的入口文件："main": "./statisc/index.umd.min.js"。
{
"name": "@shared/web-frontend-vue",
"version": "1.0.0",
"private": false,
"main": "./statisc/index.umd.min.js",
"scripts": {
"serve": "vue-cli-service serve",
"lint": "eslint --ext .ts,.vue packages/",
"build": "vue-cli-service build --target lib --name index --entry packages/index.ts --dest statics"
},
}构建本地npm包：运行npm pack生成npm包
在项目中安装包：复制本地npm包的路径，执行npm i + 复制的路径。
npm i D:\code\Shared\shared-web-frontend-vue-1.0.0.tgz安装成功后如下图：
接下来就可以在项目中引用了：
import { SharedFns } from '@/Shared\shared-web-frontend-vue';生成类型声明文件
在上面已经构建了我们自己的npm包了，但是引用我们包里面的导出方法很麻烦，因为import的时候没有提示，方法名称又记不住，还得去其它引用过的地方去复制，这样特别浪费时间。
接下来我们就介绍一个生成类型文件的插件 vue-tsc，首先先装上vue-tsc：
npm i vue-tsc -D编写构建命令：
"dts": "vue-tsc --declaration --emitDeclarationOnly --declarationDir ./statics/types",运行npm run dts生成类型文件如下：
在package.json中配置类型声明入口：
"typings": "./statics/types/index.d.ts",再次运行npm pack 去项目中引用，效果如下：
文章来源：https://www.toymoban.com/news/detail-412062.html
注意：类型声明需要配合Vue Language Features 插件使用。其它Vue相关插件可能导致在.ts文件中可以提示，而在.vue文件中没有类型提示，此时需要禁用一些vue/ts的相关插件
文章来源地址https://www.toymoban.com/news/detail-412062.html
到了这里，关于基于vue构建lib + 类型声明文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![TypeScript系列, 通过vue3实例说说declare module语法怎么用[模块声明篇]](https://imgs.yssmx.com/Uploads/2024/02/421581-1.png)
