elementui初学1

发布于：2025-05-22 ⋅ 阅读:(27) ⋅ 点赞:(0)

当然可以！下面是从零开始创建一个最简单的 Element UI 程序的完整流程，基于 Vue 2 + Element UI（如果你想用 Vue 3，请告诉我，我可以给你 Element Plus 的版本）。

✅ 一、准备环境

确保你已经安装了：

Node.js ≥ 10.x
npm 或 yarn

打开终端，检查：

node -v
npm -v

✅ 二、创建 Vue 项目（基于 Vue CLI）

1. 安装 Vue CLI（如果还没装）：

npm install -g @vue/cli

2. 创建一个新项目：

vue create my-element-app

在弹出的选项中选择：

Default preset（babel, eslint） → 回车即可

进入项目目录：

cd my-element-app

✅ 三、安装 Element UI

npm install element-ui --save

✅ 四、在项目中引入 Element UI

打开 src/main.js，修改如下：

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

✅ 五、使用 Element UI 组件

编辑 src/App.vue：

<template>
  <div id="app">
    <el-button type="primary">你好，Element UI！</el-button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  margin: 40px;
}
</style>

✅ 六、运行项目

npm run serve

打开浏览器访问：
👉 http://localhost:8080，你将看到一个 蓝色的 Element 按钮。

✅ 七、完成！

你已经成功搭建了一个最基本的 Element UI 项目！🎉
接下来你可以尝试使用其他组件，例如：

<el-input placeholder="请输入内容"></el-input>
<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>