Load element-plus, windicss, vue-router, axios in the vue3 project

1. First you must have a node.js environment (if not, please go to site b to find tutorials)

2. Open the location where you want to create the file. I use vscode.

Here, open a terminal and run

npm create vue@latest

Complete the following selections:

3. Delete the files under components in the newly created file

4. Find App.vue, delete the code below, and it will become as shown below:

5. Open element-plus official website: Translation | Element Plusa Vue 3 based component library for designers and developershttps:// element-plus.org/zh-CN/guide/translation.html

Find the installation tutorial, as follows:

npm install element-plus --save

Copy the code in this column of npm and run it in the terminal:

Then open the element-plus official website and find “Quick Start”:

Make changes to main.js according to the above official website content:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

6. Open the windi-css official website: Vite integration | Windi CSS next-generation tool class CSS framework https://cn. windicss.org/integrations/vite.html

Select vite for the installation tutorial:

npm i -D vite-plugin-windicss windicss

Follow the tutorial here to change vite.config.js:

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

Change main.js as follows:

import 'virtual:windi.css'

7. Open the vue router official website: Getting Started | Official routing of Vue RouterVue.js https://router.vuejs.org/zh/guide/

The installation tutorial is as follows:

cnpm install vue-router@4

Run the following code in the terminal:

Then I will skip the installation tutorial.

In your project file, create a new router file under the src folder, and then create a new index.js file under the router folder.

Write the following code in the index.js file:

import {
    createRouter as _createRouter,
    createWebHashHistory,
} from 'vue-router'

// import index from "~/pages/index.vue"
const routes = [
]

//There is an error here. I don’t know why I can only use the function to return. If I define it directly, an error will be reported.
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router

Write the following code under main.js:

At this point, the basic creation of a vue project is completed. These are the most basic in the project.

main.js code:

import './assets/main.css'


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


import 'virtual:windi.css'

const app = createApp(App)
import router from './router'
app.use(router)
app.use(ElementPlus)
app.mount('#app')

vite.config.js code:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import WindiCSS from 'vite-plugin-windicss'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

router/index.js code:

import {
    createRouter as _createRouter,
    createWebHashHistory,
} from 'vue-router'

// import index from "~/pages/index.vue"
const routes = [
]

//There is an error here. I don’t know why I can only use the function to return. If I define it directly, an error will be reported.
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router

8. Open axios official website axios Chinese website | axios API Chinese documentation | axiosAxios is a promise-based HTTP library that can be used in browsers and node.js. http://www.axios-js.com/

Install axios:

cnpm install axios

Then in the src folder, create a new axios.js to store the address of the request response.

Write the following code in aixos.js:

import axios from 'axios'
const server = axios.create({
    baseURL:"http://127.0.0.1"//Local domain name
})
export default server;

9. Open element-plus’s icon official website

cnpm install @element-plus/icons-vue

Referenced in main.ts

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

10. Open echarts official website

Apache EChartsApache ECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/