1. Development components
1.1 Create a new project
Create a new project using vite
npm create vite@latest
Select Vue and Typescript
Need to install the following packages: [email protected] Ok to proceed? (y) √ Project name: ... vite-vue3-ts-test-fjc √ Select a framework: ? Vue √ Select a variant: ? TypeScript Scaffolding project in D:\coding\study\vite-vue3-ts-test-fjc... Done. Now run: cd vite-vue3-ts-test-fjc npm install npm rundev
I have created a new demo project with the project name vite-vue3-ts-test-fjc;
1.2 Write a component
Create a new directory packages under src. The directory name can be arbitrary, but I am more accustomed to this directory structure. I can just create it based on personal preference;
We create a new component under this folder. Generally, each component should create a separate folder. The vue file and other content used to support this component are stored in the folder. I have created one here. vv3-test.vue component and a support.ts;
In support.ts, the Prop attribute of vv3-test is defined:
export interface Vv3TestProps{<!-- -->
name?: string;
age?: number;
}
vv3-test.vue component is relatively simple
<script setup lang="ts">
import {<!-- -->Vv3TestProps} from "./support.ts";
withDefaults(defineProps<Vv3TestProps>(), {<!-- -->
name: "fjc",
age: 18,
});
</script>
<template>
<div class="">
<h1>vv3-test</h1>
<h2>name: {<!-- -->{ name }}</h2>
<h2>age: {<!-- -->{ age }}</h2>
</div>
</template>
1.3 Export components
Add an index.ts file in packages to export all components;
import {<!-- -->App} from "vue";
import Vv3Test from "./vv3-test/vv3-test.vue";
/**
* An install method supported by vue is exported by default here.
* You can import components globally in main.ts using the following method
*
* import ViteVue3TsTestFjc from "vite-vue3-ts-test-fjc"
* .....
* app.use(ViteVue3TsTestFjc);
*/
export default {<!-- -->
install(app: App) {<!-- -->
app.component("Vv3Test", Vv3Test);
// If there are more components that need to be registered, you can continue to add them here
// app.component("Vv3Test1", Vv3Test1);
// app.component("Vv3Test2", Vv3Test2);
}
}
/**
* The component is exported here so that it can be introduced on demand when using the component alone.
* To support future use like this on demand import {Vv3Test} from "vite-vue3-ts-test-fjc";
* Add as many components as there are components
*/
export {<!-- -->Vv3Test};
/**
* Here is the key point, these components need to be declared as global components in ts;
*/
declare module "vue" {<!-- -->
export interface GlobalComponents {<!-- -->
Vv3Test: typeof Vv3Test
}
}
Note: Be sure to add declare module "vue" at the bottom. This mainly tells ts that the following components are also global components;
2. Packaging configuration
2.1 Configuration vite.config.ts
In order to correctly export all types of ts (xxx.d.ts) files, we need to install the vite-plugin-dts plug-in:
npm install -D vite-plugin-dts
Then modify vite.config.ts
import {<!-- -->defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from "vite-plugin-dts";
// https://vitejs.dev/config/
export default defineConfig({<!-- -->
plugins: [
vue(),
//The vite-plugin-dts plug-in must be introduced here, otherwise the d.ts file will not be generated
dts({<!-- -->
// This defines the directory where the d.ts file needs to be generated. If there are multiple directories, you can use an array.
include: ["src/packages/**/*.{vue,ts}"],
}),
],
// Packaging configuration
build: {<!-- -->
// Packaged file output directory
outDir: "dist",
lib: {<!-- -->
//Specify component compilation entry file
entry: "./src/packages/index.ts",
// component library name
name: "ViteVue3TsTestFjc",
// file name
fileName: "vite-vue3-ts-test-fjc",
},
rollupOptions: {<!-- -->
// Make sure to externalize dependencies that you don't want to package into the library
external: ["vue"],
output: {<!-- -->
exports: "named",
// Provide a global variable for these externalized dependencies in UMD build mode
globals: {<!-- -->
vue: "Vue",
},
},
},
},
});
2.2 Modify package.json
{<!-- -->
"name": "vite-vue3-ts-test-fjc",
// Whether it is a private component, this needs to be changed to false
"private": false,
// Version needs to be modified before each submission, otherwise the submission will fail.
"version": "1.0.1",
//The type must be module
"type": "module",
// This component points to the path by default
"main": "dist/vite-vue3-ts-test-fjc.js",
//Default target when introduced in a similar import manner, such as; import xxx from "vite-vue3-test-fjc";
"module": "dist/vite-vue3-ts-test-fjc.umd.cjs",
// Type definition file, this must be written, otherwise it will not be automatically prompted.
"types": "dist/index.d.ts",
// When running npm publish, files that need to be submitted to npm
"files": [
"package.json",
"README.md",
"dist"
],
// author
"author": "FJC",
// license
"license": "MIT",
// Source code warehouse
"repository": {<!-- -->
"type": "git",
"url": "https://gitee.com/ericfang/v3-drag-zoom"
},
// bug submission address
"bugs": {<!-- -->
"url": "https://gitee.com/ericfang/v3-drag-zoom/issues"
},
// Home page address, usually the readme of the source code
"homepage": "https://gitee.com/ericfang/v3-drag-zoom/blob/master/README.md",
// describe
"description": "Project for testing packaging prompts",
// Keywords to search in npm
"keywords": [
"vite",
"vue3",
"typescript",
"demo"
],
"scripts": {<!-- -->
"dev": "vite",
"build": "vue-tsc & amp; & amp; vite build",
"build-noEmiit": "vue-tsc --noEmit & amp; & amp; vite build",
"preview": "vite preview"
},
"dependencies": {<!-- -->
"vue": "^3.3.4"
},
"devDependencies": {<!-- -->
"@vitejs/plugin-vue": "^4.2.3",
"terser": "^5.24.0",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vite-plugin-dts": "^3.6.3",
"vue-tsc": "^1.8.5"
}
}
2.3 Package and upload to npm
Run the packaging command:
npm run build
After the packaging is completed, you can see the packaging completion file and the .d.ts declaration file of ts in the /dist directory;
Login npm
npm login
There will be a pause when logging in. Let us go to the web page to authorize the login. After the web page authorizes the login, it will prompt that the login is successful;
PS D:\coding\study\vite-vue3-ts-test-fjc> npm login npm notice Log in on https://registry.npmjs.org/ Login at: https://www.npmjs.com/login?next=/login/cli/85bfed0e-da9a-43ad-9508-724c80758fcf Press ENTER to open in the browser... # There will be a pause and blocking here. After copying the above URL to the browser to complete the authorization, it will automatically prompt that the login is successful; # Prompt for successful login Logged in on https://registry.npmjs.org/.
login interface
Then just enter the submit command directly:
npm publish
Submitted successfully:
PS D:\coding\study\vite-vue3-ts-test-fjc> npm publish npm notice npm notice package: [email protected] npm notice === Tarball Contents === npm notice 133B README.md npm notice 806B dist/index.d.ts npm notice 596B dist/vite-vue3-ts-test-fjc.js npm notice 782B dist/vite-vue3-ts-test-fjc.umd.cjs npm notice 1.5kB dist/vite.svg npm notice 71B dist/vv3-test/support.d.ts npm notice 1.2kB dist/vv3-test/vv3-test.vue.d.ts npm notice 1.1kB package.json npm notice === Tarball Details === npm notice name: vite-vue3-ts-test-fjc npm notice version: 1.0.1 npm notice filename: vite-vue3-ts-test-fjc-1.0.1.tgz npm notice package size: 3.2 kB npm notice unpacked size: 6.2 kB npm notice shasum: a5b84cdcbec5195cd272148072096df1ea168f96 npm notice integrity: sha512-mE/zT6lAYHdjg[...]W + RVsNN7gO/Sw== npm notice total files: 8 npm notice npm notice Publishing to https://registry.npmjs.org with tag latest and default access + [email protected]
3 Install components in the project
3.1 Installing components
Run the installation command
npm install vite-vue3-ts-test-fjc
Import components in main.js
import {<!-- --> createApp } from 'vue'
import App from './App.vue'
import ViteVue3TsTestFjc from "vite-vue3-ts-test-fjc"
// If the component has global styles, import them as well.
createApp(App).use(ViteVue3TsTestFjc).mount('#app')
3.2 Use components and enjoy being prompted by the IDE
4 Summary
There are two key steps for the IDE to prompt:
- Add global component declaration in
packages/index.ts:
/**
* Here is the key point, these components need to be declared as global components in ts;
*/
declare module "vue" {<!-- -->
export interface GlobalComponents {<!-- -->
Vv3Test: typeof Vv3Test
}
}
- Add the
vite-plugin-dtsplug-in tovite.config.jsto automatically export.d.ts
export default defineConfig({<!-- -->
plugins: [
vue(),
//The vite-plugin-dts plug-in must be introduced here, otherwise the d.ts file will not be generated
dts({<!-- -->
// This defines the directory where the d.ts file needs to be generated. If there are multiple directories, you can use an array.
include: ["src/packages/**/*.{vue,ts}"],
}),
],
// ...
}