记录使用vue-fullpage.js遇到的问题。
github地址：https://github.com/alvarotrigo/vue-fullpage.js
下载安装
npm install --save vue-fullpage.js
index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>resume</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
</body>
</html>
App.vue页面
import FullPage from 'vue-fullpage.js/src/FullPage'
export default {
name: 'App',
data () {
return {
options: {
paddingTop: '30px'
}
}
},
components: {
FullPage
}
}
会遇到一个报错信息
Couldn't find preset "es2015" relative to directory "E:\\Workspaces\\vscode\\resume\\node_modules\\vue-fullpage.js"
安装babel-preset-es2015就解决
npm install babel-preset-es2015
其他问题可能的解决方案
参考：https://github.com/alvarotrigo/vue-fullpage.js/issues/4
build/webpack.base.conf.js中修改配置
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/vue-fullpage.js/src/fullPageMixin.js')]
},
增加fullPageMixin时报错
import fullPageMixin from 'vue-fullpage.js/src/fullPageMixin'
解决方法
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
})
],
网友评论