
vue
文章平均质量分 53
yb305小白
挨踢小白。。。。
展开
-
vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。
大致意思就是当点击时间控件出现时间选择面板的时候把视频插件裁剪掉,时间控件失去焦点时再缝补回去,这种操作就不需要重新初始化插件的。一、海康插件浮窗的层级,会把项目中时间控件中的时间选择面板挡住,导致时间面板显示不全,无法选择时间。原创 2023-01-17 12:17:26 · 2682 阅读 · 3 评论 -
Vue3 “export ‘createWebHistory, createRouter‘ was not found in ‘vue-router‘
Vue3 "export ‘createWebHistory, createRouter’ was not found in ‘vue-router’在vue3中vue-router写法要改变import { createRouter, createWebHistory } from 'vue-router'//import Router from 'vue-router'// Vue.use(Router) const routes = [ { path: '/ho转载 2021-12-02 15:56:54 · 1528 阅读 · 0 评论 -
warning package.json: No license field报错
只需要在package.json内对license添加“ISC”值即可 "license": "ISC",再次执行无误转载 2021-11-30 15:38:31 · 3270 阅读 · 0 评论 -
vue项目运行后不能自动打开浏览器问题
在跟目录下找到config文件下的index.js文件,找到开发环境下的autoOpenBrowser改为true就可以了转载 2021-07-20 13:52:51 · 765 阅读 · 0 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
父组件<popup :show="showpopup" @closepop="closepop"></popup> 子组件<template> <div :class="show?'container show':'hide'" @click="close"> </div></template> //这是一个弹窗 <script> export default { .转载 2020-07-23 10:31:41 · 190 阅读 · 0 评论 -
webpack4系列教程(三):自动生成项目中的HTML文件
传送门:webpack4系列教程(一):初识webpackwebpack4系列教程(二):创建项目,打包第一个JS文件1. webpack中的CommonJS和ES Mudule 规范1.1 CommonJs规范CommonJs规范的出发点:JS没有模块系统、标准库较少、缺乏包管理工具;为了让JS可以在任何地方运行,以达到Java、PHP这些后台语言具备开发大型应用的能力。在CommonJs规范中: 一个文件就是一个模块,拥有单独的作用域; 普通方式定义的变量、函数、对...转载 2021-07-08 19:27:19 · 376 阅读 · 0 评论 -
webpack4系列教程(二):创建项目,打包第一个JS文件
传送门:webpack4系列教程(一):初识webpack1. 创建项目1.1 初始化一个项目首先安装nodejs,打开nodeJs官网直接下载安装即可,安装完毕后打开命令行工具,进入你的项目文件夹,执行npm init 进行项目的初始化:过程中会让你填写项目名、版本、描述、仓库地址、关键字等信息,可以不填一路回车,执行完毕后会在根目录下创建一个 package.json 文件,这样就初始化结束了。过程中会让你填写项目名、版本、描述、仓库地址、关键字等信息,可以不填一..转载 2021-07-08 19:13:53 · 170 阅读 · 0 评论 -
webpack4系列教程(一):初识webpack
1. 什么是webpack先来看看官网对webpack的介绍 :本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。简单来说webpack就是一个JavaScript的打包器,将各种模块(module)打包成资源文件;还可以通过 Code Split转载 2021-07-08 17:50:41 · 175 阅读 · 0 评论 -
qs.stringify参数是空数组的时候字段丢失
qs.stringify参数是空数组的时候字段丢失其中某个数组是空的时候,赋值Null,就不会出现字段丢失for (let i in config.data) { if (Array.isArray(config.data[i])) { if (config.data[i].length === 0) { config.data[i] = null } } } config.data = qs.stringi转载 2021-04-16 14:14:05 · 1606 阅读 · 0 评论 -
axios用post提交的数据格式
我们知道axios post方法默认使用application/json格式编码数据,那么解决方案就有两种,一是后台改变接收参数的方法,另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded,这样就不需要后台做什么修改了。首先看一下axios 发送POST时存在的问题:vue组件中,axios发送post请求的代码如下this.$axios({ method:"post", url:"/api/haveUser",转载 2021-04-16 14:18:55 · 874 阅读 · 0 评论 -
vue-router 基本使用(三)——嵌套路由
嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,它下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到手机的部分。 在路由的设计上,首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, compute 就相当于进入到了home的子元素。所以vue 提供了childrens 属性,它也是一组路由,相当于我们所写的routes。 首先,..转载 2020-06-12 13:53:40 · 760 阅读 · 0 评论 -
vue-router 基本使用(二)---动态路由
一、动态路由上面我们定义的路由,都是严格匹配的,只有router-link 中的to属性和 js 中一条路由route中 path 一模一样,才能显示相应的组件component. 但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示 欢迎你,+ 你的名字。不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。这就表示,它是一个组件,假设是user组件。不同的用户(就是用户的id不同),它都会导航到同一个user 组件中。这样我们在配置路由的时候,就不能写死, 就是路由中的pa.转载 2020-06-12 12:10:31 · 802 阅读 · 0 评论 -
vue-router 基本使用(一)
一、什么是路由简单说就是根据不同的url地址展示不同的内容或页面。说起路由想到路由器,路由器相当于一个中转站,从一个网络通过路由器到达另一个网络;路由的基本思想也是这个,下面是路由实现的一个简易图,供参考理解。二、路由分类1.前端路由:根据URL地址,通过hash[散列值]来实现,跳转到相应界面,前端只存在单页面首页index.htmlhttp://192.16...转载 2019-11-05 11:21:40 · 471 阅读 · 0 评论 -
如何运行vue项目(从github上download的开源项目)
前提:入坑vue.js,从GitHub上download一个vue.js的开源项目,发现不知如何在浏览器运行,通过查阅网上教程,发现网上的很多是教你怎么新建项目,并没有一个是教如何打开已有的项目。自已折腾了一下,成功搭建好项目环境,最终调试成功。现在将过程分享给大家。首先,这个教程主要针对vue小白,并且不知道安装node.js环境的。言归正传,下面开始教程:首先下载安装node.js从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。根据自己电脑选择32位/64位转载 2020-06-01 11:17:44 · 1493 阅读 · 1 评论 -
vue中使用refs定位dom出现undefined?
vue中使用refs定位dom出现undefined? 之前在公司做项目,一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别。 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解m...转载 2019-11-14 13:16:11 · 483 阅读 · 0 评论 -
Vue3.0报错error: Unexpected console statement (no-console) 解决办法
写项目过程中用ESLint遵守代码规范很有必要,但是对于一些规范也很是无语,比如:‘Unexpected console statement (no-console)’,连console都不能用,这就很抓狂了。其实增加一行代码即可。修改package.json中的eslintConfig:{} 中的 “rules”:{},增加一行代码: "no-console":"off"示例: "eslintConfig": { "root": true, "env": { "n转载 2020-07-23 10:15:07 · 389 阅读 · 0 评论 -
vue中使用swiper实现左右滑动切换图片
使用npm 安装vue-awesome-swipernpm install vue-awesome-swiper --save在main.js中引用import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.user(VueAwesomeSwiper)import 'swiper/dist/css/swiper.css'在组件...原创 2019-11-13 13:51:24 · 5011 阅读 · 0 评论 -
vue中用Element实现类手机端图库效果
一、实质:Element-UI对话框与轮播图综合使用,PictureComponent.vue 是封装好的图库组件, 在PictureList.vue文件中通过 <PictureComponent 。。。/>引用,实现图库效果。二、源码:1.PictureList.vue (调用图库组件demo)<template> <...原创 2019-11-12 14:35:06 · 1866 阅读 · 0 评论 -
Vue 父组件调用子组件的方法
1.在调用的子组件上定义一个ref属性 eg:ref="childItem"2.在子组件的methods中声明一个函数。 eg: userInfo:function(str){console.log(str);}3.在父组件中声明一个函数test,并通过this.$ref.childItem.userInfo 来使用组件中声明的函数父组件<templat...转载 2019-11-07 14:46:36 · 244 阅读 · 0 评论 -
Vue 子组件调用父组件的属性,方法
一、子组件调用父组件的方法 子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了//父组件<template> <div> <label>我是父组件</label> <child @fatherMethod="test"></child> &...原创 2019-11-07 14:22:58 · 6335 阅读 · 0 评论 -
Vue中的SPA
PA: Single Page Application(单页应用程序)概念:就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序。与传统多页面程序的区别:传统多页面程序:每次请求服务器返回的都是一个完整的页面单页应用程序:只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获...转载 2019-11-05 09:20:46 · 947 阅读 · 0 评论 -
Vue 常用命令
1.npm run serve 运行项目2.npm run lint 格式化代码3.npm run build 打包项目原创 2019-11-04 10:44:36 · 125 阅读 · 0 评论 -
Vue 环境搭建
1.安装nodeJs(版本8.0以上);2.npm安装 (1)配置镜像:npm config set registry=http://registry.npm.taobao.org (2)查看镜像是否配置成功:npm config get registry (3)全局安装npm:npm install -g3.cnpm安装 npm install -g cnpm -regis...原创 2019-11-04 10:37:34 · 111 阅读 · 0 评论 -
vue中动态加载图片路径的方法
assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他...转载 2019-09-04 14:34:39 · 2302 阅读 · 0 评论