Vue项目整合Element-ui


我使用的是WebStorm来新建Vue项目:

新建Vue项目

选择项都选择默认就行,最后新项目目录如下图所示:

新Vue项目目录

点击上图中红色框选出的"Terminal"打开终端

执行 “npm instal element-ui --save” 将Element-UI依赖添加到项目中去

整合Element-UI

想知道是否添加成功,可以进入“package.json”文件查看是否有element-ui版本信息

确认已整合Element-UI至项目

最后进入“main.js"文件中,添加以下代码方可使用Element-UI:

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

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

Vue.use(ElementUI)

删除掉的“element-ui/lib/theme-default/index.css”是老版本Element-UI的引入路径,已经失效;新的路径是下面的“element-ui/lib/theme-chalk/index.css”

main.js引入Element-UI

在新项目自动生成的HelloWorld.vue中使用Element-UI新建一个<el-button>,并新建一个普通<button>做对比;

.vue文件引入Element-UI以做验证

进入 “Terminal” 执行 “npm run start” 启动项目

运行项目

出现如下效果表明整合Element-UI成功

整合成功

下次再见咯~~~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容