vue3 element-plus + vite
时间: 2025-01-14 19:36:37 浏览: 66
### 使用 Vue 3 和 Element Plus 框架与 Vite 构建项目指南
#### 创建新项目
要创建一个新的基于 Vue 3 的项目并集成 Element Plus UI 库,可以利用 `create-vue` 或者手动配置 Vite 来初始化环境。这里推荐使用官方脚手架工具来简化流程。
安装 Node.js 后,在命令行输入如下指令以启动交互式的项目搭建向导:
```bash
npm create vue@latest
```
按照提示选择合适的选项完成设置过程即可获得一个基础框架[^1]。
#### 安装依赖包
进入刚刚建立好的文件夹目录下执行下面这条语句将会自动下载所需的全部库文件到本地环境中去:
```bash
cd my-project && npm install element-plus vite
```
这一步骤会把 Element Plus 组件库连同开发服务器一起加入进来以便后续操作更加便捷高效[^2]。
#### 配置样式资源路径
为了让应用能够正确加载来自 Element Plus 的 CSS 文件,需要编辑根组件中的 `<style>` 标签部分或者单独新建全局样式表单引入必要的变量定义等内容。通常情况下只需要简单添加一行 import 即可实现目的:
```javascript
// main.js
import 'element-plus/dist/index.css'
```
这样做的好处是可以让所有的页面都继承统一的设计风格而无需重复书写相同的代码片段。
#### 编写第一个页面
打开 src/views 下任意 .vue 结尾的文档尝试编写一段简单的 HTML 加上对应的 JavaScript 方法调用来测试功能是否正常运作。比如展示按钮点击事件触发的消息框弹窗效果:
```html
<template>
<el-button @click="openMessageBox">Click Me!</el-button>
</template>
<script setup lang="ts">
const openMessageBox = () => {
ElMessage({
message: "Hello, World!",
type: "success"
});
};
</script>
```
上述例子展示了如何通过组合式 API 形式快速构建响应式界面的同时还实现了跨平台消息通知机制。
#### 运行调试模式
最后回到终端窗口里键入以下命令开启热更新服务端口监听状态方便实时预览修改后的成果:
```bash
npm run dev
```
此时浏览器应该能顺利访问 http://localhost:3000 地址看到预期的效果了。
阅读全文
相关推荐
















