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

vue 项目中运用到的插件 或者依赖安装的更多相关文章

  1. vue项目中,使用vue-awesome-swiper插件实现轮播图

    一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...

  2. vue项目中获取cdn域名插件

    import axios from 'axios' let CdnPath = {} CdnPath.install = function (Vue, options) { Vue.prototype ...

  3. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  4. 实战:vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  5. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  6. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  9. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

随机推荐

  1. H3C PPP协议的组成

  2. Mysql5.5升级到5.7的过程已经踩到的坑

    https://blog.csdn.net/u014534986/article/details/79699750 故事是这样子的,我们公司有几台老的mysql版本是5.5的,最近项目做了一些升级增加 ...

  3. Vue 语法的一些小问题

    设置 sty行内样式 :style="{width:mapWidth,height:mapHeight}" This指向   axios 使用axios 的时候 ,在生命周期函数  ...

  4. Python--day41--递归锁Rlock

    1,递归锁Rlock:递归锁是为了解决死锁问题,且递归锁的特点是在同一个线程中可以被acquire()多次 多个acquire()在递归锁中不会阻塞,而互斥锁Lock就会阻塞 代码示例: from t ...

  5. Python--day37--进程锁

    进程锁的示意图: 锁.py: #锁 #火车票 import json import time from multiprocessing import Process from multiprocess ...

  6. JVM系统属性 OS环境变量 JVM启动参数

    JVM系统属性(System Properties) 1.不支持通过文件查看和设置系统属性 2.可以通过JDK自带的工具jvisulavm.exe查看 3.可以在Java程序中使用API来查看系统属性 ...

  7. H3C 域名

  8. linux 基于 jiffy 的超时

    到目前为止所展示的次优化的延时循环通过查看 jiffy 计数器而不告诉任何人来工作. 但是最好的实现一个延时的方法, 如你可能猜想的, 常常是请求内核为你做. 有 2 种方 法来建立一个基于 jiff ...

  9. Linux 内核驱动支持什么设备

    struct usb_device_id 结构提供了这个驱动支持的一个不同类型 USB 设备的列表. 这个 列表被 USB 核心用来决定给设备哪个驱动, 并且通过热插拔脚本来决定哪个驱动自动加载, 当 ...

  10. layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台

    const pathLib = require('path');//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档 const fs = require(''fs ...