![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
Jacano
这个作者很懒,什么都没留下…
展开
-
【eslint】配置eslint及vscode中eslint的配置
1.eslint配置eslint是完全支持自定义配置的代码检查工具,简单两个字:好用!npm i -D eslint eslint-plugin-vue babel-eslint在项目中安装相关依赖(以vue项目为准)根目录下创建.eslintrc.js文件作为eslint配置文件module.exports = { root: true, env: { // 启用 ES...原创 2019-10-25 08:47:56 · 1449 阅读 · 0 评论 -
【Webpack】从零构建Vue项目配置
从零开始构建基于webpack4.0的Vue项目脚手架原创 2019-10-22 14:55:21 · 426 阅读 · 0 评论 -
【Vue】前端规范及工程化
1.前端规范1.1工作流规范1.1.1 版本号规范主版本号:当你做了不兼容的 API 修改,次版本号:当你做了向下兼容的功能性新增,修订号:当你做了向下兼容的问题修正。1.1.2 版本控制规范参考git flow协作流程,以功能为主要自下而上的开发流程规范。master(production分支): 只合并其他分支,不能在此分支上开发修改代码,此分支是发布到最近的生产环境中的...原创 2019-10-12 08:52:01 · 998 阅读 · 0 评论 -
【Vue】Vue.use(plugin)
开发中我们常常用Vue.use(Router)、Vue.use(iView)等等,use方法做了什么呢?我们上源码import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { co...原创 2019-03-11 17:25:25 · 2399 阅读 · 0 评论 -
【Vue】keep-alive
keep-alive是Vue提供给我们使用的高阶组件。我们可以使用keep-alive缓存需要缓存的组件,进而节省性能。当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。被keep-alive包裹的内容会被缓存,当然我们并不是所有的页面都要缓存,Vue提供了include、exclude两个属性给我们有条件的缓存。<ke...原创 2019-03-11 16:15:43 · 522 阅读 · 0 评论 -
【Vue】Vue组件之间的通信
1.父组件向子组件传值父组件向子组件传值,我们要在子组件中设置好接收的值是怎么样的。假如有一个my-component的组件,我们可以在子组件中添加props属性,可以写成数组的形式,一般我们写成对象的形式,这样可以做类型检查和其他配置,例如:props: { multiple: { type: Boolean, default: false }, ...原创 2019-03-11 11:24:10 · 136 阅读 · 0 评论 -
【Vue】Vue组件简单使用
现在的有些web应用都非常庞大,web开发也越来越组件化、模块化,我们需要在使用vue的时候去写一些组件,避免重复造轮子,提高组件的复用和开发效率。1.什么是组件?一个组件就好像一块积木,多个组件的层层堆叠、摆放最终形成一个完整的系统。组件的好处在于降低了各个模块之间的耦合性,以至于我们在维护项目时不会太心累。高度耦合的项目必然会带来维护时间上的浪费。在目前的前端开发中,组件化发开是必须要掌握...原创 2019-03-11 10:35:02 · 272 阅读 · 0 评论 -
【webpack】在webpack4中使用babel
babel是JS转译器,JS语法标准更新太快,而浏览器还未更新,babel就帮助我们将新标准的JS语法转译成浏览器能识别的JS标准。我们在webpack中使用babel来转译JSnpm install babel-core babel-loaderbabel-core是babel的核心包修改show文件里的代码// 操作 DOM 元素,把 content 显示到网页上const sho...原创 2019-03-15 09:21:33 · 557 阅读 · 0 评论 -
【Vue】浅析Nuxt框架
公司的官网用了nuxt来进行服务端渲染(ssr),于是来篇文章来简单介绍下nuxt。nuxt是基于Vue的服务端渲染框架,正如官网说的,框架最关心的是UI渲染。1.ssr原理以前浏览器获取数据都是后端渲染,就是浏览器请求后,后端通过处理渲染最终的.html文件给浏览器。随着js和ajax的兴起,前端渲染增多。Node的出现,可以将渲染工作放在node服务端,服务端直接将html字符串返回给浏...原创 2019-03-10 19:06:45 · 4884 阅读 · 1 评论 -
【JS】数组和对象的深拷贝
一.数组的深拷贝let arr = [ undefined, function(){ console.log(123); }, true, null, { name:&quot;123&quot;, age:23 }];// arr作为拷贝对象1)Array.from()Array.from()能将一个类数组转化成一个真正的数组,因此它返回的是一个新...原创 2019-03-04 21:27:22 · 99 阅读 · 0 评论 -
【Vue】is特性
1.限制元素Vue模板就是dom模板,而dom对一些html元素是有限制的,比如<table> <my-component></my-component></table>这样是不行的通过is我们可以拓展html元素,比如<ul> <li is="my-component"></li&原创 2019-03-11 22:09:10 · 455 阅读 · 0 评论 -
【Vue】Vue生命周期
先来一张官网生命周期图我们在用代码来测试vue中的声明周期 mounted(){ console.log('-----mounted-----'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, beforeMount(){ con...原创 2019-03-12 09:17:52 · 897 阅读 · 0 评论 -
【CSS】垂直水平居中
1.水平居中text-align:center对文字、图片等行内元素居中的方式&lt;body&gt; &lt;div style="text-align: center;"&gt; &lt;img src="./hashiqi1.jpg"&gt; &lt;p&gt;来点文字&原创 2019-03-08 13:47:50 · 104 阅读 · 0 评论 -
【Vue】简述Vue中双向绑定原理
双向绑定是数据变化更新到视图,视图上数据的变化更新到数据层。Vue的双向绑定实现主要依赖于三个方面:数据监听(observer)指令解析(compile)观察订阅(watcher)数据监听通过Object.defineProperty()方法劫持数据data中的变化,每当有数据变化,它就会通知watcher指令解析将v-on、v-bind指令进行解析整理,绑定相应的数据。观察者是...原创 2019-03-12 22:48:14 · 845 阅读 · 0 评论 -
【react】组件间的通信
1.父组件传值给子组件import React, { Component } from 'react'export default class Father extends Component { render() { return ( <Son name="World"></Son> ) }}class Son extend...原创 2019-03-21 11:50:39 · 111 阅读 · 0 评论 -
【react】dva
dva是react的数据流解决方案,基于 redux 和 redux-saga。ANT DESIGN PRO框架中集成了dva,在项目中我们看看dva常用的功能。1.Modelnamespacemodel层的命名空间,它是根状态上的属性。state当前model的状态,优先级低于根状态的同名属性const app = dva({ initialState: { count: 1 }...原创 2019-03-20 21:07:24 · 129 阅读 · 0 评论 -
【react】redux
Redex是React的数据状态管理器,功能类似Vue的Vuex,都是对数据状态进行保存。1.安装通过npm install redux便可安装redux状态管理器。2.actionaction是一个纯函数,redux只能通过dispatch(触发)一个action(动作)来更改状态// 一个action可以长这样的export const increase = () => {...原创 2019-03-20 13:48:26 · 121 阅读 · 0 评论 -
【Vue】vue-router中的history和hash
vue-router提供了两个url模式,一种是hash,另一种是HTML5新增的history,在vue-router中可以通过mode: "history"或者mode: "hash"设置,默认为hash模式。1.history请求的url中不会有#利用了HTML5 History Interface新增的pushState() 和 replaceState() 方法前端url需要与...原创 2019-03-13 17:16:43 · 185 阅读 · 0 评论 -
Vue 仿大众点评项目
项目地址vue-dianping 仿大众点评Vue项目技术栈:VueVuexVue-RouterVue-CliExpressSequelizePostgreSql实现功能:登录注册发布点评点赞评论上传文件下载并安装模块git clone https://github.com/Jcanno/Vue-DianPing.gitcd Vue-DianPingnp...原创 2019-04-15 21:45:33 · 1451 阅读 · 1 评论 -
【webpack】tree shaking使用
tree shaking主要是将import/export中未引用到的代码给找出来。通过demo看tree shaking 给我们做了什么.├── dist├── node_modules├── package-lock.json├── package.json├── src└── webpack.config.jsdemo结构// webpack.config.jscon...原创 2019-04-22 13:58:52 · 461 阅读 · 0 评论 -
【CSS】选择器优先级
关于选择器的优先级,我们要说到特指度,它可以用数值表示选择器的优先程度,数值越大,越优先。通常我们用这样的规则:遇到内联样式表数值加1000遇到一个id选择器数值加100遇到一个类选择器数值加10遇到一个元素选择器数值加1CSS选择器数值span1span.name11span#number101span ul.list12div...原创 2019-03-07 13:26:00 · 91 阅读 · 0 评论 -
【JS】this机制
this指向什么?this是在函数被执行时,指向调用它的对象。用代码来理解这句话:var a = 2function fn() { console.log(this.a);}fn() // 2这种情况下,函数fn是直接加在全局对象上,this指向全局对象(这里是window),变量a也是window的属性,因此打印出来是2var a = 2var o = { ...原创 2019-03-04 17:58:26 · 122 阅读 · 0 评论 -
【CSS】px、em、rem的区别
1.pxpx是绝对长度单位,相对于屏幕分辨率而言,2.emem是相对长度单位,在设置文字高度或者与文字距离有关的时候,我们应该用em,毕竟浏览器的默认样式也推荐我们这么写h1 {font-size: 2em; margin: .67em 0 }h2 {font-size: 1.5em; margin: .75em 0 }h3 {font-size: 1.17em; margin: .8...原创 2019-03-07 11:14:23 · 236 阅读 · 0 评论 -
【ES6】async、await基本使用
async是异步编程的最新标准,我们来看看async如何使用1.async的简单使用async function fn () { return 'abc'}console.log(fn()); // Promise { 'abc' }fn().then(res =&gt; { console.log(res); // "abc"})async作为关键字放在函...原创 2019-03-02 18:14:14 · 457 阅读 · 0 评论 -
【ES6】Generator基本使用
1.Generator介绍先来一段Generator的基础代码function* g(){ yield 100; yield 200; return 300;}let gg = g(); console.log(gg); // Object [Generator] {}console.log(gg.next()); // { value: 100, done: ...原创 2019-03-02 17:34:37 · 643 阅读 · 0 评论 -
【issue】数组去重的几种方法
1.Set配合扩展运算符去重(个人认为最简洁的方式)let arr = [1,1,2,2,3,3,4,4];let arr1 = [...new Set(arr)]console.log(arr1); // [ 1, 2, 3, 4 ]2.indexOf()去重法let arr = [1,1,2,2,3,3,4,4];let arr1 = [];for(let i = 0; i...原创 2019-03-01 22:25:03 · 110 阅读 · 0 评论 -
【Fetch】fetch的使用
1.使用fetch进行请求fetch请求是基于promise的HTTP库,整个配置和请求很简单,来看MDN上提供的代码:fetch('http://example.com/movies.json') .then(function(response) { console.log(response); return response.json(); }) .then(fu...原创 2019-03-05 12:32:08 · 707 阅读 · 0 评论 -
【JS】作用域
1.ES6之前在ES6之前,Javascript只有全局作用域和函数作用域,定义变量也是用var关键字。var a = 5;function fn() { console.log(a); // 5}fn() // fn函数能访问到全局作用域下的a变量因为没有块级作用域,所以在块级作用域中的变量相当于全局作用域中的变量{ var a = 5}console.lo...原创 2019-03-02 23:14:48 · 92 阅读 · 0 评论 -
【Axios】axios的使用
axios是基于promise封装的网络请求库,在多处框架中被使用。axios让整个网络变得更加简单明了,不像ajax那么复杂。在文档中已经有了对axios的详细的介绍,本篇文章对文档中的重点进行整理,并结合实际项目来对axios进行分析。1.axios请求axios请求非常简单axios.request(config)axios.get(url[, config])axios.dele...原创 2019-03-05 10:00:56 · 2340 阅读 · 0 评论 -
【ES6】Promise的使用
1.Promise概念promise是异步操作中的重要处理方式,它是一个构造函数,它的参数接收一个带有resolve和reject为参数的函数。promise有三种状态,分别是pending(等待)、resolve(成功)、reject(失败)。2.Promise使用function p() { return new Promise( (resolve, reject) =&gt; {...原创 2019-03-01 16:28:52 · 103 阅读 · 0 评论 -
【ES5】Array正确打开方式
Array是前端工程师进行数据交互的重要类型,了解它的各个方法有利于我们写出高效简洁的代码。1.Array.includes和Array.indexOflet arr = [1,2,3,4,5];console.log(arr.includes(2)); //trueconsole.log(arr.includes(6)); //falseconsole.log(arr.inde...原创 2019-03-01 14:56:59 · 527 阅读 · 0 评论 -
【TypeScript】初探typescript
1.前言TypeScript是JavaScript的超集。既然是超集,TypeScript保留了JavaScript所有的语言特性,强类型和class是TypeScript的两大特点。如果对Java有所了解的话,Java的class语法和TypeScript有点相似。据说Vue3.0将用TypeScript重写,相信TypeScript会成为越来越重要,越来越多的前端工程师需要学习TypeScr...原创 2019-03-06 11:15:21 · 199 阅读 · 0 评论 -
【JS】JS中的继承
1.原型链继承function SuperType() { this.property = true; }SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { ths.subproperty = false;}SubType.pr...原创 2019-03-06 14:49:03 · 88 阅读 · 0 评论 -
【JS】闭包
了解闭包之前,我们要简单明白下JS中的作用域,JS中的作用域分为全局作用域和局部作用域。在全局作用域中访问不了局部作用域中的变量在局部作用域可以访问全局作用域中的变量那如果我们怎么在全局作用域中访问局部作用域中的变量呢?闭包可以帮我们解决这个问题。简单的说,就是在局部作用域中(函数)返回一个函数,这个函数就是闭包。function fn() { let a = 10; ret...原创 2019-03-03 22:41:53 · 78 阅读 · 0 评论 -
【HTTP】Cookie、 LocalStorage 与 SessionStorage基本概念
说到浏览器本地缓存,我们就必须提到cookie,在HTML5标准之前,只能使用cookie进行浏览器缓存数据。HTML5之后提出了webstorage,webstorage又分为localstorage(本地储存)和sessionstorage(会话储存)。我们来看下他们的差别。1.Cookie大小限制在4kb每次网络请求cookie都会被发送到服务器如果不设置过期时间,浏览器关闭coo...原创 2019-03-07 09:28:23 · 244 阅读 · 0 评论 -
【webpack】webpack4入门--插件使用
插件能拓展webpack的功能,让webpack更加灵活,我们使用插件来应用到webpack中。首先安装mini-css-extract-plugin插件,这个插件是在webpack4中用于分离css文件的,webpack4之前用的是extract-text-webpack-plugin插件。npm install mini-css-extract-plugin安装完插件后,配置webpac...原创 2019-03-14 11:29:47 · 321 阅读 · 0 评论 -
【LESS】less的基本用法
在vue和react的开发中,常常使用到了less作为css的处理方式。Less作为css的预处理语言,它保留了css的所有功能,在此基础上增加了许多变量、循环 、继承等特性,拓展了css的用法。1.使用less本地使用less按照官网可以下载less.js文件,也可以直接使用cdn服务,在这里我直接使用了cdn,先上代码。// index.html&lt;!DOCTYPE html...原创 2019-03-04 15:10:59 · 581 阅读 · 0 评论 -
【JS】原型
万物皆对象,函数也同样是对象,是特殊的函数对象function fn() {}let a = new fn();let b = new Function()console.log(typeof a); // object console.log(typeof b); // function打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一...原创 2019-03-04 10:36:14 · 126 阅读 · 0 评论 -
【CSS】flex布局
flex布局是css3的新特性,非常简单高效好用!个人对flex的几个定义的理解:flex-directionrow(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。简单的将界面分为横轴和数轴,默认情况下横轴为主轴,这个属性是对容器内的轴线...原创 2019-03-09 14:29:04 · 154 阅读 · 0 评论 -
【webpack】webpack4入门--loader使用
webpack的强大,在于有丰富的loader和插件。loader能够将浏览器环境原生不认识的文件转化为自己能够认识的文件。我们用css文件继续做个测试。新建一个main.css文件#app{ text-align: center}现在我们的项目目录如下.├── config├── index.html├── main.css├── main.js├── node_mod...原创 2019-03-14 10:46:19 · 192 阅读 · 0 评论