目录

vue组件的介绍

vue组件Element 的安装

方法一：npm 安装

方法二：CDN

vue组件的引入

方法一：完整引入

方法二：按需引入

vue组件的使用

---

vue组件Element的介绍

在Vue中，组件是一个重要的概念，它是一个可复用的Vue实例，拥有独一无二的组件名称。组件可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。

组件具有以下特点：

1. 封装性：组件封装了HTML、CSS和JavaScript等代码，使其成为一个独立的模块，提高了代码的可维护性和复用性。
2. 独立性：组件可以独立存在，也可以在其他组件或页面中使用，只要注册了组件名称就可以重复使用。
3. 属性：组件可以有自己的属性，通过属性可以接收外部传递的数据或配置项。
4. 事件：组件可以触发事件，通过事件可以将内部的状态变化或其他信息传递给外部。
5. 生命周期钩子：组件具有生命周期钩子，可以在组件创建、更新、销毁等不同阶段执行相应的操作。

vue组件Element 的安装

方法一：npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

注意：如果安装过程中出现安装进程不动，或者出现问题可以退出重新执行，如果安装不了，以下代码二选一执行后，再次安装vue组件

注意：使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com

方法二：CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

vue组件的引入

要想使用Element，首先得引入 Element

方法一：完整引入

在 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);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

方法二：按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

• import Vue from 'vue';
  import { Button, Select } from 'element-ui';
  import App from './App.vue';
  
  Vue.component(Button.name, Button);
  Vue.component(Select.name, Select);
  /* 或写为
   * Vue.use(Button)
   * Vue.use(Select)
   */
  
  new Vue({
    el: '#app',
    render: h => h(App)
  });

注意：本博客安装和使用，主要通过方法一

vue组件的使用

1. 使用Element组件：在Vue的模板中，可以使用Element提供的组件来构建网页。例如，使用Button组件：

   <template>  
     <div>  
       <el-button type="primary">主要按钮</el-button>  
     </div>  
   </template>

   

            展示效果

整体效果例如登录：

<template>
    <div class="login">
        <div class="box">
            <h1>mall-admin</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="name">
                    <el-input prefix-icon="el-icon-user-solid" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" suffix-icon="el-icon-view" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                password: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },
        };
    },

<!-- scoped  页面样式只对当前有效果 -->
<style lang="scss">
.login {
    color: blue;
    display: flex;
    justify-content: center;

    .box {
        width: 350px;
        box-shadow: #ccc 0px 0px 8px;
        padding: 50px;
        margin-top: 150px;

        h1 {
            text-align: center;
        }

        .login-btn {
            width: 350px;
        }
    }
}

.el-button {
    width: 350px;
}
</style>

注意：本代码删除了一些无关功能，如果报错请查看报错信息并检查，个人觉得应该没问题。以下是呈现结果