elementui首页模板（vue elementui模板）
本文目录一览：
- 1、vue+ElementUI
- 2、三大前端框架布局element-ui（1.布局）
- 3、element-ui展示
- 4、关于element-ui的按需引入配置
- 5、element-ui 初始化页面框架
vue+ElementUI
排查发现是 "sass-loader": "^11.0.1", 版本过高导致，因此需要降低版本
解决方式
降低版本至： "sass-loader": "^7.3.1",
然后重新安装依赖 npm install
嵌套路由，又称子路由，在实际应用中，通常用多层嵌套的组件组合而成。
父路由在跳转的内容下的部分，再进行跳转
父路由用来控制，首页和登录页两个组件的跳转
子路由在父路由跳转的内容下，控制子组件的跳转。
方式一：
name 传递的是地址（或者组件名），通过 params 向== 路由中 ==传递参数。
注意，参数传递时，vue需要一个对象，绑定一个参数值 v-vind:
方式二：
注：传递参数时需要在路由中给组件命名，并以名字作为模板中的属性
如此便成功设置重定向
路由模式有两种：
修改如下：
如此，便不带#号了
至此，404配置成功
beforeRouterEnter ：在进入路由之前执行
beforeRouterLeave ：在离开路由前执行
to 相当于request, from 相当于response, next 相当于chain：从哪里来，到哪里去，是否继续往下走。
参数详解：
三大前端框架布局element-ui（1.布局）
（1）el-row和el-col配合使用
这个el-row定义的就是一行，然后这行被分为24列，这24列被el-col分配，配置里面的:span属性就可以分配这一行空间了。
1.1：列与列之间的间距可以在el-row中绑定：gutter来设定，：gutter绑定的是px
1.2：列的偏移量：el-col中绑定：：offset=""来设置，绑定的是栏数
1.3 :对齐方式(left,center,right)
设置el-row中的属性type，justify设置不同的对齐方式（start（左）, center（中）, end（右）, space-between（列之间中间平均分配）, space-around（整行平均列之间全部平均分配） ）
补充：xs、sm、md、lg 和 xl，至此的不同屏幕大小下的响应式布局。
（1）会使用el-container,el-main,el-aside,el-header,el-footer来快速布局
el-main,el-aside（有width属性）,el-header（height属性）,el-footer（height属性）必须要在el-container里面
element-ui展示
展示了 element-ui 的相应组件的功能及UI，以便快速浏览查询。
transition 。内置了几种过渡动画。
el-row el-col 。通过基础的 24 分栏，迅速简便地创建布局。
el-container 。用于布局的容器组件，方便快速搭建页面的基本结构。
i 。提供了一套常用的图标集合。
el-button 。常用的操作按钮。
el-link 。文字超链接。
el-radio 。在一组备选项中进行单选。
el-checkbox 。一组备选项中进行多选。
el-input 。通过鼠标或键盘输入字符。
el-input-number 。仅允许输入标准的数字值，可定义范围。
el-select 。当选项过多时，使用下拉菜单展示并选择内容。
el-cascader 。当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
el-switch 。表示两种相互对立的状态间的切换，多用于触发「开/关」。
el-slider 。通过拖动滑块在一个固定区间内进行选择。
el-time-picker 。用于选择或输入日期。
el-date-picker 。用于选择或输入日期。
el-upload 。通过点击或者拖拽上传文件。
el-rate 。评分组件。
el-color-picker 。用于颜色选择，支持多种格式。
el-transfer 。用于多次选择，统一确定的组件。
el-form .由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据.
el-table 。用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
el-tag 。用于标记和选择。
el-progress 。用于展示操作进度，告知用户当前状态和预期。
el-tree 。用清晰的层级结构展示信息，可展开或折叠。
el-pagination 。当数据量过多时，使用分页分解数据。
el-badge 。出现在按钮、图标旁的数字或状态标记。
el-avatar 。用图标、图片或者字符的形式展示用户或事物信息。
el-alert 。用于页面中展示重要的提示信息。
$loading 。加载数据时显示动效。
$notify 。悬浮出现在页面角落，显示全局的通知提醒消息。
$message 。常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
$msgbox 。模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
el-menu 。为网站提供导航功能的菜单。
el-tabs 。分隔内容上有关联但属于不同类别的数据集合。
el-breadcrumb 。显示当前页面的路径，快速返回之前的任意页面。
el-page-header 。如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
el-dropdown 。将动作或菜单折叠到下拉菜单中。
el-steps 。引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
el-dialog 。在保留当前页面状态的情况下，告知用户并承载相关操作。
el-tooltip 。常用于展示鼠标 hover 时的提示信息。
el-popover 。Popover与Tooltip很类似，相当于能自定义的Tooltip。
el-popconfirm 。点击元素，弹出气泡确认框。相当于一个已自定义的Popover。
el-card 。将信息聚合在卡片容器中展示。
el-carousel 。在有限空间内，循环播放同一类型的图片、文字等内容。
el-collapse 。通过折叠面板收纳内容区域。
el-timeline 。可视化地呈现时间流信息。
el-divider 。区隔内容的分割线。
el-calendar 。显示日期。
el-image 。图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等。
el-backtop 。返回页面顶部的操作按钮。
ul 。滚动至底部时，加载更多数据。
el-drawer 。有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。
关于element-ui的按需引入配置
前言：因为刚开始搭建项目框架的时候比较急，那时候确认要使用element-ui框架，就直接去官网照着安装全局引入，最近项目结束后，发现首页的加载速度有点小慢，就准备将项目内的所有引入的element-ui组件全部归类出来，按需引入！怕忘记自己的这一套引入方式，因此记录，废话不多说，上菜！
目录结构我就上传了，本框架使用的是vue版本的，未转换为ts版本！
先创建一个companyImport.js,将element-ui的样式及所使用的组件全部引入，格式如下
然后进入main.js文件中，将之前定义的文件引入，然后使用Vue.use(xxx)进行全局声明
按照上面的配置，蹬~蹬~蹬~，之前页面内使用的组件就不报错了，因为我这个demo是写在vue-cli的vue-electron的模板下的，所以这里配置文件不一样，请关注重点！
element-ui 初始化页面框架
(2). 在 main.js 里引入修改后的 主题样式, 并把引入默认的主题去掉， 如图所示
(3). 示例
1.安装
自动转换成rem单位， 结果如下图
elementui首页模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue elementui模板、elementui首页模板的信息别忘了在易优之家进行查找喔。
发表评论
暂时没有评论，来抢沙发吧~