Element-01.快速入门

news2024/11/22 20:54:44

1.什么是Element

2.快速入门

第二步引入ElementUI组件库，在当前的工程目录下的main.js文件中引入。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

第一行，第四行在main.js中已经有了，因此只需要导入中间两行和最后一行即可。

3.访问官网，复制组件代码

下面演示复制button按钮组件：

在组件中找到button组件，并找到相中的组件，点击下面的倒三角，复制对应的代码。

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

四段代码代表四组按钮，选择对应的按钮复制代码。

4.调整

自定义的组件在views下存放，因此在views下创建element文件夹，在其中创建ElementView.vue组件。

ElementView.vue组件的内容如下所示：<template>标签中书写html代码，展示的是类似于vue中的视图。展示的button按钮组件属于视图，因此在<template>中书写。

<script>：JS代码，定义vue当中的数据模型以及当中的方法

<style>：定义CSS样式

<template>
    <div>    <!-- div是根标签，一个<template>标签中只能有一个根标签，也即只能有一个<template>标签 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

vue项目默认情况下展示的是App.vue，即跟组件项目中的内容。而我们现在想展示的是ElementView.vue中的内容，因此要在App.vue中修改对应的内容。

<!-- 模板部分，由他生成HTML代码  相当于vue当中的视图部分 -->
<template>
  <div>
    <!-- <h1>{{ message }}</h1> -->
     <element-view></element-view>
  </div>
</template>

<!-- JS代码，定义vue当中的数据模型以及当中的方法 -->
<script>
import ElementView from './views/element/ElementView.vue'   // 将ElementView.vue组件文件导入并重新命名为ElementView
export default {
  components: { ElementView },
  data () {
      return {
        /* message:"Hello Vue"     */
      }
  },
  methods: {
      
  }
}
</script>

<!-- 定义CSS样式 -->
<style>

</style>