Recently, I have been paying attention to VUe3. I have tried to use Element Plus and VUe3 before, and the building tool is Vite1.+. I found elementPlus’s website earlier that it was already fixed, so I’m here to try it again. Without further ado, let’s go directly to the process code and steps: First of all, the building tools are Webpack, VUE-CLI and Vite. I used Vite to build vuE3 project

# npm 6.x
npm init @vitejs/app vue3_elementplus --template vue

cd vue3_elementplus
npm install
npm run dev
Copy the code

This makes it easy to build a VUE3 project, and there are other ways to build it that you can check out the official documentation

The introduction of element Plus

NPM install elemental-plus-s install elemental-plus-s install elemental-plus-s install elemental-plus-s install elemental-plus-s unplugin-vue-components ```js npm install unplugin-vue-components -DCopy the code

Referenced in the viet.config.js file

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

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: true.include: [/\.vue$/./\.vue\? vue/./\.md$/]})],... })Copy the code

Style files need to be introduced in the main.js file

import 'element-plus/dist/index.css'
Copy the code

This can be used in any component as follows:

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

Some Element Plus modules, such as Message, need to be referenced manually in components

<script setup>
    import { ElMessage } from "element-plus";
    
    function msg() {
        ElMessage({
            showClose: true.type: "success".message: "Success tip!"
        });
    }
</script>

<template>
    <el-button @click="msg">prompt</el-button>
</template>
<style>.</style>
Copy the code

Vue3 router (@4) : vue3 router (@4) : vue3 router (@4)

npm install vue-router@4 -S
Copy the code

Create a router directory in the SRC directory and create an index.js file in it

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{path: '/'.component: () = > import('.. /views/index.vue') // This is the route to the sound load, can also be other ways}]})export default router;
Copy the code

After the configuration, you can reference it in the main.js file

import { createApp } from 'vue'
import App from './App.vue'
import routers from './router/index'

import 'element-plus/dist/index.css'

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

Finally, modify the app.vue file

<template>
    <router-view></router-view>
</template>
......
Copy the code

Now that you’re done, the simple project framework is in place.

For the first time, if there is a mistake, welcome to leave a message to spray.