Vite 搭建 Vue3 项目全过程

原创于 2021-03-11 09:51:06 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Vite快速搭建Vue3项目，并配置Vue-router、Vuex及Element Plus等依赖。通过具体步骤引导读者完成环境配置及项目运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Vite 搭建 Vue3 过程，并进行配置，推荐使用 yarn 进行依赖管理

第一步：用 vite 搭建项目

yarn create @vitejs/app my-vue-app --template vue
cd my-vue-app   // 打开项目目录

第二步：安装必要的依赖

安装 vue-router4

yarn add vue-router@4

安装 vuex

yarn add vuex@next

安装 element-plus UI

yarn add element-plus

第三步：配置 vite.config.js 别名

import vue from '@vitejs/plugin-vue'
import path from 'path'
export default {
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }  
    }
}

第四步：运行项目

yarn dev

个人博客：Cikayo个人博客https://www.cikayo.com/