Vue3 component library construction

Set up monorepo environment

Using PNPM installation package is fast, efficient disk utilization, using PNPM can quickly establish monorePO, so here use PNPM workspace to implement Monorepo

Create the component library folder W-plus

NPM install PNPM PNPM init -y # initialize package.json configuration fileCopy the code

Modify package.json to remove unwanted configuration

{
  "private": true."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "WQ"."license": "ISC"."devDependencies": {
    "typescript": "^ 4.4.4." "."vue": "^ 3.2.20"}}Copy the code

Then create a configuration file for NPM in the root directory. NPMRC and add configuration items

shamefully-hoist = true
Copy the code

Install vue3 and typescript dependencies

pnpm install vue@next typescript -D 
Copy the code

If you don’t add shamefully-hoist = true configuration, node_modules don’t have dependencies like @vue and @babel

Initialize ts and generate the configuration file

NPX TSC --init # Initialize the TS configuration fileCopy the code

Tsconfig. json Added the following configuration

{
  "compilerOptions": {
    "module": "ESNext".// Package the module type ESNext
    "declaration": false.// Do not declare files by default
    "noImplicitAny": false.// The support type can default any without annotation
    "removeComments": true.// Delete comments
    "moduleResolution": "node".// Follow the node module
    "esModuleInterop": true.// Support es6, CommonJS module
    "jsx": "preserve"./ / JSX did not turn
    "noLib": false.// Do not handle class libraries
    "target": "es6".// Follow the ES6 version
    "sourceMap": true."lib": [ // Compile the library
      "ESNext"."DOM"]."allowSyntheticDefaultImports": true.// Allow import in modules that do not have exports
    "experimentalDecorators": true.// Decorator syntax
    "forceConsistentCasingInFileNames": true.// Enforce case sensitivity
    "resolveJsonModule": true.// Parse the JSON module
    "strict": true.// Whether to enable strict mode
    "skipLibCheck": true // Skip class library detection
  },
  "exclude": [ // Exclude libraries
    "node_modules"."**/__tests__"."w-plus/**"]}Copy the code

Yaml Add the configuration file pnpm-workshop. yaml to the root directory. For details, see pnpm-workshop. yaml

Packages: - 'packages/**' # store -play of written componentsCopy the code

The directory structure is

Json -.pnpm-lock.yaml -.pnpm-workspace .tsconfig.jsonCopy the code

Next, NPM init generates package.json in the play directory

{
  "private": true."name": "@w-plus/play"."scripts": {
    "dev": "vite"
  },
  "author": "WQ"."license": "ISC"."devDependencies": {
    "@vitejs/plugin-vue": "^ 1.9.3." "."vite": "^ 2.6.10"}}Copy the code

Then install the dependencies

PNPM install vite @vitejs/plugin-vue -dCopy the code

Create the vite configuration file vite.config.js in the play directory

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

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

Copy the code

Next, create index.html and app.vue

<! DOCTYPEhtml>
<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>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./main.ts" type="module"></script>
</body>
</html>
Copy the code
<template>test</template>
Copy the code

Create the entry file main.ts

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

const app = createApp(App);
app.mount('#app')

# './app.vue'Ts reported an error declaring "App" but never reading its value. ts(6133The module './app.vue 'or its corresponding type declaration could not be found. ts(2307)
Copy the code

To solve this problem, declare a module representation type for app.vue

Create typings directory in the root directory and create a new file vue-shim.d.ts

declare module '*.vue'{
    import type { DefineComponent } from "vue"; # Import vUE official componentstype
    const component:DefineComponent<{},{},any>
    export default component
}
Copy the code

Add the script to package.json in the play directory

."scripts": {
    "dev": "vite"},...Copy the code

To test the startup project, execute the script NPM run dev to start the service http://localhost:3000/ and see the contents of app.vue after accessing the address

Since we are currently running in the play directory, we are always running in the outermost layer, so we will add the script to package.json in the root directory

."scripts": {
    "dev": "pnpm -C play dev"# execute play dev script},...Copy the code

Then run PNPM run dev and you can see that the dev script in the play directory has been successfully executed

At this point, you have completed the basic test environment setup, followed by the component setup under the root directory Packages

See the next section