VUE 配置vue-devtools调试工具

1. 通过 Git 克隆项目到本地git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录，然后运行以下两个指令。    先运行 npm install 安装项目依赖    再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间，请耐心等待，build 成功后如下图： 3. 修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将 persistent 参数改为 true，如下图： 4. 将扩展程序添加到chrome浏览器a. 打开浏览器扩展程序（也可以直接在地址栏输入 chrome://extensions/  来打开） b. 打开扩展程序后，开启

Node在Window、Mac和Linux环境下的安装和配置

      对于前端同学而言，开发的首要条件就是安装Node和NPM环境，现如今Node环境的安装和配置已经非常简单了，再次我整理一个手记，希望能再次帮助到大家。一、Window和Mac用户的安装中文Node下载地址：http://nodejs.cn/download/      打开这个链接会看到一个醒目的文字：最新的长期支持版本，通常我们默认下载的就是最新而且长期支持的稳定版本，希望大家每次下载都能下载稳定版本，最新的版本不一定就是最稳定的版本，只有LTS的才是稳定版本，也就是大部分的企业和用户在使用的版本，它的bug非常少，性能非常突出，而有些同学为了尝鲜新功能，就去下载了最新的版本，这个前提是一定要知道，他是存在问题的，是研发人员正在研发的一些新功能，但是还不能保证可以正常运行或许存在一些Bug，所以这样的版本不建议大家安装，更重要的是不要在服务器上面配置，因为一旦出了问题，大家就很难解决，也没有解决方案。接下来，我们讲安装方式：Windo

微信公众号申请开通微信支付

公众号申请好并且认证完成之后，开始申请微信支付，注意申请支付要有营业执照和对公账户，个人公众号暂时还不支持认证，所以不能申请支付。如下图：点击左侧的微信支付。点击微信支付后，右侧内容区域选择申请开通微信支付，如下图：填写相关信息，联系人信息，然后用绑定联系人本人身份证银行卡的微信扫描给出的二维码进行验证。填写商户简称，经营类目，以及经营范围并且上传相关资料进行验证，提交完成之后点击下一步。然后填写商户信息以及结算账户，一般商户信息是直接提取的之前填写的内容，您在进入页面的时候可以核对一下，然后点击下一步填写结算账户，填写完成之后开始提交。提交完成之后，3-5个工作日内，会进行审核，审核通过之后会往您填写的邮箱里发一封邮件是关于微信支付商户的帐号信息，同时您对公账户上也会收到几毛钱的汇款，需要您查看下具体的金额然后登录微信支付商户平台进行验证。验证完成之后，微信支付整个流程算是走完了，如果需要开通支付通道，这就需要获取相应的接口，然后进行对接就可以了。

个人创建微信公众号步骤

1、打开微信公众平台官网：https://mp.weixin.qq.com/ 右上角点击“立即注册”；选择帐号类型；2、填写邮箱，登录您的邮箱，查看激活邮件，填写邮箱验证码激活；3、 了解订阅号、服务号和企业微信的区别后，选择想要的帐号类型；下图为订阅号、服务号和企业微信的在手机端展示效果；4、信息登记，选择个人类型之后，填写身份证信息；5、填写帐号信息，包括公众号名称、功能介绍，选择运营地区；恭喜注册成功！可以开始使用公众号了~

webpack升级后配置文件合并，如何配置babel-plugin-import?

近期很多同学通过create-react-app创建项目后，发现webpack的配置文件合并成一个了，但是这个时候应该如何去配置antd或者其它UI库的按需加载呢？如何动态添加less解析呢？实际上万变不离其宗，配置的方式还是官网插件的用法，但是这个地方有个提示大家要注意：antd官网提供的react-app-rewired 插件已经无法使用，因为react-app-rewired默认修改config下面的webpack.config.dev.js但是现在已经没有这个文件了，所以这个插件已经无法使用，后期antd官网的脚手架应该会更新版本来兼容。接下来，我们看看如何解决这个问题：首先实现组件的按需加载。找到 oneOf下面的test:/\.(js|mjs|jsx|ts|tsx)$/, 然后再plugins里面添加代码：这个代码需要依赖于插件babel-plugin-import，因此需要先通过yarn add babel-plugin-import --save才可以启动。2. 实现解析less文

权限菜单设计

1.权限的作用意义顾名思义，“权”代表“权力”，划分了系统的职权，不同的用户拥有不同的权力划分；“限”代表“限制”，在权力划分的基础上对职能范围进行了限制，本文所述的权限相对简单，赋予不同角色看到不同菜单的权限。权限控制能较好地解决系统安全问题，避免公司机密资料外泄，同时，不同部门使用系统时互不干扰，因此被企业广泛应用。2.梳理用户、角色的概念（1）用户用户是指系统的登录用户，可以理解为一系列的人员，例如登录用户为张三、李四、王五和肖六这几个人。（2）角色角色指用户在系统中担任的角色，是系统赋予用户的头衔，例如A公司后台系统角色可以定义为：总裁、经理、员工。3.选择合适的权限模型（1）传统的权限模型在早期，传统的权限模型就是为用户分配菜单权限，例如张三看到A、B、C菜单，李四看到B、C菜单，王五和肖六看到A、B、C菜单，这种传统的权限模型简单粗暴，直接为用户分配菜单即可，但是随着公司员工激增，在动则数百人的公司里，没一个员工都要分配一次，显然效率太低。并且，在进行交互设计时，定义数百名用户拥有的菜单权限，那

React全家桶+AntD框架开发共享单车后台管理系统

    大家好，我是河畔一角，目前在一家共享单车公司担任前端架构师职位，作为一名前端工程师，我非常渴望能够讲自己多年来汲取的精华知识传授给大家，非常渴望能够去解决大家在开发过程中的痛点。经过一段时间的调研，我总结出了其中一个非常重要的结论，大家在开发后台管理系统的时候，往往举足不定，因为工作经验不足，技术有壁垒。本次借此机会，我耗时几个月给大家做了一次针对后台管理系统的课程：React全家桶+AntD框架开发共享单车后台管理系统    这门课程从几个维度进行刨析：    第一：使用目前最流行的前端MV*框架开发，React全家桶一应俱全，技术不落伍。    第二：好马配好鞍，有了技术框架，对于后台系统来说，必然需要有一把利剑，那就是AntD. AntD是蚂蚁金服公司出品的一款React UI框架，极大便利了我们的前端React开发者。可能有的同学会说