自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Young的博客

进阶之路,无论多艰辛,都要坚持下去

  • 博客(42)
  • 资源 (7)
  • 论坛 (1)

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(一)——项目目录结构

一、项目描述刚开始的时候,为了快速开发原生app以及微信h5网页。公司决定采用一套代码来解决,即用微信h5网页的代码,嵌套到原生端(ios和android)。这样开发起来原生端就方便快捷写,主要商品详情以及支付的逻辑都可以由微信h5这边来解决,只不过要对原生端进行兼容处理。那直接从项目结构说起吧。二、项目目录我这次主要用vue-cli4.0构建的项目,大家升级脚手架的时候可以参考其他的文章升...

2020-03-01 22:46:57 680

原创 vue中使用WX-JSSDK的两种方法

公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效。一、通过全局,在router.afterEach中定义1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk2.将微信jsdk挂载到全局上在utils目录下新建...

2020-01-17 16:17:10 3223

原创 本地搭建easymock(自动化启动服务redis和mongodb)

    前端肯定需要做mock数据,然后根据mock数据去画页面,easymock是一个非常好用的工具,这里我根据网上的一些方法做些总结。要本地搭建easymock的原因,是因为easymock的官网太多人用,经常会蹦。一、安装redis下载地址,安装稳定版就可以了https://redis.io/download安装的时候直接下一步下一步,自定义...

2019-12-02 12:57:47 983 5

原创 vscode中配置eslint 和 prettier-eslint自动修复

1.首先先下载两个扩展Eslint和prettier Eslint2. 如图所示,将下面的这句话复制到vscode 的中settings.json "editor.codeActionsOnSave": { "source.fixAll": true }3.测试eslint自动修复有没有生效(项目中首先要安装eslint, npm i eslint)很简单在自己的项目中配置.eslintrc.js .prettierrc.js 然后保存试一下就行了..

2020-09-13 18:25:27 99

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(七)——项目的优化

一般项目比较大的时候,这个时候如果不优化项目,h5项目就会加载很慢。这里提供一些优化技巧,其实一般项目都可以这样做,引入cdn,压缩代码,图片懒加载,splitChunk分割代码,去掉console.log下面代码示例。1.使用cdnvue.config.jsconst isProduction = process.env.NODE_ENV !== 'development' // 开发和测...

2020-04-16 00:04:09 123

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(六)——eslint和prettier相结合

前面一开始的时候我并没有在项目中增加eslint代码规范,eslint对于协同工作和代码规范都是很重要的工具,那么现在就在已有的项目上配置eslint。1.通过vue add eslint命令官网配置地址命令安装相关依赖之后,会弹出相关的配置选项1) Pick an ESLint config,选择Prettier2) Pick additional lint features: ...

2020-04-07 23:49:16 120

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(五)——路由权限配置,微信登录授权的设计思路以及测试微信登录授权的小技巧

这一章主要是讲路由权限配置,微信登录授权的设计思路以及测试微信登录授权的小技巧1.路由权限1)首先我们得在src目录新建一个setting.js文件setting.jsmodule.exports = { title: '', // 设置页面的过渡效果 needPageTrans: true, wxConfig: { appId: '0000', appSe...

2020-04-04 17:14:58 186

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(四)——指令、过滤器、路由、Store的配置、axios的二次封装以及使用

这一篇主要是指令、过滤器、路由、Store的配置、axios的二次封装以及使用1.过滤器的配置1)在filters目录新建filters/index.js,目录结构如下:└─src │ filters │ index.jsfilters/index.js/** * @description 过滤时间格式,传入时间戳, 根据参数返回不同格式 */// 过...

2020-03-29 23:54:51 114

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(三)——vue.config.js的配置和开发、生产、测试环境的全局变量配置以及使用

这一章主要是有关vue.config.js的配置和开发、生产、测试环境的全局变量配置以及使用

2020-03-26 16:16:53 188

原创 手把手教你构建vue项目(微信h5以及hybrid混合开发)(二)——安装移动端常用ui和全局公共样式以及适配的设置

这一篇主要是安装和配置

2020-03-05 00:03:18 243

原创 vue中使用指令解决iphonex底部的适配问题

vue中使用指令解决iphonex底部的适配问题在网上也看了很多的博客,怎么去解决iphoneX底部自适配的,最通用还是去用css的env(safe-area-inset-bottom)样式去解决,具体的用法我就不多说了,大家可以看下csdn env...

2019-12-14 18:58:05 1556

原创 对组件中的v-model的理解

1.作用:v-model用于父子组件之间相互通信的一种方法 ,如果用传统的通过在子组件中的this.$emit通知父组件去$on去监听这个事件会很麻烦,v-model相对于更便捷一些2.使用:我们想在子组件中更改checked属性并且通知父组件中checked发生改变,我们可以将{{checked}}展示在页面中父组件<template> <div class="h...

2019-08-06 23:46:12 150

原创 webpack入门基础

在webpack中一切皆模块,它做的主要事情是,分析你的项目结构,找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言(scss,ts等等),并将其打包为合适的格式供浏览器识别。它能做哪些事:代码转化文件优化代码分割模块合并自动刷新代码校验自动发布它的核心就是loaders,plugins,module三大部分。可以参考我的github有关webpack...

2019-03-26 10:46:07 67

原创 sticky-footer固定底部布局

我们在开发的过程中会碰到内容很少,然后底部没有固定到底部的问题,因此,sticky-footer很关键。在这里我推荐两种方法方法1:使用flex布局,具体的可以看该目录下的demo1,其主要原理就是利用改变flex主轴方向为纵轴,内容部分设为flex:1,就是占主轴方向的剩下部分,即100vh-footer的高度(100vh相当于视图高度,1vh=1%*视图的高度),示例请看demo1.html...

2019-01-17 18:22:51 641

原创 Javascript this的简单理解

首先写这篇博客是为了整理我自己有关于this关键字的一些基本理解,让自己的关于this理解更深刻些,后面会把它整理的更加完善。javascript中this一直困扰着我,一下es5中的this,一下es6中的this,有时候自己容易晕,近期自己特意去看有关this的博客和文章,进一步加深了我对this的理解。JS中的this,在function内部创建。指向启用该函数的对象。this不...

2018-12-26 20:33:37 196

原创 MySQL入门总结和学习笔记

这段时间终于把mysql入门的一些基础知识和语法看完了,我看的是MySQL从入门到精通,仅仅只是把入门看了而已,推荐大家一本书,MySQL5.7从入门到精通,里面包含了基础理论和实战也就是操作数据库的方面的习题,边学边上手,可以说是对于刚接触数据库的人来说非常方便。大家可以下载下来看看,链接如下https://download.csdn.net/download/qq_29329037/10871...

2018-12-24 11:44:27 491

原创 vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

问题描述:vue是单页面应用。导致路由切换之后,之前的滚动距离会一直存在,页面没有到顶部。网上大部分的解决方案是利用路由的afterEach方法解决,如下所示,router.afterEach((to,from,next) => { window.scrollTo(0,0);});这样解决有如下几个问题1.scrollTo方法部分在手机上的部分浏览器不支持,也就是不兼容...

2018-11-12 10:29:33 3259

原创 thirdScriptError sdk 报错、小程序遇到的各种报错提醒以及使用wepy框架中出现的问题小程序遇到的各种报错提醒以及使用wepy框架中出现的问题

      最近一直在写我们公司的小程序,已经到了快完工的阶段(准备提交审核),在这个过程中遇到了很多bug以及小程序wepy框架的问题。下面我就简单的罗列出来一些bug和解决方案,后期如果遇到新的问题或者报错提醒,我会持续更新的。 &a

2018-08-23 19:15:12 24918 1

原创 小程序wepy踩坑之旅(五)----- 购物车的实现

首先大家可以看下演示效果 我先把封装的几个组件代码放到前面。1.购物车数量加减cart-count.wpy组件<template> <view class="cart-count"> <view class="decrease" @tap.stop="decrease">-</view>

2018-06-05 10:02:44 1836 7

原创 小程序wepy踩坑之旅(四)----- 简单的动画

大家可以先看下官网小程序apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html,看完之后推荐看一下http://www.jb51.net/article/102263.htm讲animation的文章,上面写的很详细源码如下:(直接复制到一个wepy文件中就可以使用了)...

2018-05-31 14:05:04 1834 3

原创 小程序wepy踩坑之旅(三)----- 微信小程序wepy左滑删除特效源码

我写在了shop_cart.wepy里,源码就在下面注释很详细,直接拷贝到新建的.wpy就可以使用<template> <view class="item-box"> <view class="items"> <repeat for="{{list}}" key="item">

2018-05-30 14:49:07 1394

原创 如何学习小程序-----入门资料集合

1.先了解小程序语法 小程序简易教程https://developers.weixin.qq.com/miniprogram/dev/ 2.然后wepy框架入门指南 微信小程序组件化开发框架WePY官方文档 3.看完wepy框架后可以自己尝试用wepy初始化一个项目 ,然后看下项目里的基本示例,一些语法和组件的使用,还有redux的使用可以一次学习,比如说阮一峰的es6讲解 ES6入门htt...

2018-05-18 10:17:10 3428

原创 小程序wepy踩坑之旅(二)-----微信小程序设置了合法请求域名,小程序一直提示不在合法域名列表中

这里我只讲通过微信开发者工具设置访问不在合法域名列表中的域名,打开微信开发者工具->设置->项目设置->选中不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 ...

2018-05-17 10:43:33 3560

原创 visual studio code (一)-----webstorm的快捷键映射

webstorm的功能很全,但同时占用电脑的内存比较大,对于一般的电脑带不动,所以我们会选择轻量级的vscode,我们之前习惯使用了webstorm的人,可以把webstorm的快键键映射过来。1.点击文件–>首选项–>键映射扩展,如下图所示 2.然后安装IntelliJ IDEA Key Bindings,这里我已经安装了,所以大家安装重启一下就好了 注...

2018-05-08 15:36:42 8950 2

原创 小程序wepy踩坑之旅(一)---- thirdScriptError sdk uncaught third Error module "npm/lodash/_nodeUtil.js

     近期一直在学小程序,作为新手,比较了下mpvue和wepy两个小程序框架,mpvue作为美团刚出来的vuejs开发看起来很不错,学习成本很低,但是对于在实际项目开发中,mpvue刚出来,很多资料,比如踩坑,比较少,而wepy框架腾讯出的接近一年半,有很多大牛分享方法和他们踩过的坑,对于实战开发而言,个人觉得还是选择wepy框架开发,...

2018-05-07 23:35:38 18536 14

原创 webstorm-----eslint的配置和使用(2018版)

在使用vue的项目中,我们有时候就会用到eslint去要求团队的代码规范一样。下面就让我们一起来配置一下,个人习惯是用英文版的webstorm(也建议大家使用英文版),我所有的并不是全局安装eslint的方法,可以针对单个项目进行eslint检测和修复1.点击settings->pluings ->搜索eslint-> Install安装 2.安装好之后,找到s...

2018-04-26 21:46:48 46729 12

原创 Vue学习之路(九) --- 非父组件之间的通信

1. 非vuex实现 非父组件之间的通信 原理是:在父组件或者全局创建一个事件仓储eventHub,然后通过$emit 和 $on 实现通信1.1 通过在window上绑定eventHub的Vue实例对象,具体实现方法如下: 目录结构 在绑定eventHub实例对象之前需要import Vue from ‘vue’,然后根组件中使用window.eventHub...

2018-04-26 10:54:55 111

原创 Vue学习之路(八) --- vue-router使用

1.首先安装vue-router ,在项目的文件夹中使用npm命令即npm install vue-router –save(提示:如果你在vue-cli脚手架工具中已经选择安装路由可以不用执行这一步)2.在实战中,一般路由放在src/router/index.js中具体操作如下 路由的配置,需要一个实例一个路由对象,然后在路由中配置中数组,具体如下,其中component...

2018-04-22 22:27:30 173

原创 webstorm-----SVN的配置

1.先去下载slikSVNhttps://sliksvn.com/download/2.下载后直接安装,在安装的过程中注意一下自己的安装目录就行了,然后不断下一步下一步3.我用的是webstorm2018,进入settings,找到version Control 下面的subversion,点击subversion,在路径里直接选择E:\Program Files\SlikSv...

2018-04-19 10:47:04 10207 1

转载 vue项目的基本架构

参考FungLeo的博客一步一步的配置(https://blog.csdn.net/fungleo/article/details/77585205)vue基本结构地址:github项目地址https://github.com/yangyankang/vue-template 项目下载下来以后,直接npm install 安装包,然后npm run dev 就行了。vue...

2018-04-16 13:38:47 1311

原创 简单的vue小demo

这里有几个小demo大家可以看下,自己对比学习,简单的操作下vue对理解还是比较快的 新手可以尝试的vueJS小demo,点击这里

2018-04-14 15:37:38 2089

原创 ES6学习(三)---- 字符串的扩展

我只总结一些常用的。涉及到字节方面的方法暂时不作记录。1.startsWith 和endsWith、includes,其中他们都有两个参数,第一参数是包含的字符串,第二个参数是个n数字,includes和startsWith的第二个参数表示是从这个索引开始,endsWith的索引是从0-n。let str = 'abc';str.startsWith('a');//truest...

2018-03-22 00:07:18 80

原创 ES6学习(二)---变量的解构赋值

1.数组的解构赋值(1)等式左右两边结构相同,等式右边的值就会被赋值给等式左边的let [a,b,c] = [1,2,3];//相当于a =1 ,b =2, c =3let [head,...tail] = [1,2,3,4];//tail 4//head 1let [a, b ,...c] = ['a'];//a "a"//b undefined//c [](2...

2018-03-14 23:49:47 71

原创 ES6学习(一)---let和const用法

1.let用法(1)存在作用域,即let声明函数会在花括号中执行 (2)es6规定暂时性死区,暂时性死区通俗的来讲就是一个区块中存在let和const声明的变量,那么该区块会形成封闭作用域,在let和const声明之前使用该变量都会报错。//例子1{console.log(a);//a is not definedlet a = 1;}//列子2{let x = x;//同...

2018-02-27 09:01:59 92

原创 Vue学习之路(七)---transition过渡动画

vue中过度动画v-if和v-show都可以使用,首先要明白四个状态,v-enter(刚开始进入) ,v-enter-active(进入过程中到进入完毕),v-leave-enter(刚开始离开),v-leave-enter-active(离开过程中到离开),示例图如下 好的,弄清楚了这四种状态,然后我们就可以简单的开始transition过渡的实操了,在v-enter-active以及v-

2018-01-21 23:17:10 779

原创 Vue学习之路(六)---父组件与子组件之间的数据传递

前面我讲了基本组件的写法,现在一起学下父组件怎样传递数据到子组件,以及子组件传递数据到父组件的1.父组件传递数据到子组件1.1 通过props传递父组件App.vue中a big-num=98>a>//传递big-num父组件源码template> div id="app"> --> component-a big-num=98>co

2018-01-21 16:34:00 745

原创 Vue学习之路(五)----Computed计算属性与watch监听

1.computed计算属性常用于当value值变化时重新对值进行计算。举个简单的例子(当输入框中的value值变化时,输出结果为无数字的字符串)://html"text" v-model="value"/>{{valueWithoutNum}}//data中data () {value: ''}//computed属性中computed: { vauleWithoutNum

2018-01-21 14:56:21 3393

原创 Vue学习之路(四)---v-model(双向数据绑定)与表单

v-model具有双向数据绑定的功能,可以绑定数组和字符串,不过,在绑定之前,需要将我们需要绑定的数据进行初始化。 1.当输入框的值改变时,{{value}}中的值会跟着改变//html "text" v-model="value" value="apple"/> {{value}}//datadata () { value: ''}2.input为checkbo

2018-01-21 12:05:12 6262

原创 Vue学习之路(三)---基本指令

基本指令的写法都是以v-开头,例如v-html,v-bind:title……等等。 现在说下基本指令一些用法:1.基本的形式,v-text和v-html的区别网页上的显示效果2.v-for的使用代码(循环遍历数组)效果图 说明:如果需要索引的话可以写成如下形式(vue2.0的写法) div v-for="(item,index)

2018-01-21 10:56:00 268

原创 Vue学习之路(二)---组件

1.Vue提供全局的api,Vue.Component,在写data数据的时候最好用函数返回数据,这样做是为了避免在使用多个这个组件时,数据变化而导致组件的数据都变了。Vue.component('my-header',{ template: '',//渲染模板 data: function () { return { a: 1, b: 2 }

2018-01-20 21:05:51 150

MySQL5.7入门到精通PDF和学习笔记

这里主要是mysql入门到精通的pdf书籍和我个人的学习笔记。其中学习笔记需要是思维导图,要用mindmaster软件打开

2018-12-24

前端goole浏览器的一些插件

这里有很多google的插件,像vue-devtool、jsonView等等,.crx后缀的文件直接拖到google的扩展工具就行了

2018-04-21

webstrom eslint插件

主要是websorm的eslint语法的插件,到时候我会写一篇webstorm2018配置eslint的文章,敬请期待

2018-04-21

sourceTree

代替命令行,非常简单好用,这里有一篇跳过注册安装的文章大家可以看下https://www.cnblogs.com/lucio110/p/8192792.html

2018-04-21

最新版nodeJs

最新版的node,大家可以按照自己的需要下载安装、配置

2018-04-21

vue-devtools-master含modules

vue-devtools-master含modules,其中包含原版vue-devtools-master和已经下载好的modules版本

2018-04-12

node-v8.9.2-x64

高版本nodeJs安装

2018-02-25

用webstorm创建vue文件报错,怎么解决?

发表于 2018-01-20 最后回复 2018-01-21

空空如也
提示
确定要删除当前文章?
取消 删除