vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:"./" 背景图片的引用问题 上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/ima

前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标弹出相关信息的弹窗,并且能够同时打开多个.这时就可以用Vue.extend方法手动挂载弹窗组件. 举例: // 目录结构 /registry /videoDialog videoDialog.vue index.js /XXXDialog ··· index.js // videoDialog/index.j

在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的项目里的非父子组件来说,它们一方面不适用props,另一方面又没有必要使用Vuex,针对这种情形可以使用中央事件总线(Event Bus)来解决问题. 1.创建中央事件总线 可以使用多种形式创建Event Bus. Example 1: // main.js import Vue from 'vue

在学习HTML的时候一定会遇到引入文件和链接跳转页面,比如:JS文件.CSS文件.Image图片.我们就会考虑是相对路径和绝对路径的问题.下面PHP程序员雷雪松就详细讲解下Web开发中的相对路径和绝对路径是什么? 相对路径 相对路径,就是相对于当前文件的目标文件位置.这样有个好处就是,当你整个项目移动时,你项目内文件之间的相对关系没有改变,你之前设置的路径任然是准确的.例如:Web服务器文件夹a下面有index.html和image.jpg两个文件.index.html文件里引入image.jp

vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSize' ]) }, 这个错误是在项目中,不识别es6的扩展运算符,解决办法(四步走)如下: 第一步:安装babel-plugin-transform-object-rest-spread cnpm install babel-plugin-transform-object-rest-spread 第二

前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开的端口 正文 开发环境中的跨域 首先,要确定后台服务的ip与端口 这里我的后台开的是 localhost:8081 npm run serve在8080端口 一般我们使用ajax请求的时候,会可以把url ip:port/api 写在ajax请求的url参数中 this.axios.get("loc

vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷贝官方的 准备工作 新建文件夹D:\03www2018\study\vue2017,下面根目录指的就是这个目录 生成package.json, 根目录>npm init 安装webpack和webpack开发服务器, 根目录>cnpm i -D webpack webpack-dev-server

描述 在开发中经常会读取配置文件,在Web开发中大多数都是在项目路径下.核心的API类或者是Controller异或是jsp页面等,基本都是基于web应用的相对路径,很少去操作绝对路径,但是在客户端.jar启动方式.exe方式情况下,获取资源文件的路径就会是一个相对不同的问题. 最近公司有个开发需求,非网络的pc客户端处理需求.很多操作都可以收集.编辑放到配置文件去批处理执行,这时候遇到一个问题,就是在打jar包的时候,发现有个诡异的区别. 代码: 点击查看代码 - [JarProperties

在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have 'v-bind:key' directives Eslint规则检查显示如下: 报错信息如下: [eslint-plugin-vue] [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives. 1 2 3 这是因为我们安装了

什么是client路径? 第一类.也就是html或js文件等client訪问的文件里的路径,这里包含一些资源文件的引入(js.css还有各种图片等),或是跳转到静态html页面,总之获取的都是静态资源 第二类.指定servlet跳转路径(比方<a href=""></a>或者location.href) 事实上这两类本质都一样,都是通过请求server来获得对应的资源. 在tomcat中一般用一个defaultServlet来处理静态资源的訪问. 而第二类则通常

我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入到输入框的字符.例如,首个字符是0或者非数字字符即使编辑了也输入不进去.这种需要通常就需要在input事件触发时就利用正则验证来实现了.以手机号为例: html <div class="e"> <label>手机号</label> <input c

我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navagitor等,以及H5的FormData()方法,所以当你在created之前使用这些时,会报错,那么如何处理呢? 1.自己的写的函数里包含window等 因为nuxt为SSR框架,所以其编译打包时会区分服务端渲染还是客户端渲染(即浏览器),在vue文件中使用window对象报错的原因是,webpac

    如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装,   在国内安装node-sass失败的话,可以使用淘宝镜像: 参考地址:https://npm.taobao.org/, 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装上cnpm后,可以使用: cnpm install node-sass --save-d

对没错,这次又是ElementUI的问题,在使用ElementUI中的 tree 树形控件时需要动态添加DOM元素,但是在使用文档中给出的案例的时候会报错. 案例:ElementUI树形控件 - 自定义节点内容 <el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on-click-node=&q

vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments&

vue在打包的时候css报错,首先声明的这个并没有解决webpack本身的问题,本来这个也是一个警示,不会影响代码正常运行 这个是因为我在多个页面引入了同一个css文件,webpack打包时候对css文件顺序报错,如果css少,可以稍微改动下css文件顺序即可,但是当很多文件引入的时候,就没法一个个改了,解决办法是在build的文件中加入

属性排放 export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 } 管理请求加载状态 async beforeMount(){ // 开始加载 this.loading = true

(一)eslint静态检查 在大家用vue-cli创建工程的时候,会有一项,使用使用eslint,如果选择了y,那么工程就会安装并启用eslint. 这里列举一下常见的错误: 1.多余的分号 2.定义了却未使用的变量 3.结尾多余空格 4.超过一行的空行 5.代码尾行应该有空行 错误肯定是列举不完的,那么提示错误的时候,我们应该先去看提示信息(翻译),如果发现没有错误,可以对照eslint的官方文档 在大家适应了eslint的写法后,效率和正确率会直线上升,这里安利下我的另一篇文章,提升效率的e

1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced -S (开发.运行都依赖) postcss-aspect-ratio-mini postcss-px-to-viewportpostcss-write-svgpostcss-cssnextcssnanopostcss-viewport-units 3.配置  .postcssrc.js module.

1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">标签,在submit的时候执行方法 3.正式代码  let oFiles = document

把图片路径写在data里面,然后渲染模板的两种方式 方案1.在data使用require将图片进入,写法如下 logo: require('../asset/admin/logo.png')  在模板中渲染              <img :src="logo"> 方案2.把图片放在static文件夹中,如下                      在data中使用          logo: '../static/images/logo.png'