1.安装less ,less-load
npm install less less-loader --save-dev
2.安装vux
npm install vux --save
npm install vux-loader --save-dev
在build/webpack.base.conf.js 文件进行配置
const vuxLoader = require(
'vux-loader'
)
const webpackConfig = originalConfig;
module.exports = vuxLoader.merge(webpackConfig, { plugins: [
'vux-ui'
] })
3.安装axios
npm install axios -S
4.为项目安装elementUI组件
npm i element-ui -S
在main.js中引入以下三行代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
5.在移动端项目引入fastclick.js
npm insatll fastclick -D
在main.js中引入,并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body);
6.为项目添加图片懒加载
npm insatll vue-lazyload --save-dev
在main.js中引入
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
attempt: 1, // 尝试加载图片的数量
error:'./static/error.png', // 加载错误图标
loading:'./static/loading.gif', // 加载图标
listenEvents: [ 'scroll' ], // 滚动监听
})
在需要懒加载图片的页面,将img标签的src绑定中的src改为v-lazy