//js部分

data(){

return {

index.js

document.querySelector('#root').innerHTML = 'webpack使用';

非全局安装下的打包。

node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development

打开dist目录下的html显示 webpack使用

配置webpack

1.使用配置文件

const path=require('path');

module.exports={

entry:'./src/index.js',

output:{

filename:'bundle.js',

path:path.resolve(__dirname,'dist')

}

};

当然，我这个是将js和css文件下载到了本地，你也可以使用cdn路径，至此，引入基本上算是引入完成了，接下来就是如何在react组件中进行调用

在这里需要说一下，引入的js文件在组件当中不能直接使用，需要在最开始的位置声明一个变量，后续的使用方法和普通的html写法就一致了，区别就在于应该在哪个生命周期中写，个人建议实在componentDidUpdate周期中进行写，因为有时候数据是异步获取的，刚刚完成时不一定数据获取完成，数据获取完成以后更新state，此时会触发update周期。

import React,{Component} from 'react'

let Swiper = window.Swiper

class About extends Component{

constructor(props){

super(props);

this.state = {

myName : "这里是about页面",

}

}

componentWillUnmount() {

if (this.swiper) { // 销毁swiper

this.swiper.destroy()

}

}

componentDidUpdate(){

if(this.swiper){

this.swiper.slideTo(0, 0)

this.swiper.destroy()

this.swiper = null;

}

this.swiper = new Swiper(this.refs.lun, {

loop:true,

pagination: {

第二步：加入通用css代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：