ElementUI 是 Vue.js 的强大 UI 框架，让前端界面开发变得简单高效。本教程将带你从安装到实战，快速掌握 ElementUI 的核心技巧。
我们使用这个命令 , 就可以创建出项目名称为 element 的项目
全称是 vue-cli init webpack element , 直接使用缩写形式即可
我们可以直接运行当前项目
稍等片刻 , 我们访问控制台提供给我们的链接 , 我们就可以访问到 Vue 的主页了
我们访问 ElementUI 的介绍文档
https://element.eleme.cn/#/zh-CN/component/installation
那接下来 , 我们还需要指定当前项目使用 ElementUI
https://element.eleme.cn/#/zh-CN/component/quickstart
那我们将这段代码粘贴到 main.js 中
那我们重新启动项目
然后我们观察一下
:
: 这句代码指的是路由相关内容
那我们也可以将自己写的页面作为组件装载到 vue 中展示给用户
我们需要在 components 文件夹下编写我们的页面
我们先将这个组件注册到 vue 中 , 打开 router 目录下面的 index.js
其中 , name 属性也是可以省略的
然后我们在首页也添加一个超链接 , 点击即可跳转到我们的 Button 页面
接下来 , 我们就可以实现 Button.vue 组件了
我们将 ElementUI 官网提供给我们的样式全部复制
https://element.eleme.cn/#/zh-CN/component/button
我们刷新页面
那我们还可以更换简洁按钮的图标 , 打开 ElementUI 的图标库 : https://element.eleme.cn/#/zh-CN/component/icon
选择一个自己喜欢的图标 , 复制它的名称然后替换 icon 即可
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/45626.html