How to configure the environment of Vue3 component library-Vue.js-php.cn

How to configure the environment of Vue3 component library

WBOY

Release： 2023-05-14 10:28:05

forward

1039 people have browsed it

Because we are using Vite Ts to develop the Vue3 component library, we need to install typescript and vue3. At the same time, the project will use Less to manage the component library style

pnpm add vue@next typescript less -D -w

Copy after login

Use pnpm if you want to install it at the project root directory, you need to add -w

Initialize ts

Execute npx tsc --init in the root directory, and then ts will be automatically generated The configuration file tsconfig.json, and then we will make a replacement

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

Copy after login

tsconfig.json We will make such a configuration for the time being, and there may be certain 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 Vue3 project to debug components. Therefore, we create a new folder called play in the root directory and initialize pnpm init. Subsequent component debugging will be carried out under this project. Next we will start building a Vue3 Vite project

Installing plug-ins

We need to installviteandvitejs/plugin-vueplug-ins,@vitejs/plugin-vueThe plug-in is for parsing files with the suffix .vue. Execute

pnpm add vite @vitejs/plugin-vue -D

Copy after login

Configuration vite.config.ts

Newvite.config.tsConfiguration file

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

Copy after login

New entry html file# in the play directory

##@vitejs/plugin-vuewill load the index.html under play 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>

Copy after login

Because vite is based on esmodule, the

script tag Need to addtype="module"

app.vue

New

app.vuefile

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

Copy after login

entrance main.ts

New

main.ts

import { createApp } from "vue";
import App from "./app.vue";

const app = createApp(App);

app.mount("#app");

Copy after login

Configuration script startup project

package.jsonConfigurationscriptsScript

{
  "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"
  }
}

Copy after login

Because the play project needs to test the local component library, it also needs to associate play with our component library. Modify the

pnpm-workspace.yaml file

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

Copy after login

At this time, the play project can install the packages under local packages

Finally execute

pnpm run dev, we can start our play project

How to configure the environment of Vue3 component library ##But there is a problem that ts cannot recognize the

*.vue

file, so the compiler will report red

How to configure the environment of Vue3 component library At this time we need to create a new declaration file

vue-shim.d.ts

to let ts know the file *.vue

declare module &#39;*.vue&#39; {
    import type { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>
}

Copy after login

The error message disappears at this time. The above is the detailed content of How to configure the environment of Vue3 component library. For more information, please follow other related articles on the PHP Chinese website!