SoFunction
Updated on 2025-04-04

Implementation steps for initialization of vite+vue3 project

Vite+vue3 project initialization and construction

"nodejs": v18.19.0
"pnpm": 8.15.0
"vue": v3.4.21
"vite": v5.2.0

1. Create a project

Vite Chinese official website

pnpm create vite@latest

Project name: gd_web
Select the frame: Vue3
Select language: JavaScript
Enter the project: cd gd_web
Installation dependencies: pnpm i
Start the project: pnpm run dev

2.Configure.editorconfig

# 
# Root directory configuration, indicating that the current directory is the root directory of the editor configurationroot = true

[*] # Apply the following configuration to all filescharset = utf-8 # Encoding with UTF-8indent_style = space # Use spaces to indentindent_size = 4 # Use 4 spaces per indentation levelend_of_line = lf # Use LF (Linux and macOS newline)insert_final_newline = true # Insert a blank line at the end of the filetrim_trailing_whitespace = true # Automatically delete whitespace characters at the end of the line
[*.md] # Apply the following configuration to a Markdown file with the extension .mdinsert_final_newline = false # Do not insert a blank line at the end of the filetrim_trailing_whitespace = false # Do not automatically delete whitespace characters at the end of the line

3. Alias ​​configuration

When developing a project, the relationship between files may be very complicated, so we need to configure an alias for the src folder! ! !

In the file:

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

// /config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // Configure alias        alias: {
            "@": ("./src") // Relative path alias configuration, use @ instead of src        },
        //The extensions array means that when importing the component, it automatically completes the suffixes of .vue and other files.        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

If the path module is not recognized

pnpm install @types/node --save-dev

After the configuration is completed, we found that there is no prompt after '@'. At this time, we create it in the root directory.document

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

4. Configuration of environment variables

During the project development process, it will go through at least three stages: development environment, testing environment and production environment (i.e. formal environment). The status of requests at different stages (such as interface addresses, etc.) is different. Manual switching of interface addresses is quite cumbersome and prone to errors. Therefore, the requirement of environmental variable configuration came into being. We only need to make simple configurations and hand over the work of switching environment states to the code.

Development environment
As the name suggests, in the environment for development and use, each developer works on his own dev branch. When he develops to a certain level, his colleagues will merge the code and conduct joint debugging.

Testing environment
Test the environment in which colleagues work. Generally, the test colleagues will deploy it themselves and then test it in this environment.

Production environment (production)
Production environment refers to formally providing external services, which generally closes the error report and opens the error log. (Formal environment for customer use.)

Note: Generally speaking, an environment corresponds to a server, and some companies develop and test environments as a server! ! !

Add files for the development, production and testing environments in the project root directory respectively!

.
.
.

File content:

# Variables must be prefixed with VITE_ to be exposed to external readsNODE_ENV = 'development'
VITE_APP_TITLE = 'Project name'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVE = 'http://127.0.0.1:8990'

# Variables must be prefixed with VITE_ to be exposed to external readsNODE_ENV = 'production'
VITE_APP_TITLE = 'Project name'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE = 'http://127.0.0.1:8990'

# Variables must be prefixed with VITE_ to be exposed to external readsNODE_ENV = 'test'
VITE_APP_TITLE = 'Project name'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://127.0.0.1:8990'

Configure the run command:

 "scripts": {
    "dev": "pnpm vite --open",
    "build:test": "pnpm vite build --mode test",
    "build:pro": "pnpm vite build --mode production",
    "preview": "vite preview"
  },

By getting environment variables

5. Install the css preprocessor sass

pnpm install -D sass sass-loader

Used in components:

<style scoped lang="scss"></style>

Global style definition:
Create a file in the src/styles directory;
Of course, clear the default style is required in the project, and you can import it

//Introduced into the file@import "";

Introduce global styles in the entry file:

import '@/styles/'

There is no way to use variables in the src/styles/global style file. Therefore, global variables need to be introduced into the project. Therefore, global variables need to be introduced into the project. Therefore, global variables need to be introduced into the project.

Create a file in style/!

The file configuration is as follows:

export default defineConfig((config) =&gt; {
	//Configure scss global variable    css: {
        preprocessorOptions: {
            scss: {
                javascriptEnabled: true,
                additionalData: '@import "./src/styles/";'
            }
        }
    }
}

6. Integrate Element-plus

Element-plus official website

Install:

pnpm install element-plus --save

Configuration automatic import: Required to installunplugin-vue-componentsandunplugin-auto-importThese two plug-ins

pnpm install -D unplugin-vue-components unplugin-auto-import

Add in vite configuration file:

// 
import {defineConfig} from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    // ...
    plugins: [
        // ...
        AutoImport({
            resolvers: [ElementPlusResolver()],
            // Automatically import Vue related functions, such as: ref, reactive, toRef, etc.            imports: ['vue'],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        // ...
    ],
})

Configure the Element-plus component content to display in Chinese:
Add to the file

// Introduce element-plus styleimport ElementPlus from 'element-plus'
import 'element-plus/dist/'
import locale from 'element-plus/dist/locale/'
(ElementPlus, {locale})

Element-plus icon global use

pnpm install @element-plus/icons-vue

Register all icons in component/file
Import all icons from @element-plus/icons-vue and register globally

// Introduce all icons provided by element-plusimport * as ElementPlusIconsVue from '@element-plus/icons-vue'

// Expose plug-in objects to the outsideexport default {
    // It must be called the install method, and there will be an APP object to pass parameters;    // When introducing and using the entry file, this method will be automatically executed    install(app) {
        // Register the icon provided by element-plus as a global component        for (const [key, component] of (ElementPlusIconsVue)) {
            (key, component)
        }
    },
}

Introduce src/file in the entry file, install the custom plug-in through the method

// Register global componentsimport gloablComponent from '@/components/'
(gloablComponent)

Use: See the official website for details

&lt;!-- use el-icon for SVG Icon provides attributes --&gt;
&lt;template&gt;
    &lt;div&gt;
        &lt;el-icon :size="size" :color="color"&gt;
            &lt;Edit/&gt;
        &lt;/el-icon&gt;
        &lt;!-- 或者独立use它，Not getting attributes from parent --&gt;
        &lt;Edit/&gt;
    &lt;/div&gt;
&lt;/template&gt;

Icon Configuration

Install SVG dependency plugin

pnpm install vite-plugin-svg-icons -D

Configure plug-ins in

plugins: [
    // ...
    // Configure custom SVG icon    createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [((), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
    }),
    // ...
]

Importing the entry file()

// Register SVG iconimport 'virtual:svg-icons-register'

Encapsulate svg as global component

Because many modules of the project need to use icons, encapsulate it as a global component! ! !

Create a SvgIcon component in the src/components directory: it represents the following

&lt;template&gt;
    &lt;div&gt;
        &lt;svg :style="{ width: width, height: height }"&gt;
            &lt;use :xlink:href="prefix + name" rel="external nofollow"  :fill="color"&gt;&lt;/use&gt;
        &lt;/svg&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
defineProps({
    //xlink: prefix of href attribute value    prefix: {
        type: String,
        default: '#icon-'
    },
    //The name of the svg vector image    name: String,
    //The color of the svg icon    color: {
        type: String,
        default: ""
    },
    //svg width    width: {
        type: String,
        default: '16px'
    },
    //svg height    height: {
        type: String,
        default: '16px'
    }

})
&lt;/script&gt;
&lt;style scoped&gt;&lt;/style&gt;

Create a file in the src/components folder directory: to register all global components inside the components folder! ! !

import SvgIcon from './SvgIcon'
const components = { SvgIcon }
// Introduce all icons provided by element-plusimport * as ElementPlusIconsVue from '@element-plus/icons-vue'

// Expose plug-in objects to the outsideexport default {
    // It must be called the install method, and there will be an APP object to pass parameters;    // When introducing and using the entry file, this method will be automatically executed    install(app) {
        //Register global SVG component        (components).forEach((key) =&gt; {
            (key, components[key])
        })
        // Register the icon provided by element-plus as a global component        for (const [key, component] of (ElementPlusIconsVue)) {
            (key, component)
        }
    },
}

Introduce src/file in the entry file, install the custom plug-in through the method

// Register global componentsimport globalComponent from '@/components/'
(globalComponent)

8. Configure and encapsulate axios

Install axios:

pnpm install axios

Create utils/ in the root directory

import axios from "axios";
import {ElMessage} from "element-plus";
//Create an axios instancelet request = ({
    baseURL: .VITE_APP_BASE_API,
    timeout: 5000
})
//Request an interceptor(config =&gt; {
    return config;
});
//Response Interceptor((response) =&gt; {
    return ;
}, (error) =&gt; {
    // Handle network errors    let msg = '';
    let status = ;
    switch (status) {
        case 401:
            msg = "Token expires";
            break;
        case 403:
            msg = 'No access';
            break;
        case 404:
            msg = "Error request address";
            break;
        case 500:
            msg = "There is a problem with the server";
            break;
        default:
            msg = "No network";

    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return (error);
});
export default request;

Unified interface management

When developing projects, many interfaces may need to be managed uniformly. Create API folder in the src directory to manage the project uniformly;

For example:

//Unified user-related interface managementimport request from '../utils/'

//Request address related to project userconst API = {
    LOGIN_URL: '/admin/acl/index/login',
    USERINFO_URL: '/admin/acl/index/info',
    LOGOUT_URL: '/admin/acl/index/logout',
}

//Login interfaceexport const reqLogin = (data) =&gt; (API.LOGIN_URL, data)

//Get user informationexport const reqUserInfo = () =&gt; (API.USERINFO_URL)

//Loginexport const reqLogout = () =&gt; (API.LOGOUT_URL)

10. Configure vue-router

Install:

pnpm install vue-router@4

1. Create src/router/file, use lazily loading to optimize access performance

import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () =&gt; import('../views/') // It is recommended to perform lazy routing loading to optimize access performance    },
    {
        path: '/about',
        name: 'About',
        component: () =&gt; import('../views/')
    }
]

const router = createRouter({
    // history: createWebHistory(), // Use history mode    history: createWebHashHistory(),	 // Use hash mode    routes
})

export default router

2. Use the router-view component in the file. The route matching to the component will be rendered through the router-view component.

<template>
    <div >
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about">About</router-link>
    </div>
    <router-view></router-view>
</template>

Introduce router

// ...
// Introduce routingimport router from './router/'
(router)
// ...

11. Configure pinia

Install:

pnpm install pinia

Introduced in the file:

// Introduce piniaimport {createPinia} from 'pinia'
(createPinia())

Create a foldersrc/storesManage some public data, user data, shopping cart data, etc. in this folder

definition

//Define the counter storeimport {defineStore} from 'pinia'

/*defineStore requires the parameter to be passed, the first parameter is id, which is a unique value.
 To put it simply, it can be understood as a namespace.
 The second parameter is an object, which has three modules to be processed, the first is state,
 The second is getters, and the third is actions.
 */
const useCounter = defineStore("counter", {
    state: () =&gt; ({
        count: 66,
    }),

    // getters is similar to the calculation properties in vue, which can modify existing data.    // No matter how many times you call, the function in getters will only be executed once and will be cached.    getters: {},

    actions: {}
})

//Expose this useCounter moduleexport default useCounter

use

&lt;script setup&gt;
// First, we need to introduce the store we just createdimport useCounter from '../stores/'
// Because it is a method, we have to call it// Note that after obtaining data, the structure will not be supported, and the structure will lose its responsiveness.const counterStore = useCounter()

()
&lt;/script&gt;

pinia provides a function storeToRefs solution. The function of citing the official API storeToRef is to use ref as a proxy for the structured data.

import {storeToRefs} from 'pinia'

const counterStore = useCounter()
// The structure is still responsive dataconst {count} = storeToRefs(counterStore)

Agent configuration

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'

// /config/
export default defineConfig(({command, mode}) =&gt; {
    // Load .env file according to `mode` in the current working directory    // Set the third parameter to '' to load all environment variables regardless of whether or not there is a `VITE_` prefix.    const env = loadEnv(mode, ())
    // (env)
    return {
        base: env.VITE_USER_NODE_ENV === 'production' ? './' : '/',
        plugins: [
            vue(),
            // Configure custom SVG icons            createSvgIconsPlugin({
                // Specify the icon folder to be cached
                iconDirs: [((), 'src/assets/icons')],
                // Specify symbolId format
                symbolId: 'icon-[dir]-[name]',
            }),
            // AutoImport({
            //     resolvers: [ElementPlusResolver()],
            // // Automatically import Vue related functions, such as: ref, reactive, toRef, etc.            //     imports: ['vue'],
            // }),
            // Components({
            //     resolvers: [ElementPlusResolver()],
            // }),
        ],
        resolve: {
            // Configure alias            alias: {
                "@": ("./src") // Relative path alias configuration, use @ instead of src            },
            //The extensions array means that when importing the component, it automatically completes the suffixes of .vue and other files.            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },
        // Configure scss variables        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    additionalData: '@import "./src/styles/";'
                }
            }
        },
        // Agent cross-domain        server: {
            // open: true, // Start the project and pop up the browser automatically            hmr: true, //Open hot loading            host: false, // Listen to all addresses            port: 6688, //Start port            strictPort: false, // When set to true, if the port has been occupied, it will exit directly instead of trying the next available port            https: false, // Whether to enable https            //proxy: createProxy(env.VITE_APP_API_HOST),
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    // Settings of server address for obtaining data                    target: env.VITE_SERVE,
                    //Open proxy cross-domain                    changeOrigin: true,
                    // secure: safe                    // If it is the https interface, you need to configure this parameter                    secure: false,
                    // Path rewrite                    // Replace '/api' in the request path with ''                    rewrite: (path) =&gt; (/^\/api/, ''),
                },
            },
        },
    }

})

This is the article about the implementation steps of the initialization construction of vite+vue3 project. For more related content on vite+vue3 initialization construction, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!