vue 中使用组件 element -ui（layout布局，button，form）

最新推荐文章于 2024-10-31 03:55:00 发布

Dking222

最新推荐文章于 2024-10-31 03:55:00 发布

阅读量2.4k

点赞数

分类专栏： vue -Element UI 文章标签： vue

本文链接：https://blog.csdn.net/weixin_47686269/article/details/109072513

版权

本文介绍了如何在Vue项目中使用Element-UI组件库，包括完整导入与按需引入的方式。重点讲解了Element-UI的Layout布局、Button以及Form表单的使用，特别是Form的验证功能和校验规则。并提供了重置和提交表单的处理方法。

摘要由CSDN通过智能技术生成

vue 中使用组件 element -ui（layout布局，button，form）
element -ui：pc端组件库
有完整引入和按需引入
一般情况下移动端是按需引入，PC端是完整引入
&一：完整导入
下载 yarn add element-ui
&二：在main.js中引入（可以全局使用，每个路由组件中都可以直接使用）

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

Vue.use(ElementUI)

现在已经完成了完整引入，在你的任何路由组件中都可以使用
题外：在main.js中有这样一行代码

Vue.config.productionTip = false;

目的：屏蔽（console）提示
如果删除，在打印区中会出现you are running vue in development mode 。。。
（你在开发环境中运行vue）
layout布局

<template>
  <div class="login">
   <el-row :gutter="100">
  <el-col :span="4"><div  ></div></el-col>
  <el-col :span="4"><div ></div></el-col>
  <el-col :span="4"><div ></div></el-col>
  <el-col :span="4"><div ></div></el-col>
  <el-col :span="4"><div ></div></el-col>
  <el-col :span="4"><div ></div></el-col> 
</el-row>

  </div>
</template>
<script>
export default {
   
  data () {
   
    return {
   
     
    }
  
}
}
</script>
<style lang="scss" scoped>
.el-row{
   
  .el-col

最低0.47元/天解锁文章