Vue项目创建组件+如何使用ElementUI

最新推荐文章于 2024-07-02 22:39:45 发布

多喝热水i000

最新推荐文章于 2024-07-02 22:39:45 发布

阅读量351

点赞数

文章标签： vue.js elementui javascript html vue

本文链接：https://blog.csdn.net/m0_55588226/article/details/121692851

版权

本文介绍了如何在Vue项目中集成ElementUI，包括通过npm安装、在main.js中引入以及使用ElementUI组件。同时，详细讲解了Vue项目的目录结构，特别是自定义组件的创建，如新建Car.vue组件，并在App.vue中注册和使用。

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

ElementUI

ElementUI官网: https://element.eleme.io/

1. 安装elementui

第一种方法是npm 安装: npm i element-ui -S

第二种方法是CDN 引入 Element:

<!-- 引入样式 -->
<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>

2. 修改main.js 引入 elementui

在这里插入图片描述

3. 使用ElementUI的标签

首先定义了Car.vue组件,在Car.vue里进行测试,vue组件创建引入的步骤在文章最后

<template>
  <!-- 组件只能有一个根元素-->
  <div>
    <h1>{
  {msg}}</h1>

    <!-- 开始使用ElementUI的组件,本质上就是一些标签 -->
    <!-- 2. icon图标,使用i组件,class的值是图标的样式-->
    <i class="el-icon-edit"></i>
    <i class="el-icon-s-operation"></i>

    <!-- Layout布局,默认一行是24个分格 el-row是行,el-col是列-->
    <el-row>
      <el-col :span="3">品牌</el-col>
      <el-col :span="3">价格</el-col>
      <el-col :span="18">描述</el-col>
    </el-row>
    <!-- 3. 按钮el-button组件 -->
    <el-row>
      <el-button>普通按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
    </el-row>
    <!-- 4.输入框el-input -->
    <el-col :span="6">
      <el-input v-model="msg"