這篇文章主要講解了“怎么用vue2.x+turn.js實現翻書效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用vue2.x+turn.js實現翻書效果”吧！

成都創新互聯公司是一家專注于網站設計制作、成都網站制作與策劃設計,隴川網站建設哪家好?成都創新互聯公司做網站,專注于網站建設10多年,網設計領域的專業建站公司;建站業務涵蓋:隴川等地區。隴川做網站價格咨詢:18982081108

vue中使用turn.js

官方網站下載源碼：http://turnjs.com/

找到里面的文件 lib/turn.js

放到新建的utils文件里面

Turn.js是使用了jquery書寫的，使用vue中要引入jquery

npm install --save jquery

新建vue.config.js配置文件

const webpack = require('webpack')
module.exports = {
    chainWebpack: config => {
        //引入ProvidePlugin
        config.plugin("provide").use(webpack.ProvidePlugin, [{
            $: "jquery",
            jquery: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
        }, ]);
    },
}

我把官方文件引入到本地圖片文件使用

查看文件的像素，在設置寬高的時候width是2倍 height不變。

使用vue文件內容

感謝各位的閱讀，以上就是“怎么用vue2.x+turn.js實現翻書效果”的內容了，經過本文的學習后，相信大家對怎么用vue2.x+turn.js實現翻書效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！