Vue项目中如何整合Element-UI框架_vue集成element-ui-优快云博客

一、引言 Element-UI是一套基于Vue.js的桌面端组件库，提供了丰富的组件和交互效果，能够帮助开发者快速搭建美观、易用的用户界面。在Vue项目中整合Element-UI框架，可以显著减少前端开发的工作量，提高开发效率。

二、准备工作在开始整合Element-UI之前，需要确保已经安装了Node.js和Vue CLI。如果还未安装，可以按照以下步骤进行：安装Node.js 前往Node.js官方网站（https://nodejs.org/）下载适合你操作系统的安装包，并按照提示进行安装。安装完成后，在命令行中输入：

node -v

验证是否安装成功。

安装Vue CLI 打开命令行工具，执行以下命令安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过

 vue --version

来查看Vue CLI的版本号。

三、创建Vue项目使用Vue CLI创建一个新的Vue项目。

在命令行中执行以下命令：

vue create vue-element-ui-demo

在创建过程中，你可以选择手动配置或者使用默认配置。这里我们选择默认配置，等待项目创建完成。

四、安装Element-UI 进入到刚刚创建的项目目录中：

cd vue-element-ui-demo

然后使用npm安装Element-UI：

npm install element-ui --save

五、引入Element-UI 在项目的 main.js 文件中引入Element-UI，并进行全局注册：

打开 main.js 文件，添加以下代码：

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

Vue.use(ElementUI);

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

import Vue from 'vue'; 引入Vue.js库，这是构建Vue应用的基础。

import App from './App.vue'; 引入根组件 App.vue，它是整个Vue应用的入口组件。

import ElementUI from 'element-ui'; 引入Element-UI组件库，使得我们可以在项目中使用Element-UI提供的各种组件。

import 'element-ui/lib/theme-chalk/index.css'; 引入Element-UI的默认主题样式文件，确保组件具有正确的外观。

Vue.use(ElementUI); 通过 Vue.use() 方法将Element-UI注册为Vue的插件，这样在整个项目中就可以直接使用Element-UI的组件了。

六、使用Element-UI组件（一）按钮组件在 App.vue 文件中使用Element-UI的按钮组件。

修改 App.vue 文件如下：

<template>
  <div id="app">
    <h1>Element-UI按钮组件示例</h1>
    <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>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

在 <template标签中，使用 <el-button标签来创建按钮组件。通过设置 type 属性，可以指定按钮的样式类型，如 primary（主要按钮）、success（成功按钮）等。

（二）表单组件下面是一个使用Element-UI表单组件的示例。

修改 App.vue 文件如下：

<template>
  <div id="app">
    <h1>Element-UI表单组件示例</h1>
    <el-form :model="userForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="userForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userForm: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      console.log(this.userForm);
    },
  },
};
</script>

<el-form标签用于创建表单容器，:model 属性绑定了一个名为 userForm 的数据对象，用于存储表单数据。

<el-form-item标签用于包裹每个表单字段，label 属性设置字段的标签名称。

<el-input标签用于创建输入框，v-model 指令实现了数据的双向绑定，将输入框的值与 userForm 对象中的相应属性关联起来。

在 methods 中定义了 submitForm 方法，当点击提交按钮时，会在控制台输出表单数据。

（三）表格组件以下是一个使用Element-UI表格组件的示例。

修改 App.vue 文件如下：

<template>
  <div id="app">
    <h1>Element-UI表单组件示例</h1>
    <el-form :model="userForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="userForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userForm: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      console.log(this.userForm);
    },
  },
};
</script>

<el-table标签用于创建表格，:data 属性绑定了一个名为 tableData 的数组，用于存储表格数据。 <el-table-column标签用于定义表格的列，prop 属性指定了对应的数据字段，label 属性设置列的标题。

七、运行项目在命令行中执行以下命令启动Vue项目：

npm run serve

然后在浏览器中访问：

http://localhost:8080

即可查看整合Element-UI后的Vue项目效果。

八、总结通过以上步骤，我们成功地在Vue项目中整合了Element-UI框架，并使用了按钮、表单和表格等常用组件。Element-UI提供了丰富的组件和便捷的使用方式，大大提高了前端开发的效率。