vue中引入element-UI组件库

原创

梦寻尘缘 2022-03-23 21:35:49 ©著作权

文章标签 官网轮播图初始化引入组件库 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者梦寻尘缘的原创作品，请联系作者获取转载授权，否则将追究法律责任

为了让项目变得更小一点，所以要按需引入组件库中的相关组件，这里以进入element-UI的轮播图也就是走马灯为例，记录相关过程。

1.首先按照官网中的介绍，在终端中执行下列代码；

npm i element-ui -S

vue中引入element-UI组件库_官网

2.首先按照官网上的步骤来，即在项目的终端中下载如下代码；

npm install babel-plugin-component -D

vue中引入element-UI组件库_官网_02

3.在下载完成后，按照官网是要修改.babelrc，但是在项目中是babel.config.js文件，所以我们按下面代码修改文件中的内容即可；

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

4.新建一个目录，命名为“plugins”，命名无所谓只要好识别就可以了ヾ(≧▽≦*)o，在“plugins”目录下新建JavaScript文件，因为用到的是element-UI，所以在这里命名为”elementUi“；

vue中引入element-UI组件库_官网_03

5.在”elementUi“文件中使用import语法引入相关组件名称，使用轮播图也就是走马灯；

import {
    Carousel,
    CarouselItem,
} from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';

export default {
    install(App){
        App.use(Carousel);
        App.use(CarouselItem);
    }
}

6.在”main.js“中引入下面的代码，否则无法找到我们新建的文件；

import elementUi from "./plugins/elementUi";
Vue.use(elementUi)

7.新建vue文件，命名为”element“，在文件中复制官网中的代码，也就是下面的代码；

<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>