Vue-cli-webpack-从零开始的斗鱼直播（一）
前言想必大家都看过斗鱼直播吧？这次在下使用从github上面摸下来的API，为大家重现一下斗鱼网站的搭建，使用vue-cli-webpack来实现。文章内容较多，可以慢慢看声明本文章所用API均从网络获取，本文作者不承担任何法律责任，请阅读本文的小伙伴们用于学习用途，不能用于商业！如有侵权行为，请与作者联系，作者将于2日内删除。开始之前本文假设您学习了以下相关知识nodejswebpackvuevue-clivue-router效果pc端移动端开始好，扯了这么久的淡，该开始构建项目了项目初始化初始化文件夹打开一个新文件夹，在命令行输入：vueinitwebpack如果显示vuenotfound,那么该去下载vue-cli，如果webpack未找到就去下载webpack到这一步以后就ctrl+c,退出终端安装依赖退出命令行之后，输入以下指令：npminstallchromedriver--chromedriver_cdnurl=http://cdn.npm.taobao.org/dis
Vue方法函数备案
文章已经发布在个人博客，不断进行更新欢迎收藏订阅，或者提出批评意见。有一些方法函数可能并不经常使用，但是遇到特定场景需要的时候却想不起来，所以需要把平时碰到的这些方法和函数进行备案，在需要的时候可以查询。字符串反转Todos复选表单动态选项，用v-for渲染指令实例属性对象字面量MVVM数据绑定利用v-if或者v-show进行条件判定Directive动态组件使用script或template标签字符串反转reverseMessage:function(){this.msg=this.msg.split('').reverse().join('')}Todos<divid="app"><inputv-model="newTodo"v-on:keyup.enter="addTodo"><ul><liv-for="(todo,index)intodos"><s
macOS打造Web前端开发环境及高效管理macOS
RenChunhui'sDotfiles本配置比较适合Web前端开发人员，打造iTerm+Zsh+Vim/NeoVim+Tmux]开发，自动补全使用效率好的YouCompleteMe(已解决YouCompleteMe安装却提示需要Python的问题)提示安装常用工具及App，如使用工具不一样的，可自已进行相关配置详细配置:https://github.com/RenChunhui...安装$gitclonehttps://github.com/RenChunhui/dotfiles.git.dotfiles$cd.dotfiles$chmod+x./install.sh$./install.shVim&NeoVim安装插件YouCompleteMe所需的Python已在初使化环境中配置完成适合前端Vue、React.js、Typescript相关开发，$cd~/.vim/plugged/YouCompleteMe$./install.py--js
VUE使用element-ui所遇BUG与需求集结（持续更新）
最近常使用element-ui的组件，遇到问题比较多，想做个清单。也包含一些自己总结的使用vue小方法。1.回车自动提交表单详情：做列表搜索的时候当表单只有单个输入框时，回车会自动提交表单issue在此：点我点我解决：（阻止表单提交）<el-form:inline="true":model="params"@submit.native.prevent></el-form>2.监听input回车<el-inputv-on:keyup.enter.native="login"></el-input>3.tree组件增删改树形组件最难搞，尤其遇上各种蛋疼的需求=。=这次要有增删改的功能，但是发现官网给的例子并不是直接在数据上操作，所以自己修改了一个。详细地址：点我就知道啦4.table组件expand每次只展开一项文档没有具体属性，但是在issue找的方法都是结合row-key和expand-row-keys来实现这个功能issue地址：灵机一现！解决：但是我在St
vue-cli首次安装使用心得
vue-cli安装全局安装vue-cli$npminstall--globalvue-cli创建一个基于webpack模板的新项目，在这里，我们将这个项目的名称命名为vue-cli-demo$vueinitwebpackvue-cli-demo安装依赖cdvue-cli-demonpminstallnpmrundev注意：对于大陆用户，建议将npm的注册表源设置为国内的镜像，可以大幅提升安装速度，为了保证npm与cnpm版本一致，建议在安装（install）之前执行一次以下代码aliascnpm="npm--registry=https://registry.npm.taobao.org\--cache=$HOME/.npm/.cache/cnpm\--disturl=https://npm.taobao.org/dist\--userconfig=$HOME/.cnpmrc"提示：由于最新的vue-webpack-template中已经去掉了dev-server.js改用
VUE element-ui 写个复用Table组件
饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯=。=所以改成了另一种方式（我不会告诉你其实本质没变）。项目中表格较多，所以复用性最重要步骤一先来个基本的表格展示官例的tableDatatableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄'}]table.vue<template>
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（二）配置路由
组件规划和写路由结构预想中要实现的功能：主页home商品展示products使用帮助FAQ用户操作manger用户信息manger/my发货管理manger/send历史发货manger/history登录login注册regin固定头部header底部footer实现思路，先创建好每个组件每个组件的内容就像这样home.vue<template><h1>home</h1></template>写完后的结构写路由结构router/index.js打开router/index.js编写代码：importVuefrom'vue'importRouterfrom'vue-router'//引入组件importHomefrom'@/components/home'importLoginfrom'@/components/login'importReginfrom'@/compo
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（三）挂载路由到头部导航
路由是写好了，但正确的切换路由方式不应该是我们在地址栏里面输入地址，有追求的方式是点击头部的导航菜单来切换，就像这样我们点击上面的发现、关注、消息就切换路由导航我们先把头部的导航写好打开header.vue先把vue组件的基本格式写好然后开始布局写头部这里很不好意思，我一直以为头部的header.vue是引入了的，实际上并没有........打开app,vue重新编写一下app.vue代码：<template><divid="app"><!--element-ui容器布局--><el-container><!--头部--><el-header><!--头部组件渲染--><header-ly></header-ly></el-header><!--中间主要区域容器-->
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（四）美化头部和登录界面
找张头像当用户头像在写点css来美化一下头部，完善一下现在能完成的功能header.vue<template><el-rowclass="header"><!--左边logo--><el-col:span="4"class="logo"><img@click="tohome"src="../assets/logo.png"alt=""></el-col><!--中间导航区域--><el-colclass="main":span="16"><el-menu:default-active="$route.path"class="menu"routermode="horizontal"@select="handleSelect"ac
vue vue-router vuex element-ui axios的学习笔记（五）注册页面和连接Mongodb
注册页面regin.vue的代码和登录页面的代码差不多，就是要自己写2个验证，电话号码和确认密码的验证规则regin.vue代码<template><el-main><el-form:model="ReginForm"ref="ReginForm":rules="rule"class="regform"label-width="0"><h3>用户注册</h3><el-form-itemprop="username"><el-inputtype="text"v-model="ReginForm.username"placeholder="用户名"></el-input></el-form-item>
用vue实现一个淘宝购物车，给和我一样苦苦挣扎的前端小白
最近后端的同事要我写一个购物车，一开始我用jQuery写，但写着写着发现逻辑太混乱了，写不下去。最后花了五分钟找了个demo丢给了他。后来我不甘心，毕竟水平菜还不求上进就完蛋了。所以我想着用vue来实现一个。本来想看看别人的代码，但搜索了下github发现，能找到的购物车都是两级分类的。而京东、淘宝之流都是三级分类的：1.全选2.店铺全选3.商品选中这样的貌似才有实用价值html部分，不过多赘述<divid="cart"><sectionclass="cartMain"><divclass="cartMain_hd"><ulclass="order_listscartTop"><liclass="list_chk"><!--所有商品全选-->&l
关于ts-loader 中的 appendTsSuffixTo浅见，以及加速TypeScript构建
引言项目使用的Vue+TypeScript+webpack，其中TypeScript使用的是ts-loader。由于使用了vue的单文件组件，所以ts-loader配置了appendTsSuffixTo:[/\.vue$/]。但是发现在使用thread-loader和cache-loader加速构建时，会报Couldnotfindfile:'*.vue.ts'的错误。但是项目中并没有*.vue.ts的文件。关于appendTsSuffixTo官方文档给出的解释:appendTsxSuffixToAlistofregularexpressionstobematchedagainstfilename.Iffilenamematchesoneoftheregularexpressions,a.tsor.tsxsuffixwillbeappendedtothatfilename.Thisisusefulfor*.vuefileformatforno
axios进阶：用最优雅的方式写ajax请求
可以用配置解决的问题，请勿硬编码姊妹篇jQuery进阶：用最优雅的方式写ajax请求axios是Vue官方推荐的ajax库,用来取代vue-resource。优点：增加一个ajax接口，只需要在配置文件里多写几行就可以统一管理配置1.content-type配置//filename:content-type.jsmodule.exports={formData:'application/x-www-form-urlencoded;charset=UTF-8',json:'application/json;charset=UTF-8'}2.api配置//filename:api-sdk-conf.jsimportcontentTypefrom'./content-type'exportdefault{baseURL:'http://192.168.40.231:30412',apis:[{name:'login',
Vue代码分割懒加载
webpack>2的时代，vue做代码分割懒加载更加的easy，不需要loader，不需要require.ensure。import解决一切。分割层级Vue代码分割懒加载包含如下几个层级:1、组件层级分割懒加载2、router路由层级3、Vuex模块组件层级代码分割//全局组件Vue.component('AsyncComponent',()=>import('./AsyncComponent'))//局部注册组件newVue({//...components:{'AsyncComponent':()=>import('./AsyncComponent')}})//如果不是default导出的模块newVue({//...components:{'AsyncComponent':()=>import('./AsyncComponent').then({AsyncComponent})=>A
vue和iview应用中的一些问题（持续更新）
之前回答过关于vue和iview使用的一些问题，偶尔又会有人再次问到，在之前的回答中去找太麻烦。于是以后相关问题就归纳在这里啦。1、使用渲染函数渲染iview组件，如select时，添加on-change无效。因为select中事件不是change，是on-change，所以应该是如下:returncreateElement('Select',{on:{on-change:()=>{//这里的key是on-change,不是change}}}2、在表单中使用iviewSelect或者其他的value类型为number时，校验是否为空。明明有值，确无法校验通过。这是因为iview使用async-validator:https://github.com/yiminghe/a...。默认校验数据类型为string，然而select的value
关于程序员之间丧心病狂的鄙视链——编程语言篇
写汇编语言的工程师都鄙视写C语言的工程师写C语言的工程师都鄙视C++工程师C++工程师鄙视Java工程师和C#工程师Java工程师和C#工程师则相互鄙视然而，所有的工程师都鄙视PHP工程师。想到我所在公司的工程师都是写PHP的，不禁默默心疼他们，哈哈哈哈。（以上形象均出自作者手绘，转载请联系作者）
全新的.NET解释器 - Mono已经到来
Mono通过新的运行代码方式，完善了自己的即时编译器和静态编译器。2001年，Mono项目正式开始，Mono开发团队为.NET指令集编写了一个解释器，用于在Linux上引导一个自托管的.NET开发环境。当时认为解释器只是一个临时工具，可以在建立一个Just-in-Time（JIT）编译器的时候使用它。解释器（mint）和JIT引擎（mono）一直保持同步存在的状态，直到可以将JIT引擎移植到所有支持的平台。当引入泛型时，同时保留解释器和JIT引擎的工程成本变得很高，不再值得，所以去掉了解释器。稍后会介绍.NET代码的全静态编译。这也是引入禁止目标平台生成动态代码的技术。iOS是这方面的主要驱动者，它开启了允许Mono运行在PlayStation和Xbox等游戏机上的大门。全静态编译的主要缺点是：每次更新代码时都必须重新创建一个全新的可执行文件。这是一个缓慢的过程，不适合于实践的互动式发展。例如，一些游戏开发者喜欢在不触发完整的重新编译情况下，调整自己的游戏代码。静态编译使这种情况变得不切实际，所以他们在游戏代码中嵌入脚本语言，来快速迭
vue-cli 配置flexible
基于vue-cli配置手淘的lib-flexible+rem，实现移动端自适应没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem，而字体要用px安装flexiblenpminstalllib-flexible--save引入flexible在项目入口文件main.js中添加如下代码，引入flexibleimport'lib-flexible'px转rem使用webpack的px2rem-loader,自动将px转换为rem安装px2rem-loadernpminstallpx2rem-loader配置px2rem-loader在vue-cli生成的文件中,找到以下文件build/utils.js,如下图添加配置px2rem用法安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。直接写px，编译后会直接转化成rem----除开下面两种情况，其他长度用这个在px后面添加/*no*/，不会
js和微信小程序路由（页面）跳转拦截
前言在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多的vue.js提供了比较好的解决方案。在开发微信小程序时，发现官方目前并未提供相应的解决方案，根据以往的经验自己实现了路由（页面）跳转拦截。在此对两者做一个简单的对比。vue.js的路由拦截vue.js官方称之为导航守卫。官方文档很详细，使用起来也比较简单，此处就不多说了，简单的示例代码如下：//routes/index.jsconstrouter=newRouter({routes:[{path:'/',name:'Login',component:Login},{path:'/user',name:'User',component:User,meta:{
LeanCloud带图形校验码的短信发送Vue组件开发
有15万开发者使用LeanCloud服务，其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用，LeanCloud提供了数据存储、即时消息……等一站式服务，并从常用的用户管理需求出发，提供了邮箱验证、短信验证……等用户账户相关的服务。为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务，LeanCloud推出了免费图形校验码服务，并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。Vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。LeanCloud提供的由客户发起的短信发送场景主要有用户验证、用户密码重置，虽然不是很多场景，但如果每个场景下都单独进行图形校验码相关开发，则费时费力且对一些需要统一设置的参数调整不够灵活。本文在LeanCloud短信轰炸与图形校验码官方文档基础上，从封装需要出发开发一个简单的短信图形验证Vue组件。组件命名为Mobile，基于Element-UI的Form组件和Input组件进行开发，如果用户对布局和样式有特殊要求，只需要改为自己相应的组件，或者使用原生H