Home >Web Front-end >Vue.js >How to configure the environment of Vue3 component library

How to configure the environment of Vue3 component library

WBOYforward: 2023-05-14 10:28:051037browse

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

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

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

Configuration vite.config.ts

Newvite.config.tsConfiguration file

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

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

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>

Because vite is based on esmodule, the

script tag Need to addtype="module"

app.vue

New

app.vuefile

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

entrance main.ts

New

main.ts

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

const app = createApp(App);

app.mount("#app");

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

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"

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 <pre class="brush:js;">declare module &#39;*.vue&#39; { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any> }</pre>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!

Statement：

This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to use mockjs to randomly simulate data in Vue3+Vite projectNext article：How to use mockjs to randomly simulate data in Vue3+Vite project

See more