In our previous article, “2021 New Year’s Vue3.0 + Element UI”, we tried to create a Vue3 + Element UI project using the Vue CLI. The Vue CLI actually generates a familiar Webpack project for us.

Webpack needs no introduction, a very powerful packaging tool. However, Webpack has its drawbacks, such as the long time it takes to pack for the first time and slow hot updates after code changes.

With Vue 3 comes a powerful new generation of packaging tools Vite, a modern browser, based on the native module system ESModule implementation of on-demand Web development build tools, precisely to solve the above Webpack pain points. Vite has three main advantages:

  • Quick cold start of the server
  • Instant Hot Module Replacement (HMR)
  • True on-demand compilation

Sounds great, so give it a try.

Initialize the Vite project

use

npm init @vitejs/app my-vue-app --template vue
Copy the code

Command to quickly generate a Vue 3 project template built using Vite. Run NPM run dev to get the project up and running and into development mode. The project cold starts very quickly, with a preview appearing in the browser in less than a second. The cold start of the project only took 382ms. It smells good.

Introducing the Element Plus UI component library

Start your project by selecting a UI component library. There are not many component libraries on the market that support Vue 3, and the Element UI is, as expected, fully supported. Element Plus is a new version of Vue 3 from the Element UI team at Ele. me, with many new useful components and a great experience.

The way the Vite project introduces Element Plus is also simple: install it first

npm i element-plus
Copy the code

Then modify the project entry file to introduce the Element Plus library and associated style files

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
Copy the code

Restart the project and you’re happy to use Element Plus. Now let’s try the instant hot update function again. Modify the app. vue file and add a Button

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

Save the file, and the browser project preview is updated almost at the same time, with negligible hot update time.

summary

Vite uses the features of the latest browsers to give us a better development experience. Existing ecosystems such as the Element UI are already well supported and can be tried out in new projects.

The project source code can be found at github.com/element-plu…