1. 首页首页
  2. 编程日记编程日记

vue 安装（vue 安装elementui）

编程日记 • • 阅读 36

vue 安装（vue 安装elementui）ElementUI 是 Vue js 的强大 UI 框架 让前端界面开发变得简单高效 本教程将带你从安装到实战 快速掌握 ElementUI 的核心技巧 核心内容 项目搭建 快速设置 Vue 项目并集成 ElementUI 组件使用 学习如何在你的 Vue 应用中使用 ElementUI 组件 页面与路由 创建组件 配置路由 实现页面导航 样式与图标



ElementUI 是 Vue.js 的强大 UI 框架，让前端界面开发变得简单高效。本教程将带你从安装到实战，快速掌握 ElementUI 的核心技巧。

核心内容：
项目搭建： 快速设置 Vue 项目并集成 ElementUI。
组件使用： 学习如何在你的 Vue 应用中使用 ElementUI 组件。
页面与路由： 创建组件，配置路由，实现页面导航。
样式与图标： 定制按钮样式，使用图标库增强界面。
在这里插入图片描述
ElementUI 专栏 : https://blog.csdn.net/m0_53117341/category_12780595.html





我们使用这个命令 , 就可以创建出项目名称为 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 即可
 
  
 
  
 
  
 
  
不知道你的 Vue 工程是否创建成功 , 如果对你有帮助的话 , 还请一键三连~
 在这里插入图片描述
今天的文章 
  vue 安装（vue 安装elementui）分享到此就结束了，感谢您的阅读。 
  

                    


                    


                    

                        

                            

                                编程小号
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2025-10-19 23:27
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2025-09-02 21:11
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，
                        请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/8457.html