Vue开发实例(03)之Vue项目引入element_ui
作者简介
作者名:编程界明世隐
简介: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的提示来安装。
- 先在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 = falsenew Vue({render: h => h(App),
}).$mount('#app')
可以发现这里和之前Vue3项目有些不一样吧。
- 根据提示来安装element-ui(IDEA纠错提示快捷键,大家都会按吧 alt + enter )
如果没安装成功 import ElementUI from ‘element-ui’; 这句话会有错误提示的,如下图:
等待安装完毕,运行项目,熟悉的也没又回来了
总结
- 安装element时候发现错误,可以利用IDEA的纠错来安装
- 项目运行错误,考虑在创建时选择vue2,不选择Vue3
- 这里只是将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从零到精通
Vue开发实例(03)之Vue项目引入element_ui相关推荐
- Vue开发实例(05)之搭建项目主页面头部、导航、主体等页面布局
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Vue开发实例(13)之axios和mockjs的安装与使用
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Vue开发实例(14)之Vue状态管理store
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- Vue开发实例(16)之创建标签页
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- Vue开发实例(11)之el-menu实现左侧菜单导航
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Vue开发实例(15)之动态路由
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- 3.vue开发实例演示
个人博客:http://blog.kunpw.cn/ vue开发实例演示 1.解剖初始化模板 1.1 vue文件 如图所示,对于一个新建的vue文件而言,其中标签分为三个部分: template标签: ...
- Vue开发实例(12)之实现动态左侧菜单导航
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
- Vue开发实例(17)之实现用户列表
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- Vue开发实例(09)之按钮的使用
作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
最新文章
- OO真经——关于面向对象的哲学体系及科学体系的探讨(上)
- 终身成长究竟有多重要?
- python 知识点怎么办_在Python中处理日期和时间的基本知识点整理汇总
- 2017-11-15 软件包 java.io学习
- 半平面交练习(计算几何)
- 用python打印出各类三角形(正三角形、倒三角形、左上角左下角三角形、右上角右下角三角形)
- native与ascii互转
- VS 安装部署项目自解压程序解压后按顺序执行多个程序
- eclipse更改android版本,在Android Studio和Android Eclipse 更改现有项目里的SDK版本
- asp.net 读写 XML 小结
- sql ,类型转换,日期截取格式
- 后端游戏引擎调研-2021.07
- 问题匹配/文本匹配数据集(自用)
- html里怎么旋转视频文件,拍摄的视频如何旋转 三种方法教你旋转视频
- 邮箱如何撤回已发送的邮件?
- DeFi黑暗森林历险记,我这样追回了百万美元
- DSP之TMS320F28335学习总结与笔记(二)————ADC模块
- mysql查询学生表年龄语句_mysql中一张(居民)表按年龄段查询数据
- 求助:Appium 如何实现登录手机淘宝时拖动苹果到购物车的验证
- Oracle 查询当前系统时间的几种方式
热门文章
- 无人机模拟操控凤凰模拟器(PhoenixRC 5.0)安装及配置图文教程(附凤凰模拟器下载地址)
- 折腾凤凰系统 (by quqi99)
- 蓝桥杯JAVA版答案汇总
- LWIP协议栈详解(2)_网络接口层与协议栈初始化
- 集成应用|契约锁与100+管理软件实现集成应用
- 计算机科学概论教学,《计算机科学概论》理论教学大纲
- 【全套完结】模拟电子技术基础——全套实验手册及仿真工艺实习【建议保存】
- 5分钟实战QQ机器人教程(保姆级)
- 为了进大厂,韩顺平Java教程百度云
- Receive 163 mails