vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化

最新推荐文章于 2026-06-10 00:02:49 发布

原创最新推荐文章于 2026-06-10 00:02:49 发布 · 422 阅读

2 ·

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

标签

#vue.js

vite+vue+ts+element从零开发管理后台框架专栏收录该内容

23 篇文章

订阅专栏

创建项目

使用npm view create-vite versions可以查看所有版本

npm create vite@5.4.0 vueelementplus -- --template vue-ts

运行项目

cd vueelementplus
npm install
npm run dev

VITE v5.3.4  ready in 670 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

浏览器访问 http://localhost:5173/

初始页

Node.js TypeScript 类型支持

npm install @types/node -D

删除无用资源

删除src/assets/vue.svg、src/components/HelloWorld.vue。

统一和初始化浏览器样式

安装normalize.css

npm install normalize.css@8.0.1

编辑src/main.ts，导入normalize.css。

import { createApp } from 'vue'

import 'normalize.css/normalize.css'

编辑src/style.css，内容如下。

* {
  margin: 0;
  padding: 0;

  /* border 和 padding 包含在 width 和 height 之内 */
  box-sizing: border-box;
}

添加 Element Plus

安装

npm install element-plus@2.7.7

编辑src/main.ts，完整引入。

import { createApp } from 'vue'

import 'normalize.css/normalize.css'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import './style.css'

import App from './App.vue'


const app = createApp(App)

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

编辑tsconfig.app.json，compilerOptions字段添加如下配置，支持Vue - Official插件。

"noFallthroughCasesInSwitch": true,

"types": ["element-plus/global"]

编辑src/App.vue，测试按钮组件。

<template>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
</template>

element-plus测试