前端
前端学习
Yuki-W
吾日三省吾身
展开
-
解决小程序图片上传问题
【项目需求】:在小程序中点击按钮,上传图片,并显示相应图片。之前写过在Vue上的图片上传,但是存在一些小问题,待改进。【遇到的问题】:本来微信官方文档已经提供了 wx:chooseImage 接口,只需要调用就可以很快实现图片上传显示。但是,这里有一个非常严重的问题。使用wx:chooseImage拿到的图片资源是一个临时图片(路径前缀为:wxfile://tmp 或者 http://tmp...原创 2020-02-21 14:45:06 · 7530 阅读 · 7 评论 -
使用正则表达式进行身份证号匹配
正则表达式匹配身份证号分为:18位和15位校验 18位身份证地区: ([1-6][1-9]|50)\d{4} // 补充重庆地区50年的前两位: (18|19|20) 1800-2399年的后两位: \d{2}月份:((0[1-9])|10|11|12)天数: (([0-2][1-9])|10|20|30|31) 闰年不能禁止29+三位顺序码...原创 2020-01-30 22:52:51 · 7997 阅读 · 0 评论 -
Webpack引入CDN链接优化打包后的体积
BootCDN官网项目开发完成后,使用webpack打包的文件都比较大,所以我就想使用什么办法来优化一下。本文主要是讲解在 vue-cli 中如何利用CDN实现打包文件体积优化问题。如下图所示,是我整个项目打包后资源的分布,其中红色标注部分是占用体积最大的。一个显示的是图片资源,另一个显示的是js。图片资源好说,这里主要讲解一下这个JS文件。我百度了一下这个vendor文件。然后根据提示...原创 2020-01-03 18:37:24 · 818 阅读 · 0 评论 -
Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误:经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理解决办法:安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-dynamic-importcnpm install babel-plugin-syntax-dynamic-import -D在.b...原创 2020-01-06 21:14:08 · 5306 阅读 · 0 评论 -
解决props数据传递时报错问题
先贴出错误提示:[Vue warn]:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. P...原创 2019-12-21 16:25:40 · 2434 阅读 · 1 评论 -
vue关于父组件调用子组件的方法
https://blog.csdn.net/qq_34664239/article/details/80386153转载 2019-12-12 20:44:15 · 116 阅读 · 0 评论 -
前后端分离项目解决跨域问题
后台我使用的SSM框架搭建,前端使用vue-cli脚手架完成。最开始我在后台写了过滤器,但是前端请求数据的时候,能够成功请求,可是在返回的时候报了如下错误经过一番研究后,发现在前端其实就可以处理跨域的问题。步骤如下:在vue项目下的config文件夹下的 index.js 文件中设置:var url = '**********' //接口api地址const path = requ...原创 2019-12-10 16:52:40 · 636 阅读 · 0 评论 -
解决使用vue-cli搭建的项目无法使用scss的问题
在 App.vue 下使用 scss 语法报错:解决方法:安装以下依赖就可以了,vue-cli默认没有scss-loader,scss-loader又需要node-sass,只安装scss-loader是不行的。另外webpack就不需要配置了,因为vue-cli会帮你配置安装的loader输入如下命令:npm install node-sass --savenpm install s...原创 2019-11-18 16:21:18 · 1998 阅读 · 1 评论 -
解决使用vue-cli搭建的项目出现的ESLint错误
问题原因:Vue对语法的严格限制找到 build 文件夹下的 wwebpack.base.conf.js,注释以下代码:原创 2019-11-16 22:04:59 · 637 阅读 · 0 评论 -
Vue学习——使用Vue-CLI项目搭建
什么是Vue CLI?其实就是一个“脚手架”,使用它,可以快速地搭建一个完整地Vue应用。他它的作用就是用来自动一键生成 vue + webpack 的项目模板,包括依赖库。免去了我们手动安装各种插件,各种引入的问题。使用 Vue CLI 快速构建项目的步骤打开控制台,输入 cnpm i vue-cli -g安装 Vue CLI ,尚未安装cnpm的可以输入npm i cnpm ...原创 2019-11-01 22:04:09 · 193 阅读 · 0 评论 -
本地项目托管到码云
在本地项目中,创建三个文件,这是托管到git上必须的:1.1 .gitignore文件1.2 README.md 文件1.3 LICENSE 文件The MIT License (MIT)Copyright (c) 2014 connors and other contributorsPermission is hereby granted, free of charge, ...原创 2019-10-18 21:05:33 · 144 阅读 · 0 评论 -
webpack学习(5)
区别webpack中导入Vue 和普通页面中导入Vue 的区别1. 在普通网页中如何使用Vue使用 script标签,引入 vue包在 index页面中,创建一个 id=‘app’ 的div容器通过 new Vue() 得到一个 VM实例2.在 webpack 中导入 Vue包两种方式方式1:在 main.js 文件中导入vue.jsimport Vue fro...原创 2019-10-18 11:32:58 · 103 阅读 · 0 评论 -
webpack学习——html-webpack-plugin的两个基本作用
首先,使用 webpack-dev-server 命令生成的 bundle.js 文件是存放在内存中的,并没有在我们的物理磁盘上。平时我们访问的 index.html 页面其实也是在物理磁盘上的,现在我们想访问内存中的页面时,就可以使用 html-webpack-plugin 来实现。由于使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中...原创 2019-10-11 23:17:08 · 417 阅读 · 0 评论 -
webpack学习—— webpack-dev-server(3)配置命令的第二种方式
第一种方式是直接在描述文件package.json 里配置第二种方式是在 webpack.config.js 文件里声明原创 2019-10-11 22:38:59 · 191 阅读 · 0 评论 -
webpack学习—— webpack-dev-server(2)常用命令参数
格式:空格 – 参数名webpack-dev-server 常用命令参数:open:是否自动开启浏览器,默认:false,当设置为true,开启dev-server服务的时候,会自动在浏览器打开项目。port :端口号 默认:8080 可以单独设置服务器的端口号,如果默认的8080被占用的情况,这个配置就派的上用场啦。contentBase:定义开启服务器的文件夹,默认:当前项目根目...原创 2019-10-11 22:18:41 · 401 阅读 · 0 评论 -
webpack学习—— webpack-dev-server(1)
webpack-dev-server一个用来快速搭建本地运行环境的工具,使用 webpack-dev-server命令,我们可以启动web服务器并实时更新我们的修改。运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖。(虽然这里有警告,但是貌似不影响后面操作,所以我就先没管)安装完毕后,这个工具的用法 和 webpack 命令的用法完全一致。...原创 2019-10-11 21:39:54 · 235 阅读 · 0 评论 -
Vue.js入门(三)--Vue生命周期
首先上图上图其实已经将每个过程详细说明了,但是为了使自己能够更好的理解Vue的整个生命周期过程,这里我自己做了整理,如果您只需了解周期历程,那么接下来的内容您大可忽略,到此为止。Vue实例在初始化时需要经历一系列过程,比如编译模板、渲染虚拟DOM树、将实例挂载到DOM上、设置数据监听和数据绑定等。在这些过程中也会运行一些钩子函数,允许开发者在不同阶段注入自己的代码。在开始之前,首先要对这些...原创 2019-10-09 20:18:28 · 141 阅读 · 0 评论 -
Vue.js入门(二)
Vue指令之v-modelv-model 和 v-show 是 Vue 核心功能中内置的、开发者不可自定义的指令。我们可以使用 v-model 为可输入元素(input & textarea)创建双向数据绑定,它会根据元素类型自动选取正确的方法来更新元素。例如,在输入框上使用时,输入的内容会实时映射到绑定的数据上。v-model使用方法如下:<div id="app">...原创 2019-09-29 09:56:33 · 163 阅读 · 0 评论 -
Vue.js入门(一)
Vue.js入门(一)对Vue.js的理解官方解释:一套用于构建用户界面的渐进式框架。渐进式,就是我们可以一步一步、有阶段性地来使用Vue.js,不用一开始就要会使用所有的东西。Vue是一套构建用户界面的框架,只关注视图层,可以配合第三方库或既有项目进行整合。vue的核心概念,就是不再操作DOM元素,程序员只需要专注于关心业务逻辑框架和库的区别框架:我们可以依照框架的...原创 2019-09-28 17:08:54 · 279 阅读 · 0 评论