This article will introduce typescript into the project, and manually build a Vue3 project for testing component library components.
Because we use Vite+Ts to develop the Vue3 component library, we need to install typescript and vue3, and the project will use Less. Management of component library styles
pnpm add vue@next typescript less -D -w
If you use pnpm to install in the project root directory, you need to add-w
Initialize ts
Execute in the root directory npx tsc --init, then the ts configuration file will be automatically generated tsconfig.json, and then we will replace it
{
"compilerOptions": {
"baseUrl": ".",
"jsx": "preserve",
"strict": true,
"target": "ES2015",
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
"moduleResolution": "Node",
"lib": ["esnext", "dom"]
}
}
tsconfig.jsonFor the time being, do such a configuration first, and there may be some adjustments in the future.
Build a vue3 project based on vite
Because what we want to develop is a Vue3 component library, we definitely need a Vue3 project to test our component library, so here we will build a Vue3 project based on Vite to debug the components. Therefore, we create a new folder called play in the root directory and then initialize pnpm init. Subsequent component debugging is carried out under this project. Next, we will start to build a Vue3+Vite project
install plugin
We need to install viteand vitejs/plugin-vueplug-ins, @vitejs/plugin-vuethe plug-ins are for parsing suffixes as .vuefiles. Execute in the play directory
pnpm add vite @vitejs/plugin-vue -D
Configure vite.config.ts
Create a new vite.config.ts configuration file
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});
Create a new entry html file
@vitejs/plugin-vueThe index.html under play will be loaded by default
<!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>
Because vite is based on esmodule, scriptyou need to add in the tagtype="module"
app.vue
new app.vuefile
<template>
<div>启动测试</div>
</template>
entry-main.ts
New main.ts
import {
createApp } from "vue";
import App from "./app.vue";
const app = createApp(App);
app.mount("#app");
configure script startup project
in package.jsonconfigure scriptsscript
{
"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"
}
}
Because the play project needs to test the local component library, it is also necessary to associate play with our component library. modify pnpm-workspace.yamlthe file
packages:
- "packages/**"
- "play"
At this point, the play project can install the packages under the local packages
Finally execute pnpm run dev to start our play project
But there is a problem that ts cannot recognize *.vuethe file, so the compiler will report red. 
At this time, we need to create a new declaration file vue-shim.d.tsto let ts recognize *.vuethe file
declare module '*.vue' {
import type {
DefineComponent } from "vue";
const component: DefineComponent<{
}, {
}, any>
}
At this point the error message disappears.
Here we have completed the construction of a Vue3 project, and then we can debug local components in this project