You're a mature code that needs to learn to import on demand

This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

A preface.

Do front-end partners often encounter the global introduction of UI components resulting in too large volume, on demand introduction resulting in constant handwriting will be very troublesome. So, down! Today we let the code itself according to the need to introduce, the liberation of the front-end small partners of productivity, as soon as possible to achieve freedom from work! (Party A: I need to change ten more requirements!)

Introduce two.

We introduce the unplugin-vue-Components here. The component was developed by ANTfu, a core vUE developer, and was recommended by Utah University as a gold sponsor of the project.

The main purpose of this component is to automatically import components for vUE projects.

Official documentation: ANTfu/unplugin-vue-Components

3. Complete case

Here we’ll use Vite as an example to focus on its automatic on-demand introduction of custom components and UI library components.

Source: github.com/Kuari/Blog/…

1. Create projects

yarn create vite unplugin_auto_import --template vue
Copy the code

Then go to the folder to install the dependencies.

cd unplugin_auto_import
yarn install
Copy the code

2. Install unplugin – vue – components

yarn add -D unplugin-vue-components
Copy the code

3. Configure vite. Config. Js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite' / / new

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({ /* options */ }) / / new]})Copy the code

4. Automatically import custom components

Our default templates to create projects, the default in the App. Introduce the vue. / components/HelloWorld. Vue. This is where you can try to introduce it automatically.

After configuring the unplugin-vue-components, we now just need to delete the imported line, which is grayed out when we open vscode. The deleted line looks like this:

import HelloWorld from './components/HelloWorld.vue'
Copy the code

The complete app. vue after deletion is as follows:

<script setup>
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

Run yarn dev on the command line, open the browser, and check http://localhost:3000. ! It was introduced! (In ecstasy, to realize the freedom of work as soon as possible)

5. Automatically import UI library components

Take Element Plus as an example.

The first is installing Element Plus. The official document did not say to install, I thought it was built in, keep reporting errors, a little confused, ha ha.

yarn add -D element-plus
Copy the code

To import element Plus resolver, edit the viet.config. js file and modify it as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' / / introduce ElementPlusResolver

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({resolvers: [ElementPlusResolver()]}) // Add the configuration]})Copy the code

Now here’s the magic: you can use the UI library components directly!

Let’s try using an el-Button component in app. vue. We added the following line to app.vue:

<el-button type="primary">Kuari</el-button>
Copy the code

After adding app. vue, the code below is as follows:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <el-button type="primary">Kuari</el-button>
</template>
Copy the code

Now, run YARN Dev, open your browser, and you can see that you can use the UI library components directly.

Pack 6.

The on-demand features aren’t just development-time, they’re also tree-shakable for packaging, which only packs the components you’re using.

In the project written in the current tutorial, the dist folder is 1.1MB packed when the global is introduced, and 202KB packed when the component is used.

4. The last

Manual import on demand is not possible manual import on demand, not in this lifetime/dog head.

After all, it is a powerful tool developed by the big guy, and I hope that the front end of the small partners will realize freedom from work as soon as possible.

5. Link to the original blog

You’re a mature code that needs to learn to import on demand

You’re a mature code that needs to learn to import on demand