BoReFrontEnd-CSDN博客

原创 10分钟看懂vue生命周期

什么是生命周期?简而言之：从生到死的过程,从Vue实例创建-运行-销毁的过程Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程创建期间生命周期方法beforeCreate:created:beforeMountmounted运行期间生命周期方法beforeUpdateupdated销毁期间的生命周期方法b...

2019-07-01 12:44:55 179

原创快速学会使用vuex（详解）

vuex是什么？用官方的话来说，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。vuex有5个核心概念——State、Getter、Mutation、Action、M...

2019-06-19 18:35:34 252

原创 vue获取验证码以及倒计时60秒方法

完整的获取验证码方法，上干货。<template> <div class="login-content"> <van-cell-group> <van-field label="手机号" type="tel" v-model="phone" :error="phoneError && !phone" m...

2019-04-30 16:06:05 4482 2

原创 vue 中使用axios + promise封装请求api ——方案（一），小白可以直接拿走复用

中文文档地址 https://www.kancloud.cn/yunye/axios/234845我们在项目搭建好之后，需要请求api获取数据，那么最好的的方法就是用axios，那么axios怎么优雅的使用呢？请继续阅读。1、安装使用 npm:$ npm install axios使用 bower:$ bower install axios如果项目中已经安装了axios，那...

2019-04-28 15:00:41 3286

原创 npm 安装 chromedriver 失败的解决办法

npm 安装 chromedriver 时，偶尔会出错，错误提示类似于：> chromedriver@2.46.0 install C:\Users\lixia\Desktop\gitLab\logistics-web\node_modules\chromedriver> node install.jsCurrent existing ChromeDriver binary i...

2020-04-07 15:20:35 11074 5

原创 React-01课程介绍

React简介React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。ReactJS 官方地址：https://facebook.github.io/react/ （Englist）https://zh-hans.reactjs.org/ (中文)Gi...

2019-12-09 15:49:56 536

原创 vue项目在webstorm中将某文件设置成根目录后，webpack配置方法

第一步：右击common -> Mark Directory as -> Resource Root第二步：查看common 文件是否是紫色，是紫色说明设置成功第三步：build文件下的webpack.base.conf.js 中 resolve 对象修改为如下代码resolve: { extensions: ['.js', '.vue', '.json...

2019-08-28 18:23:47 1971 1

原创 IntelliJ IDEA 注册码（webstorm）

1、打开网址 http://idea.lanyus.com/2、点击获得注册码3、复制粘贴即可

2019-08-05 12:56:15 1097 1

原创 JavaScript 代码质量检查工具 - ESlint

介绍ESLint 是一个 JavaScript 语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。用 vue-cli 脚手架工具创建项目时，可以选择默认安装 eslint 插件。使用步骤用 vue-cli 脚手架创建一个带有 eslint 插件的项目。打开项目中的 package.json 文件，在 scripts 里添加 lint 和 lint-fix 两个键值...

2019-08-01 17:09:58 951

原创【进阶】兄弟组件之间的数据共享

标题 Provide/Inject 机制推荐 × √ 代码示例 // ParentComponent.vue<template> <div> <BrotherComponent :bucket="fruitBucket"></BrotherComponent...

2019-07-26 16:03:43 625

原创代码分支管理策略

参考文章https://nvie.com/posts/a-successful-git-branching-model/代码分支分支说明创建来源分支代码来源目标分支代码输入方式生命周期命名规则master主干分支，通常作为代码基线，所有发布的代码最终都会合并到此分支无release、hotfix无pull request长期masterde...

2019-07-26 15:28:25 2701

原创解决 vue安装stylus预处理之后出现的错误 npm install --save !!vue-style-loader!css-loader 的问题

错误代码提示片段To install it, you can run: npm install --save !!vue-style-loader!css-loader?解决方案npm install stylus stylus-loader style-loader --save-dev出现下面代码表示安装成功了C:\Users\User\Desktop\my.serve&gt...

2019-07-12 21:01:13 4538 1

页面缓存在Vue构建的单页面应用（SPA）中，路由模块一般使用vue-router。vue-router不保存被切换组件的状态，它进行push或者replace时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期。**但有时候，我们有一些需求，比如跳转到详情页面时，需要保持列表页的滚动条的深度，等返回的时候依然在这个位置，或者填写表单时，跳转到下一页在返回时，需要保存刚才表单填写的状态，...

2019-05-24 19:17:49 734

原创在vue项目中使用微信js-sdk ，解析返回url，获取微信code，

直接上干货，如有不懂欢迎留言，如有错误，欢迎指出vue组件<script> import {authPageBaseUri, homePage, wechatAppId} from 'config' import {extractQueryParams} from 'utils' export default { name: 'home', data (...

2019-04-28 17:08:46 2877 2

原创小程序编码规范

命名规则目录命名：采用小写方式，以下划线分隔。例：directory_name文件名：采用小写方式，以下划线分隔。例：file_name事件处理方法：on+Action样式：采用小写方式，以下划线分隔。例：page_content变量命名：采用驼峰命名。例如：variationName方法名：采用驼峰命名。例如：doSomething()目录结构|–images...

2019-04-26 11:41:54 1502

原创 Git创建分支的正确方式

创建分支有两种方式：本地创建分支和远程创建分支。根据不同场景，选择不同的分支创建方式。本地创建分支如果你本地已经安装了 git 命令行工具，你可以直接操作 git 命令来创建分支。前提要拉取远程仓库的代码，本地仓库与远程仓库的代码版本是一致的。本地创建参考如下：git 命令操作说明：git checkout develop（签出 develop 分支）git pull （获取 de...

2019-04-26 10:49:45 6409

原创 Vue自定义组件通过v-model实现父子组件双向同步通信

父组件<template> <div> <child v-model="name"/> {{name.ab}} {{name.ac}} </div></template><script>import child from './child'export default { name: 'paren...

2019-04-18 14:21:20 189

原创 VUE——父组件获取子组件的数据

refs访问组件实例父组件是行为主体，父组件主动获取子组件数据子组件通过方法公开只读数据代码实例// ParentComponent.vue&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;ChildComponent ref=&quot;child&quot;&amp;gt;&amp

2019-03-14 17:36:29 1089

原创前端代码规范

1. 规范化命名a、变量名，方法名用驼峰命名法。例如，loadCommissionList（方法名），dateTypeList（变量名）b、样式类名用kebab-case，即短横线命名法。单词小写，单词之间用中划线连接。例如 withdraw-listc、无论方法名还是变量名，语义表达清楚。例如，不要用 List 泛泛地用作名字列表的变量名，应该准确地用 nameList 或 personN...

2019-03-14 17:19:47 171

原创 vue代码复用方法 - Mixins

Mixins 是 Vue.js 提供的，用于代码复用的非常有用的特性，尤其是针对函数的复用。Mixins 是混合的意思，Vue 实例引用 mixins 文件，mixins 对象中的公共方法会合并到 Vue 实例中被复用。以下是完整的 mixins 使用示例，请按照以下列举的规则使用 mixins。示例// toggleMixin.jsconst toggleMixin = { data...

2019-02-18 14:49:58 2043

原创 Git如何忽略已提交的文件

忽略文件变更有以下两种场景：文件尚未被纳入版本管理文件已经被纳入管理文件已经被纳入管理对于第一种情况，可以通过gitignore文件忽略文件，但是不适用于第二种情况。已经在项目源码仓库中一些配置文件的变更不适合提交，但是又不能排除该文件，比如数据库库连接文件（Connection.config），网站配置文件（Web.config）。在不删除源码仓库中文件的前提下，可以采用以下方式忽...

2019-02-18 14:39:19 743 1

原创 Webstorm 调试 JavaScript 代码

通常前端项目的 JavaScript 代码调试是通过浏览器的开发者工具（右键菜单中点击 “检查”）来完成。这种调试的方式的舒适度很差，显示页面的区域占了很大一块空间，留给调试窗口的空间很小。另外，浏览器开发者工具也不具备 IDE 代码跳转功能等。在不跳出 IDE 的情况下直接调试 JavaScript 代码，可以最大限度增加调试窗口，并在不写 console.log 的情况下，通过直接在代码处显...

2019-02-18 14:35:00 4053 1

原创 webStorm手机直连本地站点调试

打开命令行工具，通过 ipconfig 命令获取本地 ip 地址修改项目配置(config文件夹中index.js文件)，将虚拟服务器的 host 从 localhost 改成本地 ipconst path = require('path')module.exports = { dev: { ... // Various Dev Server settin...

2019-02-18 12:59:08 1104

翻译欢迎使用CSDN-markdown编辑器-存档

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

2019-02-18 12:44:51 144

BoReFrontEnd的博客