Use ElementPlus and configure routing in Vue3.0 project (vite build)

Article directory

foreword

We explained how to build a vue project in the previous article. In this article, we will explain how to use element plus in the project and how to configure routing

1. Use element plus in the project

Step 1: Install element plus

Open our vue project with vscode, create a new terminal, and enter the command in the terminal: npm install element-plus --save; wait for the command to complete.
insert image description here

Step 2: Introduce element plus

Open the main.js file and introduce element in the file, as follows:

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

createApp(App).use(ElementPlus).mount('#app')

Step 3: Select the required components, copy and paste

Open the official website of element plus , find the component list, select the source code of the required component, copy and paste it into the App.vue file of the project (take the Button component as an example): after
insert image description here

saving and running the project, you can see that the component of element is ready to use:

2. Install routing

Step 1: Install router

Enter the command in the terminal: npm install vue-router@4 and wait for the command to complete.

Step 2: Create a route list

Create a router folder under the src root directory, create an index.js file in the folder, and configure the routing list in the file as follows:

import {
    
     createRouter, createWebHistory } from "vue-router";  //导入路由
const routes = [
    {
    
    
        path:'/login', // 要路由到的url路径
        name:'login',
        component:()=>import('../components/login.vue'), //导入路由页面的路径
    }
];

const router = createRouter({
    
        // 定义一个路由器
    history:createWebHistory(),
    routes
});

export default router;

Note: login.vue is a new vue file we created under the components folder. In this file, develop the functions you want

Step 3: Configure App.vue

Modify the content in App.vue as follows:

<template>
  <router-view/>
</template>

Step 4: Modify main.js

Then import the router defined in index.js into main.js, and use:

import {
    
     createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index.js'  //引入定义好的路由

createApp(App).use(ElementPlus).use(router).mount('#app') //使用路由

Step 5: Run the project

Visit http://localhost:3000/login, you can see that the route we set has been successful, and you can access our login.vue page through /login
insert image description here