当前位置：首页 > news >正文

vue搭建+element引入

news 来源：原创 2025/5/10 7:27:58

vue搭建+element

在使用Vue.js开发项目时，经常会选择使用Element UI作为UI框架，因为它提供了丰富的组件和良好的设计，可以大大提高开发效率。以下是如何在Vue项目中集成Element UI的步骤：

1. 创建Vue项目

如果你还没有创建Vue项目，可以使用Vue CLI来创建一个。首先确保你已经安装了Node.js和npm。然后，安装Vue CLI：

npm install -g @vue/cli

创建一个新的Vue项目：

vue create my-project

可以选择vue2或者vue3 ,这里我选vue2

2. 进入项目目录

cd my-project

3. 安装Element UI

在项目目录中，使用npm或yarn来安装Element UI：

推荐npm方式

npm install element-ui --save
# 或者使用yarn
yarn add element-ui

4. 在项目中引入Element UI

方法一：全局引入（推荐）

在`main.js`或`main.ts`文件中全局引入Element UI及其样式：

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);new Vue({render: h => h(App),
}).$mount('#app');

如果出现以下报错，大概率是vue版本和element版本对应不上，

vue2对应Element UI

vue3对应element-plus

看下 package.json文件，是否是3.0以上版本，vue3要对应 Element Plus

在你的 Vue 项目目录中，运行以下命令来安装 Element Plus：

npm install element-plus --save

在项目中引入 Element Plus

全局引入

在 `main.js` 或 `main.ts` 文件中全局引入 Element Plus 和其样式：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')