一个来自外太空的游客

原创 vuex 的 dispatch 和 commit 的区别 vue

import Vuex from 'vuex'Vue.use(vuex);const store = new Vuex.store({　　state: {　　　　nickName: "",　　　　cartCount: 0　　　　},　　mutations: {　　　　updateUserInfo(state,nickName) {　　　　　　state.nickName = nickName;　　　　},　　　　updateCartCount(

原创 vue+axios --齐枭飞-前端实现登录拦截（路由拦截、http拦截）

一、路由拦截登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。constroutes = [{path:’/’,name:’/’,component: Index},{path:’/repository’,nam...

原创 JS 工具函数助力高效开发 - 齐枭飞 - web前端专家

【代码】JS 工具函数助力高效开发 - 齐枭飞 - web前端专家。

原创 在项目中用ts封装axios

在项目中用ts封装axios基础封装// index.tsimport axios from 'axios'import type { AxiosInstance, AxiosRequestConfig } from 'axios'class Request { // axios 实例 instance: AxiosInstance constructor(config: AxiosRequestConfig) { this.instance = axios.create(

原创 前端自动化部署项目到服务器 -- 一行命令搞定，摒弃传统的手工部署 npm run build

传统的前端代码手工部署流程如下：传统的手工部署需要经历：1.打包，本地运行npm run build打包生成dist文件夹。2.ssh连接服务器，切换路径到web对应目录下。3.上传代码到web目录，一般通过xshell或者xftp完成。传统的手工部署存在以下缺点：1.每次都需要打开xshell软件与服务器建立连接。2.当负责多个项目且每个项目都具有测试环境和线上环境时，容易引起部署错误。（个人之前非常悲剧地遇到过一次，由于同时负责四个项目，八个环境。一天同时可能修改多个项目，

原创 PostCSS的插件 -- 关于vue rem适配布局方案

个人习惯，有人喜欢所有的配置都放到了vue.config.js（vue-cli3.0默认没有此文件，需要你创建一个）中（一般会在里面配置有代理跨域）

原创 vue webApp使用lib-flexible和px2rem引用第三方ui库后，样式错乱问题

首先，需要卸载项目中的postcss-px2rem。npm uninstall postcss-px2rem --save-dev其次，安装postcss-px2rem-excludenpm install postcss-px2rem-exclude --save然后在postcss.js下配置“postcss-px2rem-exclude”: {remUnit: 75,exc...

原创 vue项目中使用lib-flexible解决移动端适配的问题

第一部分：项目中引入lib-flexible一、项目中安装lib-flexible$ npm install lib-flexible --save二、在项目的入口js文件中引入lib-flexibleimport 'lib-flexible'通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。lib-flexible会自动在html的head中添...

原创 整理了几个经常在H5移动端开发遇到的东西

不用说我也知道，此类文章太多太多了，常见的譬如：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料????本篇文章主要是讲一些其他的或者优化手段。内容不多????弹出数字键盘复制代码安卓跟IOS的表现形式应该不一样，大家可以自己...

原创 CSS 书写规范——BEM思想 --一个风中凌乱的前端

在开发中前端开发人员经常会遇到css 命名的烦恼，尤其是代码一多，你的css 就百花齐放，啥样的都有！但是终究要有一个规范！1.所有的变量名要有意义 看到名字就知道变量所存储的数据，当然 也可以使用驼峰命名法！但是这里不是将驼峰，而是另一种命名法！这种命名法 很多的UI框架库、组件已经在使用了（例如：vant），个人极力推荐！下面步入正题~使用BEM命名规范来组织CSS代码如何使用BEM...

原创 jquery中链式调用原理

(1).链式调用 $("#mybtn").css("width","100px") .css("height","100px") .css("background","red");(2).在对属性进行操作时建议使用JSON形式控制样式$("#mybtn").css({ widt

原创 ES6 Promise 用法讲解 齐枭飞

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); ...

原创 webpack4配置

经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中，也学到了不少。​  今天就尝试着一起来聊聊Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解webpack中的每一个配置字段的作用(部分为we...

原创 vue-cli2.0配置文件详解 --齐枭飞前端

webpack.base.conf.js配有一些基础要素包括，会和 通常的webapck.config.js类似。// 0. 引入一些依赖var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoaderConfig = require('./vue...

原创 vue-axios-router 基础写法用法 齐枭飞前端

router.jsimport Vue from 'vue'import VueRouter from 'vue-router'import store from './store/store'import * as types from './store/types'import Index from './index.vue'import Repository from './re...

原创 vue-cli 3.0安装和使用

Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行...

原创 封装一个方法判断数组和对象还有字符串--齐枭飞

//封装一个方法判断数组和对象 var o = { 'name':'lee' };var b ='22';var a = ['reg','blue'];function c(name,age){ this.name = name; this.age = age; } var c = n...

原创 齐枭飞 运用JS设置cookie、读取cookie、删除cookie 齐枭飞前端高级工程师

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie.需要提醒大家的是：直接右键用浏览器打开是没有效果的，要放到站点下面才能起效。假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需...

原创 vue2.0 实现导航守卫 --- 齐枭飞 前端开发攻城狮（路由守卫） 使用vue-router+vuex进行导航守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter...

原创 10分钟理解JS引擎的执行机制 event loop ---齐枭飞前端构架

首先,请牢记2点:(1) JS是单线程语言(2) JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop技术的出现,都跟现实世界里的应用场景密切相关的。同样的,我们就结合现实场景,来回答这三个问题(1) JS为什么是单线程的?JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。场景描述:那么现在有2个进程,...

原创 iview admin打包 -- 齐枭飞

在程序根目录右键打开cmd，输入npm run build这时就会进入打包的步骤，打包好之后就会在程序根目录出现一个dist的文件夹，里面有一个index.html文件和另一个dist的文件夹。这里要说明几点：最外层的dist文件夹不能用，要把index.html页面放到网站(web容器)的根目录。删除webpack.base.config.js文件里面的{ test: /\...

原创 keep-alive Vue路由开启keep-alive--前端工程师--齐枭飞

Vue路由开启keep-alive时的注意点在项目中使用包含实现页面缓存，加速页面加载，这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps...

原创 esLint参数设置--齐枭飞

{ "name": "testEsLint", "version": "1.0.0", "description": "", "main&qu

原创 Eslint 规则说明

"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作...

原创 Vue2.0系列——vue封装swiper轮播组件--

Prop 使用 Prop 传递数据 camelCase vs. kebab-case 动态 Prop 字面量语法 vs 动态语法 单向数据流 Prop 验证

原创 Vue通信、传值的多种方式，详解（都是干货）

一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B②在B组件中获取A组件传递过来的参数this.$route.query.orderId二、通过设置 ...

原创 Vue系列-齐枭飞——在vue项目中使用echarts --齐枭飞

如果有什么不明白的地方 大家可以加 vue2.0技术交流群：285595782安装echarts依赖npm install echarts -S 或者 使用淘宝镜像安装 cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org使用：cnpm install echarts -S下面就创建图表了： 其实很简单—&...

原创 vue+axios --齐枭飞-前端实现登录拦截（路由拦截、http拦截）

一、路由拦截登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。constroutes = [{path:’/’,name:’/’,component: Index},{path:’/repository’,name:‘repository...

原创 iview-admin使用教程之路由配置

功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示成功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示类型。直接来看代码:./src/route...

原创 今天 大年初六 ， axios 使用时遇到了点小问题，

今天 大年初六 ， AND axios 使用时遇到了点小问题，if (valid) { // debugger console.log(JSON.stringify(this.formValidate)); var params = new URLSearchParams(); para...

原创 Vue系列-齐枭飞---进阶vue全家桶

有人说只会vue不会vuex还只是个切图仔，所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，...

原创 齐枭飞 打包时输出到根目录下配置

原创 齐枭飞 Vue系列---进阶vue全家桶

有人说只会vue不会vuex还只是个切图仔，所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，...

原创 齐枭飞 websocket------详解

大家可以加 VUE qq交流群,可以留言哦！一、websocket与httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，...

原创 齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决

老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。1、找到 config->index.js里面，如下修改2、找到 build->utils.js,在里面加入一句publicPath:’…/…/’,[图片上传中…(image-7129b4-152301...

原创 微信小程序 齐枭飞：wx.navigateTo 不跳转问题

微信小程序——面页不跳转问题代码1：wx.navigateTo({url:'../logs/logs'})代码2："tabBar": {"position":"bottom","list": [ {"pagePath":"pages/index/index","text":"首页"}, {"pageP

原创 齐枭飞前端架构师 微信小程序数据缓存

关于本地缓存1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB2.localStorage 是永久存储一、异步缓存wx.setStorage(OBJECT)将数...

原创 -齐枭飞前端架构师 微信小程序--仿微信 QQ左划事件--

废话不多说，直接上代码：js:var app = getApp()Page({ data: { items: [], startX: 0, //开始坐标 startY: 0 }, onLoad: function () { for (var i = 0; i < 10; i++) { this.data.item...

原创 齐枭飞 -- 小程序登录&授权&获取用户信息 新版小程序登录授权

首先近期工作中需要做小程序框架升级，升级成美团开源的mpvue框架；然后因为微信小程序API的改版，所以也顺便将授权登录的逻辑重新设计了。授权登录的逻辑参考了多个小程序，希望能找到最优的模式。下面会配合代码详细讲解整个流程。模式概览由于微信小程序的改版导致直接弹出授权的登录方式将逐渐不再支持，受影响的有 wx.getUserInfo 接口，以及 wx.authorize 接口传入 scope...

原创 齐枭飞 vue--vuex详解

Vuex什么是Vuex？官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex是用来管理组件之间通信的一个插件为什么要用Vuex？我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件...