作者简介

作者名：编程界明世隐
简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【02】将Vue项目代码导入到IDEA并运行
► 下一篇【04】更换项目入口

引入element-ui

安装node包，接上节，可以直接在IDEA的终端工具中使用如下命令：

npm i element-ui --save

在main.js中注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//这里的Vue要做修改，等会就知道了
Vue.use(ElementUI);

此时完整的main.js

import { createApp } from 'vue'
import App from './App.vue'

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

createApp.use(ElementUI);

createApp(App).mount('#app')

发现问题

我启动并打开项目，发现显示不出来，一片空白：

按F12打开调试工具，发现错误

解决方案

之前创建Vue项目的时候，选择的Vue3，现在改用vue2，重新创建项目（如何创建项目这里就不具体说了），参考之前的两篇文章，选择的时候选Vue2 版本即可。

在新项目中创建element

在创建Vue2项目后，在IDEA中打开，可以直接在IDEA的终端工具中使用如下命令，引入element：

npm i element-ui --save

如果安装不成功，则可以先注册（回到上面注册main.js 的地方），然后利用IDEA的提示来安装。

1. 先在main.js加入element全局注册：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

完整的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')

可以发现这里和之前Vue3项目有些不一样吧。

2. 根据提示来安装element-ui（IDEA纠错提示快捷键，大家都会按吧 alt + enter ）
   如果没安装成功 import ElementUI from ‘element-ui’; 这句话会有错误提示的，如下图：
   
   等待安装完毕，运行项目，熟悉的也没又回来了
   

总结

1. 安装element时候发现错误，可以利用IDEA的纠错来安装
2. 项目运行错误，考虑在创建时选择vue2，不选择Vue3
3. 这里只是将element-ui安装好，还没有使用，后面再介绍

小结

这节总结了“Vue项目引入element_ui”，希望能对大家有所帮助，请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】， 如果有兴趣跟小明哥一起学习Java的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【02】将Vue项目代码导入到IDEA并运行
► 下一篇【04】更换项目入口

热门专栏推荐

【1】Java小游戏（俄罗斯方块、植物大战僵尸等）
【2】JavaWeb项目实战（图书管理、宿舍管理等）
【3】JavaScript精彩实例（飞机大战、验证码等）
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通