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. 理解和实现分布式TensorFlow集群完整教程

    手把手教你搭建分布式集群,进入生产环境的TensorFlow 分布式TensorFlow简介 前一篇<分布式TensorFlow集群local server使用详解>我们介绍了分布式Ten ...

  2. SpringBoot使用logback输出日志并打印sql信息 --经典---

    最近在学习springboot以及一些springcloud插件的使用,其中发现默认的配置并不能打印一些有用的日志,所以需要自定义一些日志输出方式以便于查看日志排查问题,目前只整理了两种使用方式,如下 ...

  3. SSM整合 mybatis多条件查询与分页

    多条件查询与分页: 通过页面的houseName.floorage获取值传到前端视图(HouseSearchVO)实体类中的houseName,floorage建立houseSearchVO对象. 通 ...

  4. 从规则引擎到复杂事件处理(CEP)

    Drools Fusion既是规则引擎,又可以作为CEP.除了事件定义和时间推理之外,对于引擎本身也会有一些不同的使用.主要体现在会话时钟.流模式.滑动窗口和对事件的内存管理. 会话时钟 由于事件的时 ...

  5. JS与JSP分别是什么

    JS:JavaScript: JSP:Java Server Pages. jsp:只是servlet的一个变种,方便书写html内容才出现的,servlet是根本,所有jsp能做的,servlet全 ...

  6. jQuery 工具类函数-检测对象是否为空

    在jQuery中,可以调用名为$.isEmptyObject的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值,调用格式如下: $.isEmptyObjec ...

  7. C# 循环的判断会进来几次

    最近有小伙伴告诉我,在循环的判断条件只会计算一次,本金鱼不相信,于是就做了测试,本文记录我做的测试. 先来写一个简单的代码, 就一个循环,循环的判断是从一个函数获取值 class Program { ...

  8. Linux 内核设备驱动

    设备模型跟踪所有对系统已知的驱动. 这个跟踪的主要原因是使驱动核心能匹配驱动和新 设备. 一旦驱动在系统中是已知的对象, 但是, 许多其他的事情变得有可能. 设备驱动可 输出和任何特定设备无关的信息和 ...

  9. vue-learning:16 - js - computed

    computed 在指令章节讲过,插值{{ }}和指令都接受变量和表达式的写法,使用表达式可以进行简单的二元或三元运算.但如果要执行更加复杂的计算或频繁重复的计算,如果还是直接写在指令的表达式中会让代 ...

  10. 小白学 Python 爬虫(29):Selenium 获取某大型电商网站商品信息

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...