In 2021, another year, Vue has released version 3.0, and Element UI, the most useful UI component library, has released a new version for Vue3.0, so it’s time to start learning about these two new technologies.

This article mainly records the process of using Vue CLI to complete the project construction.

Install and upgrade the latest Vue CLI 4.x

npm install -g @vue/cli
Copy the code

Enter vue -v (uppercase V) to view version @vue/ CLI 4.5.9, be sure to install the new version, or you will not be able to use Vue 3.

Create a Vue 3.0 project

Select the middle option to directly create a 3.0 project, and select the last option to manually create version 2.0 or 3.0 and other configuration items.

Element Plus was introduced into the project

Element UI has also released an updated version of Vue 3.0, Element Plus github.com/element-plu… The Vue CLI can be imported with one click

cd my-app
vue add element-plus
npm run serve
Copy the code

Press enter to confirm, and Element Plus is automatically added to the project. This completes a project that uses the Vue 3.0 + Element Plus component library.

Learn changes to Vue 3.0 entry files

Open the generated project and take a look. Unlike version 2.0, 3.0 uses createApp(App) to create an instance of Vue and then uses the familiar use to introduce the Element UI component library.

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
Copy the code

Project code Sharing

Github.com/element-plu…

In 2021, learn Vue 3.0 and Element UI.