手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统

最新推荐文章于 2026-05-05 09:22:21 发布

原创最新推荐文章于 2026-05-05 09:22:21 发布 · 5.8k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #typescript #yarn #elementui #vue

vue3 专栏收录该内容

2 篇文章

订阅专栏

本文详细指导了如何在Vite环境中使用Element Plus，包括设置Node.js版本、初始化项目、全局引入与按需引入的技巧，以及正确配置Vue 3和Element Plus。重点讲解了按需引入组件以优化性能。

准备工作

首先请确保你的node.js版本>=12.0.0

因为vite的兼容性，Vite 需要 Node.js 版本 >= 12.0.0。

如果你不知道你的node.js的版本是多少，请按照如下步骤

window+r

输入cmd，然后回车

然后输入node -v,就可以查看node.js版本啦

开始搭建

npm init vite@latest

如果出现下面的情况，是因为权限不够，你需要切换到管理员下运行

右键电脑左下角的windows，找到命令提示符（管理员）

cd切换到你需要搭建项目的目录，然后重新输入

npm init vite@latest

输入自己的项目名称

选择你熟悉的框架，回车，这里我选择的是vue

使用上下箭头，选择vue+ts，回车

然后方框里面的步骤执行

最后执行npm run dev，你就会得到这个页面啦啦啦啦啦啦

你以为这样就可以了？？？

不！不！不！

实际去开始项目，你还需要下载引入项目需要的vue-router，vuex，axios，element-plus等等依赖，这些根据自己项目的需求去搭建就好啦。

当然这里我就拿element-plus单独出来讲讲........是骡子是马，拉出来遛遛。。。。

1.下载element-plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

2.完整引入。在main.ts文件引入

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

const app = createApp(App)

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

根据官网的说法如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

补充知识：vue3在vscode使用的插件是volar（vue2的是vetur），为什么呢？？

解答：因为写过vue2的人都知道，vue的template里，只能有一个根标签，使用多标签，vetur插件就会提示你有错误，但是vue3之后，去掉了这个限制，template标签里是允许有多个标签的，这是vue3.0的新功能，所以我们需要使用适合vue3的volar插件

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

------------------------------------转折 -----------------------------------

就不对称，逼死强迫症！！！

完整引入一般是不推荐的，因为包面积太大了，对于性能不友好！！！！

一般推荐使用按需引入！！

2.按需引入，顾名思义，就是把你需要的组件一个个导入。当然官网很友好，推出了自动导入的。

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

#选择一个你喜欢的包管理器

#NPM
# npm install -D unplugin-vue-components unplugin-auto-import

#Yarn
$ yarn add -D unplugin-vue-components unplugin-auto-import

接着找到vite.configf.ts文件，插入以下代码

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

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

直接在页面使用就好

效果如下

想更多的了解element-plus引入，欢迎去官网看文档设计 | Element Plus

需要特别注意的是：element-plus中icon的引入！！！！

如果你按照文档上面的做法，老老实实的去安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue

然后直接使用

然后你就会得到。。一片空白？？？我的图标呢？？

正确的使用方法是，你还需要去引入一下图标

如果你走到这里，那么恭喜你，哈哈哈项目已经搭建好啦，可以开开心心的去开发啦！！

完结啦！！！小编就陪你到这了，剩下的路自己去走吧！

著作不易，喜欢的留下你的小脚丫。。

有不解的，请留言评论。。