解决vue-cli项目webpack打包后iconfont文件路径的问题

在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用npm run build即可打包发布生产文件,打包后的文件webpack配置可以看到使用url-loader处理后的文件是在static目录...

解决vue项目使用font-awesome,build后路径的问题

问题: 项目在本地run情况下显示正常,在build后font-awesome的css文件依赖的几个图标文件引用路径报错。在webpack.base.conf.js中关于几个文件的配置如下:{ test: /\.(woff2&#6...

修改vue+webpack run build的路径方法

vue项目用webpack打包想要修改静态资源路径等,找到项目根目录下的config文件夹,打开该文件夹下的index.js文件,默认如下:// see http://vuejs-templates.github.io/webpack for...

解决Vue 项目打包后favicon无法正常显示的问题

在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法:问题分析:问题根源在于路径,如果使用http链接作为fav...

全面解析vue router 基本使用(动态路由,嵌套路由)

路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 =...

vue-router 实现导航守卫(路由卫士)的实例代码

导航守卫导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫路由跳转前做一些验证,比如登...

vue-cli脚手架的安装教程图解

vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述:https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack条件:
n...

详解jQuery中的easyui

jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需...

vue组件(全局,局部,动态加载组件)

说说Vue.js组件 什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有...

解决Vue2.0中使用less给元素添加背景图片出现的问题

在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法background-image: url('../img/' + @{bg_url} + '2x.png');或者这样background-image: url('../img/' +...

解决vue打包css文件中背景图片的路径问题

vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句.welcome { width: 420px; height: 235px; background: ur...

webpack4 处理SCSS的方法示例

这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。
1. 准备工作
为了方便叙述,这次代码目录的样式文件只有一个scss文件,以帮助我们了解核...

解决Vue+Element ui开发中碰到的IE问题

IE9样式错乱,IE11无法正常加载v-loading等问题引入了babel-polyfill插件,依然出现”polyfill-eventsource added missing EventSource to window”的奇怪问题(ie所有版本都有...

webpack4 CSS Tree Shaking的使用

本次课程的代码目录(如下图所示):
什么是tree-shaking
webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js,先如今,webpack 2也有类似的...

webpack4 处理CSS的方法示例

这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。
1. 准备工作
众所周知,CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种,所以这次就是...

vue填坑之webpack run build 静态资源找不到的解决方法

vue cli搭建的项目,在本地测试调试都OK,运行npm run dev之后运行正常,今天放到服务器上跑,结果RD说找不到打包后的静态资源,浏览器控制台错误代码404问了RD,因为服务器上线方式的...

vue完成项目后,打包成静态文件的方法

vue完成项目后,如何打包成静态文件,并且用Node调试打包1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调...

vue的style绑定background-image的方式和其他变量数据的区别详解

问题:使用vue加载图片变量,为了图片的自适应,需设置为背景图居中排布<tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="v...

详解vue通过NGINX部署在子目录或者二级目录实践

1、修改 router/index.js添加一行base: 'admin',2、然后修改 config/index.js增加一行const assetsPublicPath = '/admin/'然后修改 下面两处assetsPublicPath 的值为定义的...

VUE预渲染及遇到的坑

本文介绍了VUE预渲染及遇到的坑,分享给大家,具体如下:npm install -D prerender-spa-plugin修改webpack.prod.conf.js,在CopyWebpackPlugin后面,增加内容。var PrerenderSpaPlugi...

Vue 中对图片地址进行拼接的方法

拿到一组数据,其中的img地址是这样的我们想要将它转化为正常的图片地址,需要使用for循环来将图片拼接起来 getSingList(){ getSingerList().then((res) =>{ if (res.code==...

react在安卓中输入框被手机键盘遮挡问题的解决方法

前言React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就...

node.js使用免费的阿里云ip查询获取ip所在地【推荐】

在项目过程中,我们常常需要获取IP的所在地。而这一功能一般都是通过一些数据网站的对外接口来实现,这些接口一般情况下都是付费使用的。在这篇文章中我将记录,基于node.js的阿...

Angular动态绑定样式及改变UI框架样式的方法小结

AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
Angular...

Vue实现底部侧边工具栏的实例代码

下载地址: https://github.com/imxiaoer/FloatToolBar因为是个常见的功能,所以写个组件。效果图如下:组件具体代码如下: tool.vue<template> <ul class="float-tool"> <li clas...

解决vue的 v-for 循环中图片加载路径问题

先看一下产品需求,如下图所示,产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一...

详解vue-cli下ESlint 配置说明

1,关闭eslint这里只说vue-cli脚手架的关闭方法,其实很简单,就是把 build/webpack.base.conf.js
配置文件中的eslint rules注释掉即可。module: { rules: [ // { // test...

vue自定v-model实现表单数据双向绑定问题

vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍vue自定v-model实现表单数据双向绑定,具体内容如下所示:子组件代码如下v-model语法糖v-model实现了表单输入的双向绑定...

webpack4 SCSS提取和懒加载的示例

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。>>> 本节课源码>>> 所有课程源码1. 准备工作关于 SCSS 处...

解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者,在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并...

vue自定义底部导航栏Tabbar的实现代码

如图所示,要完成类似的一个底部导航切换。首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。我将5个主要的vue文件放在了5个不同的文件夹然后,在comp...

Angular5中状态管理的实现

前面学习了vue,react 都有状态管理,如vue中的vuex是全局状态管理,在任何组件里都可以引用状态管理中的数据,同样,react中的redux和mbox也是,但遇到angular5却不知道了。
一年前使...

JavaScript日期工具类DateUtils定义与用法示例

本文实例讲述了JavaScript日期工具类DateUtils定义与用法。分享给大家供大家参考,具体如下:DateUtils = { patterns: { PATTERN_ERA: 'G', //Era 标志符 Era strings. For...

Vue 通过自定义指令回顾v-内置指令(小结)

Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令,这些指令的职责就是当表达式改变时将某些行为应用到...

Vue-router的使用和出现空白页,路由对象属性详解

Vue-router的使用和出现空白页2018.08.28 更新 vue-router:前端路由系统——改变视图的同时不会向后端发出请求1、 hash2、history2018.06.25 更新get到一个新技能import Vue...

vue-cli 引入jQuery,Bootstrap,popper的方法

1.安装插件npm install jquery --save //jquery插件npm install bootstrap --save //bootstrapnpm install --save popper.js //popper.js2.修改build目录下的webp...

基于vue-router 多级路由redirect 重定向的问题

在做多级路由的时候遇到很多问题,虽然不难,但是如果没有经验,往往要花一整天时间才能解决(可能我笨),况且网上资料也很少。项目需要是这样的:登录页面跳到后台页面重定向,登录页是一...

JavaScript封装的常用工具类库bee.js用法详解【经典类库】

本文实例讲述了JavaScript封装的常用工具类库bee.js。分享给大家供大家参考,具体如下:bee.js下载地址:github下载地址:https://github.com/shadowOfCode/bee.js或点击此处本站下...

解决vue.js this.$router.push无效的问题

如下所示:login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password })...

vue 纯js监听滚动条到底部的实例讲解

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后...

vue移动端监听滚动条高度的实现方法

这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部首先做的如何监听滚动条的高度,下面是我写的方法var _this =thiswindow.addEvent...

前后端如何实现登录token拦截校验详解

一、场景与环境
最近需要写一下前后端分离下的登录解决方案,目前大多数都采用请求头携带 Token 的形式1、我是名小白web工作者,每天都为自己的将来担心不已。第一次记录日常开...

vue 中滚动条始终定位在底部的方法

滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度,代码实现:var div = document.getElementById('data-list-content')div.scrollTop = div.scrollHeigh...

Angular项目如何升级至Angular6步骤全纪录

前言前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试。总的来说,两次升级过程比较类似,也不算复杂。2018年5月4日,Angular6.0.0...

ES6中let 和 const 的新特性

在javascript中,我们都知道使用var来声明变量。javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量。本文给大家介绍ES6中let 和 const 的特性,...

Vue组件中的data必须是一个function的原因浅析

组件可以有自己的data,并且data必须是一个function。在下面这个例子中,data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的coun...

详解JS中统计函数执行次数与执行时间

一、统计函数执行次数
常规的方法可以使用 console.log 输出来肉眼计算有多少个输出不过在Chrome中内置了一个 console.count 方法,可以统计一个字符串输出的次数。我们可以...

解决vue 打包发布去#和页面空白的问题

1.vue项目中config文件下index.js中打包配置build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot:...

JS实现可针对算术表达式求值的计算器功能示例

本文实例讲述了JS实现可针对算术表达式求值的计算器功能。分享给大家供大家参考,具体如下:HTML部分:<div> <div id="in"> <input name="in" type="text" class="clsin" id="i...

用POSTMAN发送JSON格式的POST请求示例

postman是一个很好的http模拟器,在测试rest服务时是很好用的工具,可以发送get、post、put等各种请求。在地址栏里输入请求url:http://127.0.0.1:8081/getmoney选择“POST”方式...

返回顶部
顶部