关注
分享
终极前端开发协会
啊，我没有疯，我要加班，啊 加班使我兴奋，啊...a...
展开
-
JS 工具函数助力高效开发 - 齐枭飞 - web前端专家
【代码】JS 工具函数助力高效开发 - 齐枭飞 - web前端专家。原创 2023-11-21 16:14:45 · 179 阅读 · 0 评论 -
在项目中用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(原创 2022-03-24 11:27:01 · 168 阅读 · 0 评论 -
前端自动化部署项目到服务器 -- 一行命令搞定，摒弃传统的手工部署 npm run build
传统的前端代码手工部署流程如下：传统的手工部署需要经历：1.打包，本地运行npm run build打包生成dist文件夹。2.ssh连接服务器，切换路径到web对应目录下。3.上传代码到web目录，一般通过xshell或者xftp完成。传统的手工部署存在以下缺点：1.每次都需要打开xshell软件与服务器建立连接。2.当负责多个项目且每个项目都具有测试环境和线上环境时，容易引起部署错误。（个人之前非常悲剧地遇到过一次，由于同时负责四个项目，八个环境。一天同时可能修改多个项目，原创 2020-08-06 17:50:57 · 4181 阅读 · 4 评论 -
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...原创 2018-11-15 16:17:22 · 872 阅读 · 0 评论 -
vue-cli 3.0安装和使用
Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行...原创 2018-11-13 13:47:24 · 1269 阅读 · 0 评论 -
iview admin打包 -- 齐枭飞
在程序根目录右键打开cmd，输入npm run build这时就会进入打包的步骤，打包好之后就会在程序根目录出现一个dist的文件夹，里面有一个index.html文件和另一个dist的文件夹。这里要说明几点：最外层的dist文件夹不能用，要把index.html页面放到网站(web容器)的根目录。删除webpack.base.config.js文件里面的{ test: /\...原创 2018-11-05 10:47:46 · 1281 阅读 · 2 评论 -
keep-alive Vue路由开启keep-alive--前端工程师--齐枭飞
Vue路由开启keep-alive时的注意点在项目中使用包含实现页面缓存，加速页面加载，这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps...原创 2018-11-05 10:21:44 · 487 阅读 · 0 评论 -
封装一个方法判断数组和对象还有字符串--齐枭飞
//封装一个方法判断数组和对象 var o = { 'name':'lee' };var b ='22';var a = ['reg','blue'];function c(name,age){ this.name = name; this.age = age; } var c = n...原创 2018-11-09 17:46:22 · 165 阅读 · 0 评论 -
齐枭飞 运用JS设置cookie、读取cookie、删除cookie 齐枭飞前端高级工程师
JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie.需要提醒大家的是：直接右键用浏览器打开是没有效果的，要放到站点下面才能起效。假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需...原创 2018-11-09 16:02:04 · 202 阅读 · 0 评论 -
webpack4配置
经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中，也学到了不少。 今天就尝试着一起来聊聊Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解webpack中的每一个配置字段的作用(部分为we...原创 2018-11-15 18:29:36 · 1604 阅读 · 0 评论 -
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...原创 2018-11-14 10:02:02 · 797 阅读 · 0 评论 -
jquery中链式调用原理
(1).链式调用 $("#mybtn").css("width","100px") .css("height","100px") .css("background","red");(2).在对属性进行操作时建议使用JSON形式控制样式$("#mybtn").css({ widt原创 2018-12-16 20:42:04 · 1862 阅读 · 0 评论 -
ES6 Promise 用法讲解 齐枭飞
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); ...原创 2018-12-12 10:25:51 · 129 阅读 · 0 评论 -
CSS 书写规范——BEM思想 --一个风中凌乱的前端
在开发中前端开发人员经常会遇到css 命名的烦恼，尤其是代码一多，你的css 就百花齐放，啥样的都有！但是终究要有一个规范！1.所有的变量名要有意义 看到名字就知道变量所存储的数据，当然 也可以使用驼峰命名法！但是这里不是将驼峰，而是另一种命名法！这种命名法 很多的UI框架库、组件已经在使用了（例如：vant），个人极力推荐！下面步入正题~使用BEM命名规范来组织CSS代码如何使用BEM...原创 2019-06-23 10:21:59 · 343 阅读 · 0 评论 -
整理了几个经常在H5移动端开发遇到的东西
不用说我也知道，此类文章太多太多了，常见的譬如：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料????本篇文章主要是讲一些其他的或者优化手段。内容不多????弹出数字键盘复制代码安卓跟IOS的表现形式应该不一样，大家可以自己...原创 2019-10-10 10:28:52 · 393 阅读 · 0 评论 -
vue项目中使用lib-flexible解决移动端适配的问题
第一部分：项目中引入lib-flexible一、项目中安装lib-flexible$ npm install lib-flexible --save二、在项目的入口js文件中引入lib-flexibleimport 'lib-flexible'通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。lib-flexible会自动在html的head中添...原创 2019-10-10 10:34:35 · 824 阅读 · 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...原创 2019-10-10 10:37:59 · 656 阅读 · 0 评论 -
PostCSS的插件 -- 关于vue rem适配布局方案
个人习惯，有人喜欢所有的配置都放到了vue.config.js（vue-cli3.0默认没有此文件，需要你创建一个）中（一般会在里面配置有代理跨域）原创 2019-10-10 10:45:21 · 293 阅读 · 0 评论 -
vue2.0 实现导航守卫 --- 齐枭飞 前端开发攻城狮（路由守卫） 使用vue-router+vuex进行导航守卫
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter...原创 2018-11-09 14:19:29 · 1639 阅读 · 0 评论 -
10分钟理解JS引擎的执行机制 event loop ---齐枭飞前端构架
首先,请牢记2点:(1) JS是单线程语言(2) JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop技术的出现,都跟现实世界里的应用场景密切相关的。同样的,我们就结合现实场景,来回答这三个问题(1) JS为什么是单线程的?JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。场景描述:那么现在有2个进程,...原创 2018-11-09 12:05:41 · 180 阅读 · 0 评论 -
esLint参数设置--齐枭飞
{ "name": "testEsLint", "version": "1.0.0", "description": "", "main&qu原创 2018-11-01 17:08:53 · 333 阅读 · 0 评论 -
vue iview-admin使用教程之路由配置 -- 齐枭飞-web前端架构
功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示成功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示类型。直接来看代码:./src/route...原创 2018-09-19 14:54:46 · 5744 阅读 · 5 评论 -
齐枭飞 vue--vuex详解
Vuex什么是Vuex？官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex是用来管理组件之间通信的一个插件为什么要用Vuex？我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件...原创 2018-09-19 14:56:50 · 182 阅读 · 0 评论 -
-齐枭飞前端架构师 微信小程序--仿微信 QQ左划事件--
废话不多说，直接上代码：js:var app = getApp()Page({ data: { items: [], startX: 0, //开始坐标 startY: 0 }, onLoad: function () { for (var i = 0; i < 10; i++) { this.data.item...原创 2018-09-19 14:59:45 · 186 阅读 · 0 评论 -
齐枭飞前端架构师 微信小程序数据缓存
关于本地缓存1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB2.localStorage 是永久存储一、异步缓存wx.setStorage(OBJECT)将数...原创 2018-09-19 15:00:49 · 284 阅读 · 0 评论 -
微信小程序 齐枭飞：wx.navigateTo 不跳转问题
微信小程序——面页不跳转问题代码1：wx.navigateTo({url:'../logs/logs'})代码2："tabBar": {"position":"bottom","list": [ {"pagePath":"pages/index/index","text":"首页"}, {"pageP原创 2018-09-19 15:01:51 · 1474 阅读 · 0 评论 -
齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决
老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。1、找到 config->index.js里面，如下修改2、找到 build->utils.js,在里面加入一句publicPath:’…/…/’,[图片上传中…(image-7129b4-152301...原创 2018-09-19 15:03:28 · 423 阅读 · 0 评论 -
齐枭飞 websocket------详解
大家可以加 VUE qq交流群,可以留言哦！一、websocket与httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，...原创 2018-09-19 15:04:33 · 194 阅读 · 0 评论 -
齐枭飞 Vue系列---进阶vue全家桶
有人说只会vue不会vuex还只是个切图仔，所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，...原创 2018-09-19 15:05:36 · 521 阅读 · 0 评论 -
齐枭飞 打包时输出到根目录下配置
原创 2018-09-28 14:48:36 · 92 阅读 · 0 评论 -
Vue系列-齐枭飞---进阶vue全家桶
有人说只会vue不会vuex还只是个切图仔，所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，...原创 2018-09-28 14:49:10 · 158 阅读 · 0 评论 -
今天 大年初六 ， axios 使用时遇到了点小问题，
今天 大年初六 ， AND axios 使用时遇到了点小问题，if (valid) { // debugger console.log(JSON.stringify(this.formValidate)); var params = new URLSearchParams(); para...原创 2018-09-28 14:50:37 · 163 阅读 · 0 评论 -
iview-admin使用教程之路由配置
功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示成功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示类型。直接来看代码:./src/route...原创 2018-09-28 14:51:05 · 13017 阅读 · 0 评论 -
vue+axios --齐枭飞-前端实现登录拦截（路由拦截、http拦截）
一、路由拦截登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。constroutes = [{path:’/’,name:’/’,component: Index},{path:’/repository’,name:‘repository...原创 2018-09-28 14:51:53 · 170 阅读 · 0 评论 -
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下面就创建图表了： 其实很简单—&...原创 2018-09-28 14:52:13 · 145 阅读 · 0 评论 -
Vue通信、传值的多种方式，详解（都是干货）
一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B②在B组件中获取A组件传递过来的参数this.$route.query.orderId二、通过设置 ...原创 2018-10-26 10:13:04 · 193 阅读 · 0 评论 -
Vue2.0系列——vue封装swiper轮播组件--
Prop 使用 Prop 传递数据 camelCase vs. kebab-case 动态 Prop 字面量语法 vs 动态语法 单向数据流 Prop 验证原创 2018-10-31 17:36:24 · 4545 阅读 · 1 评论 -
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子句参数与外部作...原创 2018-11-01 17:04:33 · 354 阅读 · 0 评论 -
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(原创 2018-09-19 14:52:02 · 23731 阅读 · 7 评论