当前位置：首页 > news >正文

如何在Vue-Cli中使用Element-UI和Echarts和swiper插件(低版本)

news 来源：原创 2025/5/9 6:31:07

1st.Element-UI

1.1 安装

在终端输入

npm install element-ui

1.2 导入
在全局main.js中全局导入Element-UI：

// 导入element-ui组件库

import ElementUI from 'element-ui';

// 导入element-ui组件库的样式

import 'element-ui/lib/theme-chalk/index.css';

// 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use

Vue.use(ElementUI);

2nd.Echarts

2.1 安装

在终端输入

npm install echarts --save

2.2 导入

在使用ECharts的组件里导入ECharts：

// 导入echarts的所有成员，并转成一个对象

import * as echarts from 'echarts';

2.3 使用

因为要进行dom操作，所以在mounted生命周期函数里使用准备好的dom(dom需要给宽高，ECharts不会撑开盒子)，之后的图表都会在此容器中显示

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

随后在myChart.setOption({}）中复制实例代码即可使用。

3rd.Swiper插件(低版本)

3.1 安装

npm install swiper@5 vue-awesome-swiper@4

3.2 导入

3.2.1全局导入

在main.js中全局导入

// 导入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'

// 导入swiper的样式

import 'swiper/css/swiper.css'

// 因为swiper是插件，所以要use

Vue.use(VueAwesomeSwiper)

3.2.2 局部导入

在需要使用Swiper的组件中导入

// 导入swiper的组件

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// 导入swiper的样式

import 'swiper/css/swiper.css'

export default {

    // 注册组件

    components: {

        Swiper,

        SwiperSlide

    }

}

3.3 使用

页面中使用swiper标题作为滑块，并使用options属性绑定配置选择：

<swiper :options="swiperOptions">

<swiper-slide>

<img src="http://p1.music.126.net/Y6gItVxUvkbvI2cC8KVZYA==/109951166461233203.jpg?imageView&quality=89">

</swiper-slide>

<swiper-slide>

<img src="http://p1.music.126.net/ypjEcAl-BXKqb2UWdau-Tw==/109951166463199078.jpg?imageView&quality=89">

</swiper-slide>

<swiper-slide>

<img src="http://p1.music.126.net/_7zX4BjboCYo4KYRvpayDg==/109951166461246383.jpg?imageView&quality=89">

</swiper-slide>

<swiper-slide>

<img src="http://p1.music.126.net/3Vwphalm49ewNV-lIJUBNA==/109951166461279853.jpg?imageView&quality=89">

</swiper-slide>



<div class="swiper-pagination" slot="pagination"></div>



<div class="swiper-button-prev" slot="button-prev"></div>



<div class="swiper-button-next" slot="button-next"></div>

</swiper>

配置选项：

data() {

    return {

        // 定义swiper的配置选项

        swiperOptions: {

            // 指定分页器

            pagination: {

                //指定分页器的容器

                el: ".swiper-pagination",

                //点击分页器的指示点分页器会控制Swiper切换

                clickable:true

            },

            // 配置衔接滑动

            loop:true,

            // 配置自动播放

            // autoplay:true

            autoplay:{

                //自动播放

                autoplay:true,

                //设置间隔时间

                delay:3000,

                // 用户操作swiper之后，是否禁止autoplay

                disableOnInteraction:false

            },

            // slide的切换效果

            effect:'coverflow',

            // 箭头

            navigation:{

                nextEl: '.swiper-button-next',

                prevEl: '.swiper-button-prev',

            }

        },

    };

},