turn.js是一款实现翻页效果的插件
首先需要安装并引入jQuery，安装完成后引入turn.js
如果使用npm安装引用turn.js会报错
因此需要下载turn.js 到本地，在官网上下载源码，在项目中新建utils文件，把turn.js文件拷到utils中，
我在页面中使用了import turn from "../../src/utils/turn";，结果会报turn定义但未使用的错，
不知道为什么，把这句话注释掉就能运行成功了，好像不用引入就能直接用？

后来发现这样是有bug的 ，引用后再注释掉才能生效。后来找到了原因，是jQuery引用有问题。vue.config.js配置文件：

const webpack = require('webpack')
// vue框架配置文件
module.exports = {
	// 基本路径
	publicPath: './',
	// 输出文件目录
	outputDir: 'Drag',
	// eslint-loader 是否在保存的时候检查
	lintOnSave: true,
	assetsDir: 'static',
	// use the full build with in-browser compiler?
	// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
	// compiler: false,
	// webpack配置
	// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
		//引入ProvidePlugin
		config.plugin("provide").use(webpack.ProvidePlugin, [
			{
				$: "jquery",
				jquery: "jquery",
				jQuery: "jquery",
				"window.jQuery": "jquery",
			},
		]);
	},
	configureWebpack: () => {},
	// vue-loader 配置项
	// https://vue-loader.vuejs.org/en/options.html
	// vueLoader: {},
	// 生产环境是否生成 sourceMap 文件
	productionSourceMap: true,
	// css相关配置
	css: {
		// 是否使用css分离插件 ExtractTextPlugin
		// extract: true,
		// 开启 CSS source maps?
		sourceMap: false,
		// css预设器配置项
        loaderOptions: {},
		// 启用 CSS modules for all css / pre-processor files.
		modules: false
	},
	// use thread-loader for babel & TS in production build
	// enabled by default if the machine has more than 1 cores
	parallel: require('os').cpus().length > 1,
	// 是否启用dll
	// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
	// dll: false,
	// PWA 插件相关配置
	// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
	pwa: {},
	// webpack-dev-server 相关配置
	devServer: {
		open: true,
		host: '0.0.0.0',
		port: 8088,
		https: false,
		hotOnly: false,
		proxy: null, // 设置代理
		before: app => {}
	},
	// 第三方插件配置
	pluginOptions: {

	}
}

turn.js在vue中的使用：

<template>
    <div class="body-content">
        <div id="magazine">
            <div v-for="(item, index) in allPages" :key="`test_${index}`">
                <div :class="`text${item.page}`">
                    <footer
                            v-if="item.page - 1 !== 0 && item.page - 1 !== allPages.length - 1"
                            class="current-page">
                        <div v-if="(item.page - 1) % 2 == 0" class="even-numbers">
                            {{ item.page - 1 }}
                        </div>
                        <div v-else class="odd-number">{{ item.page - 1 }}</div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import $ from "jquery";
    import turn from "../../src/utils/turn";
    export default {
        name: "FenMian2",
        data() {
            return {
                value: "",
                page: 1,
                allPages: [
                    {
                        page: 1,
                        name: "aa"
                    },
                    {
                        page: 2,
                        name: "aa"
                    },
                    {
                        page: 3,
                        name: "aa"
                    },
                    {
                        page: 4,
                        name: "aa"
                    },
                    {
                        page: 5,
                        name: "aa"
                    },
                    {
                        page: 6,
                        name: "aa"
                    }
                ]
            };
        },
        mounted() {
            let self = this;
            $("#magazine").turn("center");
            $("#magazine").turn("page");
            this.$nextTick(() => {
                $("#magazine").turn({
                    display: "double",
                    elevation: 50,
                    duration: 100,
                    gradients: true,
                    autoCenter: true,
                    acceleration: true,
                    page: self.page,
                    width: 1152,
                    when: {
                        turned: function() {
                            //当前页
                            console.log("Current view: ", $(this).turn("view"));
                            //总页数
                            console.log(
                                "#magazine has " + $("#magazine").turn("pages") + " pages"
                            );
                            // $("#magazine").turn("hasPage", 10);
                            // $("#magazine").turn("pages", 5);
                        }
                    }
                });
            });
        },
        methods: {},
        components: {}
    };
</script>
<style scoped>
    body {
        background: #ccc;
    }
    .text1 {
        background: url("../assets/pages/6.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
    }
    .text2 {
        background: url("../assets/pages/6.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
    }
    .text3 {
        background: url("../assets/pages/6.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
    }
    .text4 {
        background: url("../assets/pages/6.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
    }
    .text5 {
        background: url("../assets/pages/6.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
    }
    .text6 {
        background: url("../assets/pages/6.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
    }
    .current-page {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 14px;
    }
    #magazine {
        width: 1152px;
        height: 752px;
    }
    .even-numbers {
        width: 30px;
        height: 30px;
        background: #ffcc66;
        color: #fff;
        right: 0;
        position: absolute;
        bottom: 0px;
        line-height: 30px;
        text-align: center;
    }
    .odd-number {
        position: absolute;
        bottom: 0px;
        width: 30px;
        height: 30px;
        background: #cc00ff;
        color: #fff;
        line-height: 30px;
        text-align: center;
    }
    #magazine.shadow {
        -webkit-box-shadow: 0 4px 10px #666;
        -moz-box-shadow: 0 4px 10px #666;
        -ms-box-shadow: 0 4px 10px #666;
        -o-box-shadow: 0 4px 10px #666;
        box-shadow: 0 4px 10px #666;
    }

    #magazine .turn-page {
        background-color: #ccc;
        background-size: 100% 100%;
    }
    .bookmark {
        margin-left: 633px;
        font-size: 20px;
        writing-mode: tb-rl;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-top: 47px;
    }
    .item:nth-child(2n) {
        background: #ccc;
        width: 45px;
        height: 150px;
    }
    .item {
        width: 45px;
        height: 160px;
        background: red;
    }
    .item:nth-child(1) {
        z-index: 4;
        text-shadow: 6px 6px 6px #999;
    }
    .item:nth-child(2) {
        z-index: 3;
        text-shadow: 6px 6px 6px #333;
    }
    .item:nth-child(3) {
        z-index: 2;
        text-shadow: 6px 6px 6px #333;
    }
    .item:nth-child(4) {
        z-index: 1;
        text-shadow: 6px 6px 6px #333;
    }
</style>