如何运行vue项目（从gethub上download的开源项目）
前提：入坑vue.js，从GitHub上download一个vue.js的开源项目，发现不知如何在浏览器运行，通过查阅网上教程，发现网上的很多是教你怎么新建项目，并没有一个是教如何打开已有的项目。自已折腾了一下，成功搭建好项目环境，最终调试成功。现在将过程分享给大家。首先，这个教程主要针对vue小白，并且不知道安装node.js环境的。言归正传，下面开始教程：首先下载安装node.js从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了。根据自己电脑选择32位/64位。安装好node，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口安装cnpm由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm在命令行中输入npminstall-gcnpm--registry=http://registry.npm.taobao.org安装webpacknpmins
基于 Vue 的 WebDesktop 系统
X-WebDesktop-Vue基于Vue的WebDesktop系统基础版本：X-Desktop-VueAPI服务：X-WebDesktop-Api-KoaPreviewStartgitclonenpminpmrundev用户登录，需要X-WebDesktop-Api-Koa支持账号：admin密码：123456Buildnpmrunbuild
小白成长日记：写个省市区三级联动
依旧使用vue，不需要关注dom太方便了。数据来源（台湾缺省）：https://github.com/airyland/c...完成图初始化选完省之后html部分<divid="china"><selectname="province"class=""@change="loadcity($event)"><optionvalue="请选择">请选择</option><option:value="index"v-for="(item,index)inprovince">{{item}}</option></select><selectname="city"class=""@change="loadarea($event)"><optionvalue=""v-if="!this.city">暂无数据</option
vue添加插件
vue插件概述插件通常会为Vue添加全局功能。使用方法总体流程：声明插件-写插件-注册插件-使用插件声明插件先写一个js文件，基本内容如下:exportdefault{install(Vue,options){//添加的内容写在这个函数里面//具体内容往下看}}Vue插件应有一个公开方法:install，这个方法的第一参数是Vue构造器，第二个参数是可选的选项对象。写插件按照官方文档，写插件有四种方法，//1.添加全局方法或属性Vue.myGlobalMethod=function(){//逻辑...}//2.添加全局资源Vue.directive('my-directive',{bind(el,binding,vnode,oldVnode){//逻辑...}...})//3.注入组件Vue.mixin({create
Vue源码学习笔记
最近偷懒好久没有写博客了，一直想继续Vue学习系列，想深入Vue源码来写。结果发现自己层次不够，对js的理解差好多。所以一直想写一直搁置着。最近重新振作决心看完Vue源码，并且以我们这类前端小白的角度来一步步弄懂Vue源码。PS：以下文章为笔记类，记录了本人在看源码过程中的一些问题和感悟。Vue源码的本质是什么Vue.js本质上就是一个包含各种逻辑的一个function。而我们通常初始化Vue的过程就是实例化的过程。varvm=newVue({})话不多说，老规矩用代码说话！让我们来对Vue进行打印：varvm=newVue({...})console.log(Vue)console.log(vm)打印结果如图：这里可以看到Vue$3这个方法，就是这个方法对Vue对象的构造函数了。其实这很简单，我们自己都可以造出一个Vue$4functionVue$4(options){this.options=options}Vue$4.prototype
Vue按需加载
概念（懒加载）当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，嗯，这样就更加高效了。场景xxx项目作为一个单页面应用，采用组件化的开发模式，每次启动首页都会加载全部组件，但此时只是访问了首页而已，就造成了大量组件污染加载的情况。目的只在访问当前页面时加载对应组件，避免页面组件全部加载。（按需加载）实现app.vue<template><divid="app"><router-view/></div></template>router.jsimportVuefrom'vue'importVueRouterfrom'vue-router'import'babel-polyfill'import{Promise}from'es6-promise-polyfill'importAppfrom'.
一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](四)
前言上一篇《一步一步创建ASP.NETMVC5程序[Repository+Autofac+Automapper+SqlSugar](三)》，我们完成了：*引用SqlSugar*使用SqlSugar对Repository类的改造并成功使用PostRepository来查询到了数据，今天我们来创建一个新的服务层以及安装配置依赖注入框架组件Autofac等。本篇知识要点*创建服务层:TsBlog.Services*创建服务接口*实现服务接口*创建仓储接口*安装Autofac依赖注入组件*注册配置Autofac依赖注入教程内容创建服务层选中解决方案中的解决方案文件夹[1.Libraries]，右键单击=>>添加=>>新项目，在弹出的对话框中添加一个.NETFramework4.6.2的C#类库项目，命名为：TsBlog.Services。项目创建成功后，删除自动生成的Class1.cs文件。由于服务层需要依赖于仓储层，所以首先切换到仓储层[TsBlog.Repositorie
RabbitMQ 3.7.0 发布，正式支持 Erlang/OTP 20
RabbitMQ3.7.0已发布，带来了一系列改进和修复，并支持OTP20。BreakingChangesMinimumrequiredErlang/OTPversionisnow19.3.RecentErlangversionscanbeobtainedfromErlangSolutions,RabbitMQzerodependencyErlangRPM,aswellasmainandbackportsrepositoriesofrecentUbuntuandDebianreleases.HTTPAPIhasminorbreakingchangesinseveralendpoints(seebelow)..NETclientisnow.NETCore-compatible.Startingwith3.7.0,.NETclientreleasesaredecoupledfromRabbitM
离职篇 | 记一次史上最狗血的跳槽
序前几天朋友刚住上新房，于是周末找了点时间去给温居，好歹也算是在北京扎了根了，房子也买了户口也转出集体了。几个老朋友在一起在新家喝着小酒谈天说地好不快活，期间有个朋友说他换工作了，我们都惊讶的说，你之前的工作不是挺好的，烧个啥包，怎么样？double了？这时候朋友不慌不忙的说，double不double不重要，关键是这次换工作太狗血了，太爽了，太爽了，估计你们这辈子也不会遇到。他这一句“太爽了”把我们胃口吊的足足的。事情原来是这样。1我的朋友刘国平是个典型的Java开发人员，几乎可以说是个Java大牛，Java内存模型、并发多线程、底层垃圾回收机制、各种数据结构及算法都精通的很，另外像开源组件的源码tomcat、mycat、spring、kafka、zookeeper、nginx之流都读烂了，还给公司拿logback改造了一套日志组件，技术很棒人品也不错，在一家小公司慕芯科技（为了避嫌使用了化名）做项目开发，货真价实的架构师+技术骨干，2014年还曾经拿到过阿里的offer，当时说职级可以给评定到P7，懂阿里系职级
Istio v0.3.0 发布，大型微服务系统管理平台
Istiov0.3.0已发布，部分更新内容：Mixerprotocolsupportssubkeylevelcachingforstringmapattributes.ThisenablesefficientcachingbasedonrequestheadersLimitingRBACrulestowhatisonlyrequiredsupportsubmessagesinMixertemplateAddJaegersupporttoMixerFixkube-injectingCronJobscausingapanicsupportssubmessagesinsidetheMixerTemplatesystem详见githubwiki：https://github.com/istio/istio/wiki/v0.3.0Istio是一个由谷歌、IBM与Lyft共同开发的开源项目，旨在提供一种统一化的微
CentOS 7中安装Mysql 5.7的注意事项
这几天由于做项目需要，要使用MySQL数据库，使用的是MySQLCommunityServer5.7.20,在Windows环境下安装没有遇到问题，但是在最新的CentOS7.4环境下安装时遇到了一些问题，现在把这些问题整理成注意事项公布出来，以供后来者安装时借鉴。1)安装前需要卸载CentOS7自带的mariadb数据库。CentOS从7开始，从自带的yum源中取消了MySQL，改为默认安装MySQL分支mariadb，如果想安装MySQL官方版本，可以卸载mariadb数据库。方法是先执行rpm-qa|grepmariadb，对于所有出现的rpm包都执行rpm卸载。2)在/etc/yum.repos.d目录下创建MySQLyum安装所需的Repo文件mysql-community.repo[mysql57-community]name=MySQL5.7CommunityServerbaseurl=http://repo.mysql.com/yum/mysql-5.7-community/el/7/$bas
【JavaScript从入门到精通】第二十一课
第二十一课JS事件中级上节课我们讲了关于事件的基本知识，主要包括事件对象和它的一些应用。从这节课开始我们学习2个更加高级的知识。默认行为当我们打开一个空白页面的时候，右键点击页面会弹出来一个菜单——当然，实际上我们从来没有通过JS写过这么一个菜单，而是浏览器自带的功能。这种浏览器本身自己带的功能和事件我们将它称之为默认行为。在这之前，要为大家介绍一个新的事件——oncontextmenu，代表的就是当用户点击右键呼出菜单的事件。现在我们用oncontextmenu来做一些事情。值得一提的是，oncontextmenu是可以有返回值的，如果我们return一个false的话会发生什么呢？
大家可以自己尝试一下，如
fetch body里数据为ReadableStream 解决办法
转载自https://www.cnblogs.com/winyh/p/7053054.html前端工程中发送HTTP请求从来都不是一件容易的事，前有骇人的ActiveXObject，后有API设计十分别扭的XMLHttpRequest，甚至这些原生API的用法至今仍是很多大公司前端校招的考点之一。也正是如此，fetch的出现在前端圈子里一石激起了千层浪，大家欢呼雀跃弹冠相庆恨不得马上把项目中的$.ajax全部干掉。然而，在新鲜感过后，fetch真的有你想象的那么美好吗？如果你还不了解fetch，可以参考我的同事@camsong在2015年写的文章《传统Ajax已死，Fetch永生》在开始「批斗」fetch之前，大家需要明确fetch的定位：fetch是一个low-level的API，它注定不会像你习惯的$.ajax或是axios等库帮你封装各种各样的功能或实现。也正是因为这个定位，在学习或使用fetchAPI时，你会遇到不少的挫折。（对于没有耐心看完
基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案
中文Englishvue-access-control:gem:Vue权限管理解决方案介绍Vue-Access-Control是一套基于Vue/Vue-Router/axios实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。文档Vue2.0用户权限控制解决方案基于Vue实现后台系统权限控制用addRoutes实现动态路由下载项目主页：http://refined-x.com/Vue-Access-Control/git：gitclonehttps://github.com/tower1229/Vue-Access-Control.gitnpm：npmivue-access-control演示测
JavaScript作用域和闭包
在本文中，笔者将用通俗的语言和简单的代码，介绍以下几种概念：变量提升this的使用场景作用域闭包的应用最后还有一个例题变量提升首先我们要知道，js的执行顺序是由上到下的，但这个顺序，并不完全取决于你，因为js中存在变量的声明提升。这里比较简单，直接上代码console.log(a)//undefinedvara=100fn('zhangsan')functionfn(name){age=20console.log(name,age)//zhangsan20varage}结果打印a的时候，a并没有声明，为什么不报错，而是打印undefined。执行fn的时候fn并没有声明，为什么fn的语句会执行？这就是变量的声明提升，代码虽然写成这样，但其实执行顺序是这样的。varafunctionfn(name){age=20console.log(name,age)}console.log(a)a=100fn('zhangsan')js会把所有的声明提到前面，然后再顺序执行赋值等
android webview播放视频自动全屏
需求点击webview中视频的开始播放时自动展开到全屏。视频全屏播放参考项目https://github.com/cprcrack/VideoEnabledWebView首先创建VideoEnabledWebChromeClient继承WebChromeClient，重写onShowCustomView和onHideCustomView方法，作用：1、监听当前网页的全屏状态onShowCustomView为全屏，onHideCustomView为取消全屏。2、显示和隐藏需要的内容。在全屏时将webview隐藏。3、注入js，监听视频完成播放时事件，用于关闭视频全屏状态。publicclassVideoEnabledWebChromeClientextendsWebChromeClientimplementsMediaPlayer.OnPreparedListener,MediaPlayer.OnCompletionListener,MediaPlayer.OnErrorListener{privatestaticfin
关于NodeJs项目发版的一些想法
起因今天上午把双十二活动相关的页面给上线了，这次的发版，涉及的内容点比较多，上线的时候，没仔细想，打了一个tag就直接在线上gitpull，然后活动页挂了…糟糕的一连串操作我是用的pm2list查看的项目的状态，发现状态变成errored才知道出了问题。这时候一回想才意识到，有些模块没安装。在本地执行tig--package.json，快速的查找两个版本之间都安装过哪些模块，然后对应的在线上npminstall。但是一直被webpakc的uglifyjs-webpack-plugin干扰的没法正常安装。一狠心，rm-rfwebpack直接把webpack给移除了。再次执行安装，还是同样的错误，再找到node_modules/.bin/webpack，移除（后面才知道用npmrm/uninstall才是更正确的做法）。webpack的错误总算没了，然后安装又报403的错误，自有的npm服务verdaccio出错了。这时候终于意识
（译）学习JavaScript闭包
1functionnumberGenerator(){2//闭包里的局部“自由”变量3varnum=1;4functioncheckNumber(){5console.log(num);6}7num++;8returncheckNumber;9}1011varnumber=numberGenerator();12number();//2在上面的例子中，numberGenerator函数创建了一个局部的“自由”变量num（数字变量）和checkNumber（把num打印在命令窗口的函数）。checkNumber函数中没有定义局部变量——然而，它可以访问父函数（numberGenerator）里定义的变量，这就是因为闭包。因此，它可以使用定义在numberGenerator函数里的num变量，并成功地把它输出在命令窗口，即便是在numberGenerator函数返回之后依然如此。例2：在这个例子中，我们将演示一个闭包里包含了所有定义在其父函数内部定义
Angular 5.0.4 和 5.1.0 rc.0 发布，Web 前端框架
Angular5.0.4和5.1.0rc.0已发布，更新如下：animations:ensuremulti-levelenteranimationsworkanimations:ensuremulti-levelleaveanimationsworkcommon:acceptfalsyvaluesasHTTPbodiescommon:don'tstripXSSIprefixforiferrorisn'tJSONcommon:removeuselessguardinHttpClientcommon:treatanemptybodyasnullwhenparsingJSONinHttpClientcompiler-cli:fixmemoryleakinprogramcreationcompiler-cli:normalizesourcepathsfori18nextractedfilesAngu
Vue-Access-Control：前端用户权限控制解决方案
原文地址：http://refined-x.com/2017/11/28/Vue2.0用户权限控制解决方案/Vue-Access-Control是一套基于Vue/Vue-Router/axios实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。整体思路会话开始之初，先初始化一个只有登录路由的Vue实例，在根组件created钩子里将路由定向到登录页，用户登录成功后前端拿到用户token，设置axios实例统一为请求headers添加{"Authorization":token}实现用户鉴权，然后获取当前用户的权限数据，主要包括路由权限和资源权限，之后动态添加路由，生成菜单，实现权限指令和全局权限验证方法，并为axios实例添加请求拦截器，至此完成权限控制初始化。动态加载路由后，路由组件将随之加载并渲染，而后展现前端界面。为解决浏览器刷新路由重置的问题，拿到token后要将其保存到sessionStorage，根组件的created钩子负责检查本地是否已有token，如果