Vue3+typescript开发公共组件
时间：2023-03-29 12:04:40
HTML
记录一下用vue3+typescript开发公共组件的注意事项项目结构|--examples放置测试组件代码||--应用程序.vue||--main.ts|--包放置组件代码||--索引.ts||--shims-vue.d.ts||--资产|||--标志.png||--组件||--你好世界||--HelloWorld.tsx组件定义||--index.ts组件暴露和全局声明|--public||--图标.ico||--index.html|--测试||--单位||--example.spec.ts|--.browserslistrc|--.eslintrc.js|--.gitignore|--babel.config.js|--jest.config.js|--package-lock.json|--package.json|--README.md|--tsconfig.json|--vue.config.js组件编写组件定义//packages/components/helloWorld/HelloWorld.tsximport{defineComponent,typeExtractPropTypes}from"vue";constprops={/**name*/name:String,/**age*/age:Number,};//ExtractPropTypes:接受一个类型，返回vue3处理后的类型exporttypeHelloWorldProps=ExtractPropTypes;exportdefaultdefineComponent({name:"HelloWorld",props:props,emits:["点击"],setup(props,{emit}){constonClick=(event:MouseEvent)=>{emit("点击",事件);};return()=>{return(HelloWorld,{props.name},{props.age}
);};},});组件声明，暴露//packages/components/helloWorld/index.tsimportHelloWorldfrom"./HelloWorld";export{typeHelloWorldProps}from"./HelloWorld";exportdefaultHelloWorld;//调用组件时，提供代码提示declaremodule"vue"{exportinterfaceGlobalComponents{HelloWorld:typeofHelloWorld;}}componentRegistration//packages/index.tsimporttype{App}from"vue";importHelloWorldfrom"./components/helloWorld";//定义外部调用的install方法constinstall=(Vue:App)=>{视。组件（“HelloWorld”，HelloWorld）；}；导出默认{安装}；编译插件npmi-Dvue-ts配置文件package.json"scripts":{"lib":"vue-cli-servicebuild--targetlib--namexxx--destlibpackages/index.ts&&vue-tsc--declaration--emitDeclarationOnly",}tsconfig.json{"compilerOptions":{"outDir":"lib/types",//指定编译后的文件路径"target":"esnext","module":"CommonJS","strict":true,"jsx":"preserve","moduleResolution"：“节点”，“skipLibCheck”：真实，“esModuleInterop”：真实，“allowSyntheticDefaultImports”：真实，“forceConsistentCasingInFileNames”：真实，“useDefineForClassFields”：真实，“sourceMap”：真实，“baseUrl”：“。”，“types":["webpack-env","jest"],"paths":{"@/*":["packages/*"]},"lib":["esnext","dom","dom.iterable","scripthost"]},"include":["packages/**/*.ts","packages/**/*.tsx"],"exclude“：[“节点模块”]}
