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. GPU版TensorFlow怎么指定让CPU运行

    由于某些原因GPU版的TensorFlow运行起来会出现一些问题,比如内存溢出等情况.此时我们可以用CPU和系统内存来运行我们的程序. 代码如下: import osos.environ[" ...

  2. 【原生JS】自动渐变轮播

    渐变主要是通过CSS3的动画实现. 只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程. 效果图: HTML: <!DOCTYPE html> ...

  3. xUtils框架的介绍(二)

    xUtils中有四大组件可以供我们使用,分别是ViewUtils.HttpUtils.BitmapUtils以及DbUtils.如果你没能先读一下我的上一篇文章,那么请你移步过去先整体了解一下,再回过 ...

  4. MySQL 数据库中如何把A表的数据插入到B表?

    web开发中,我们经常需要将一个表的数据插入到另外一个表,有时还需要指定导入字段,设置只需要导入目标表中不存在的记录,虽然这些都可以在程序中拆分成简单sql来实现,但是用一个sql的话,会节省大量代码 ...

  5. 浅谈集合框架五——集合框架扩展:Collections工具类的使用,自定义比较器

    最近刚学完集合框架,想把自己的一些学习笔记与想法整理一下,所以本篇博客或许会有一些内容写的不严谨或者不正确,还请大神指出.初学者对于本篇博客只建议作为参考,欢迎留言共同学习. 之前有介绍集合框架的体系 ...

  6. 【b703】矩阵取数游戏

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规 ...

  7. UVA 11212 Editing a Book [迭代加深搜索IDA*]

    11212 Editing a Book You have n equal-length paragraphs numbered 1 to n. Now you want to arrange the ...

  8. Aizu 0531 "Paint Color" (坐标离散化+DFS or BFS)

    传送门 题目描述: 为了宣传信息竞赛,要在长方形的三合板上喷油漆来制作招牌. 三合板上不需要涂色的部分预先贴好了护板. 被护板隔开的区域要涂上不同的颜色,比如上图就应该涂上5种颜色. 请编写一个程序计 ...

  9. 与正则有关的JS方法结合其在项目中的应用

    与正则有关的JS方法结合其在项目中的应用 前言 最近项目中用到正则匹配比较多,因此打算深入理解和总结下各个与正则有关的方法,再结合在项目中使用的情况.与正则有关的JS方法共有7个,分别是RegExp对 ...

  10. 牛客多校第三场 F Planting Trees

    牛客多校第三场 F Planting Trees 题意: 求矩阵内最大值减最小值大于k的最大子矩阵的面积 题解: 矩阵压缩的技巧 因为对于我们有用的信息只有这个矩阵内的最大值和最小值 所以我们可以将一 ...