从0到1搭建vue3+ts+vite+element-plus初始版本后台系统

Chad2025-04-16 14:17

开始前

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

因为vite是需要node.js版本>=12.0.0

脚手架搭建

kotlin 复制代码

npm init vite@latest

需要安装Create-Vite@6.3.1，输入y回车

填写项目名称回车

选择熟悉的框架回车，如vue

选择语法回车，如ts

根据方框里面的步骤执行

然后npm run dev，得到这个页面脚手架搭建成功！

下载element-plus

ruby 复制代码

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

在main.ts中引入

javascript 复制代码

// 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')

在页面中使用

最后效果如下