Use Vue 3 and Vite to build basic cases to integrate Ele.me UI, routing, components and common plug-ins

Introduction:
Vue 3 and Vite are a very popular technology combination in current front-end development. They provide a fast and efficient development environment and a powerful ecosystem. This blog will introduce how to use Vue 3 and Vite to build a basic case, and integrate Ele.me UI, routing, components and common plug-ins, allowing you to quickly get started and build a powerful web application.

---

Step 1: Create project

First, we need to install the Vite tool to create a Vue 3-based project. Open the command line interface and execute the following command:

npm init vite@latest my-app -- --template vue

This command will create a new project using the Vue template provided by Vite and name it my-app. Then enter the project directory:

cd my-app

Use the following commands to install project dependencies and start the development server:

npm install
npm run dev

Now, we have successfully created a project based on Vue 3 and Vite and started the development server.

Step 2: Install Ele.me UI component library

Ele.me UI is a powerful and easy-to-use Vue component library, which provides rich UI components and interactive effects. We can use the following command to install Ele.me UI:

npm install element-plus --save

main.jsAfter the installation is complete, introduce the styles and components of Ele.me UI in the main entry file (usually ):

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

import App from './App.vue';

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

Now, we can use various components and styles provided by Ele.me UI in our projects.

Step 3: Configure routing

Using routing in Vue projects is a very common requirement. Vue Router is the routing management library officially provided by Vue. It can help us implement the routing function of SPA (Single Page Application). We can install Vue Router using the following command:

npm install vue-router@next --save

Create a new folder in the project root directory src/router, and then create a new file in the folder index.jsto configure routing:

import {
    
     createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    
    
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 添加其他路由配置...
];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
});

export default router;

src/main.jsIntroduce routing in the main entry file and mount it to the Vue application

Use:

import {
    
     createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Now we can use Vue Router to define and navigate different routes in our project.

Step 4: Write components and pages

Under src/viewsthe folder, create a Home.vuefile as a sample page:

<template>
  <div>
    <h1>Welcome to Home Page</h1>
    <!-- 添加其他页面内容... -->
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
/* 添加样式... */
</style>

In src/App.vuethe file, introduce and use router-viewcomponents to display the page content corresponding to the current route:

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

<script>
export default {
  name: 'App',
};
</script>

<style>
/* 添加样式... */
</style>

Now, we've created a simple example page and root component, and configured routing to display these pages.

Step 5: Use common plugins

In addition to the above-mentioned Ele.me UI and Vue Router, there are some other commonly used plug-ins that can help us better develop Vue projects. The following are how to install and use several commonly used plug-ins:

Axios: used to make HTTP requests

npm install axios --save

Introduce and use Axios where you need to send HTTP requests:

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

Vuex: for state management

npm install vuex@next --save

src/storeCreate a new file under the folder to index.jsconfigure and manage the status of the application:

import {
    
     createStore } from 'vuex';

const store = createStore({
    
    
  state: {
    
    
    // 状态数据...
  },
  mutations: {
    
    
    // 修改状态数据的方法...
  },
  actions: {
    
    
    // 异步操作和业务逻辑...
  },
});

export default store;

Introduce Vuex into the main entry file src/main.jsand mount it on the Vue application:

import {
    
     createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App).use(router).use(store).mount('#app');

Now, we can use Vuex in the project to manage the state of the application.

---

Congratulations! We have successfully built a basic case using Vue 3 and Vite, and integrated Ele.me UI, routing, components and common plug-ins. Through this case, we can quickly build a feature-rich web application and conduct further development and expansion.

I hope this blog was helpful, and if you have any questions or concerns, please feel free to ask. Thanks for reading!