使用 `
Vite`
+ `
Vue 3`
+ `TypeScript`
+ `Element Plus` 初始化一个
前端项目是一个非常现代且高效的开发组合。下面我将一步步带你完成
项目的初始化，并提供完整代码
和解释。
---
### ✅ 步骤一：使用
Vite 创建 Vue + TypeScript
项目
打开终端，运行以下命令：
```bash
npm create
vite@latest my
-vue-element
-plus
-app
-- --template
vue-ts
```
> 这会
创建一个名为 `my
-vue-element
-plus
-app` 的
项目，使用
Vue 3 + TypeScript 模板。
进入
项目目录：
```bash
cd my
-vue-element
-plus
-app
```
安装依赖：
```bash
npm install
```
---
### ✅ 步骤二：安装 Element Plus
Element Plus 是
Vue 3 官方推荐的
UI 组件库。
```bash
npm install element
-plus @element
-plus/icons
-vue
```
---
### ✅ 步骤三：全局引入 Element Plus（完整引入）
编辑 `src/main.
ts` 文件：
```
ts
// src/main.
ts
import { createApp } from &#
39;
vue&#
39;
import App from &#
39;./App.
vue&#
39;
// 引入 Element Plus 及其样式
import ElementPlus from &#
39;element
-plus&#
39;
import &#
39;element
-plus/dist/index.css&#
39;
// 可选：中文语言包（如果需要）
import zhCn from &#
39;element
-plus/es/locale/lang/zh
-cn&#
39;
const app = createApp(App)
// 使用 Element Plus
app.use(ElementPlus, { locale: zhCn })
app.mount(&#
39;#app&#
39;)
```
---
### ✅ 步骤四：在组件中使用 Element Plus 组件
修改 `src/App.
vue` 示例内容：
```
vue
<template>
<div class="app
-container">
<el
-config
-provider :locale="zhCn">
<el
-button type="primary" @click="handleClick">主要按钮</el
-button>
<el
-button type="success">成功按钮</el
-button>
<el
-input v
-model="inputValue" placeholder="请输入内容" style="width: 200px; margin
-left: 10px;" />
<el
-icon style="margin
-left: 10px;"><Edit /></el
-icon>
</el
-config
-provider>
</div>
</template>
<script setup lang="
ts">
import { ref } from &#
39;
vue&#
39;
import { Edit } from &#
39;@element
-plus/icons
-vue&#
39;
import zhCn from &#
39;element
-plus/es/locale/lang/zh
-cn&#
39;
const inputValue = ref(&#
39;&#
39;)
const handleClick = () => {
alert(&#
39;Hello from Element Plus!&#
39;)
}
</script>
<style scoped>
.app
-container {
padding: 20px;
font
-family: Arial, sans
-serif;
}
</style>
```
---
### ✅ 步骤五：启动
项目
```bash
npm run dev
```
访问 `http://localhost:517
3` 即可看到 Element Plus 的按钮、输入框等组件正常显示。
---
### 🔍 解释说明
- **
Vite**：极速构建工具，利用浏览器原生 ES Modules 提供闪电般启动速度。
- **
Vue 3 + `<script setup>`**：组合式 API，更简洁的语法糖。
- **TypeScript**：提供类型检查，增强代码健壮性。
- **Element Plus**：
- `element
-plus/dist/index.css`：必须引入的样式文件。
- 图标需单独从 `@element
-plus/icons
-vue` 导入并注册。
- 使用 `<el
-config
-provider>` 可统一配置国际化（如中文）。
---
### 🚀 可选优化：按需导入（减少打包体积）
如果你不想全量引入 Element Plus，可以使用插件实现按需加载：
#### 安装插件：
```bash
npm install
-D unplugin
-vue-componen
ts unplugin
-auto
-import
```
#### 配置 `
vite.config.
ts`：
```
ts
//
vite.config.
ts
import { defineConfig } from &#
39;
vite&#
39;
import
vue from &#
39;@
vitejs/plugin
-vue&#
39;
import AutoImport from &#
39;unplugin
-auto
-import/
vite&#
39;
import Componen
ts from &#
39;unplugin
-vue-componen
ts/
vite&#
39;
import { ElementPlusResolver } from &#
39;unplugin
-vue-componen
ts/resolvers&#
39;
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Componen
ts({
resolvers: [ElementPlusResolver()],
}),
],
})
```
这样你就可以无需手动导入组件
和图标，它们会在使用时自动注册。
---
### ✅ 最终
项目结构概览
```
my
-vue-element
-plus
-app/
├── src/
│ ├── main.
ts
│ ├── App.
vue
│ └── componen
ts/
├──
vite.config.
ts
├──
tsconfig.json
├── package.json
└── index.html
```
---
###
扫一扫
2799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
