weex脚手架
此篇文章不要注意排版经上级领导的要求，我们公司开始步入weex的队列，虽然现在已经处于开始阶段，但是是一个好的开始，一个艰苦的开始。废话不多说，我们先聊一聊刚开始的整个过程一、关于运行weex项目npm要求5.+，因此安装了node8.7.0,自带安装了npm5.4.2为了方便切换node版本，mac上我们可以安装n来管理sudonpmn-gn8.7.0便已切换为了npminstall的速度快一点，设置淘宝镜像npmconfigsetregistryhttps://registry.npm.taobao.org二、开始weex1.安装weex：sudonpminstall-gweex-toolkit2初始化工程：weexinitprojectName3.运行demoweexsrc/index.vue然后即可以使用playgroundapp二维码扫描来查看效果了我的weex版本：三、开始自己的脚手架首先weex号称可以一套代码跑三端，那么我们暂且区分两端，原生和H5.网上巴拉巴拉查询
vue2 单页面如何设置网页title
推荐使用vue-wechat-title插件下载安装插件依赖npminstallvue-wechat-title--save在main.js中引入插件importVueWechatTitlefrom'vue-wechat-title'Vue.use(VueWechatTitle)在路由文件index.js中给每个路由添加titleroutes:[{path:'/',name:'index',component:index,meta:{title:'首页'//标题设置在这里}},{path:'/detail',name:'detail',component:detail,meta:{title:'详情页'//标题设置在这里}}]在app.vue中修改router-view组件<router-viewv-wechat-title='$route.
Vue源码解析(三)-computed计算属性&&lazy watcher
前言1、Vue源码解析(一)-模版渲染2、Vue源码解析(二)-MVVM双向绑定demo官网给出的demo如下<divid="app"></div>newVue({el:'#app',template:`<div><p>Originalmessageis:{{message}}</p><p>Computedreversedmessage::{{reversedMessage}}</p></div>`,data(){return{message:'Hello',}},computed:{reversedMessage(){returnthis.message.split('').reverse().join('')}}})结果：Originalmessage:"
vue 服务端渲染 入门学习和注意事项（内含推荐文档）
为什么使用服务端渲染更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。组件化开发、前后端分离思想贯穿在现今前端开发中。使用vue(SPA)确实极大的优化我们的开发体验和产品性能。但是对于网站这种需要搜索引擎爬取（seo），增加浏览量、增加权重的项目。SPA是不利于爬虫抓取项目（因为在爬虫抓完之后，js才加载，dom才渲染）。更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。不用等待所有js下载完毕并执行，才开始服务器渲染。因此会获得更好的用户体验。使用技术栈vuenuxt（官网提供框架。后文会针对提供一些区分和注意点）expressaxios(vue-resorce停止更新，官网推荐数据交互中间件)如果感觉是很多不熟悉的名词，不要感到很困难，可以通过引入一个基本的小项目上手练习。慢慢就都吸收了。后文提供项目地址，以及分析。如果熟悉自行跳过。看项目初始技术栈相关文档推荐必看文档。读一遍后，查找即可。vue官方2.0中文文档：https://cn
Vue 项目中接入sentry
Vue项目中接入sentry最近在公司的内部Vue项目中接入sentry技术栈，跟踪运行时错误。针对这件事分享下，有不完整或者错误的地方欢迎交流。[源码][1]一、sentry错误日志收集框架StophopingyouruserswillreporterrorsOpen-sourceerrortrackingthathelpsdevelopersmonitorandfixcrashesinrealtime.Iteratecontinuously.Boostefficiency.Improveuserexperience.如果项目允许，你可以在sentry申请一个免费账户，管理你项目上传的运行时错误。也可以在公司搭建一个sentry。关于搭建sentry这块与本文无关就暂时不说了，可以查看。1、sentry的原理（个人见解）（1）sentry是一个收集项目运行时错误日志的框架，这个框架就要分为服务平台和客户端了。服务平台：可以自己自己搭建，也可以使用官网的（免
在VUE中使用keycloak完成用户登录认证
由于只是测试keycloak的登录，故以下的VUE代码仅供参考在正式开始前，请先移步官方文档：http://www.keycloak.org/docs/...笔者的keycloak服务器地址：http://192.168.10.9:8080/auth所以下载了http://192.168.10.9:8080/auth/js/keycloak.js的js文件，可以直接用，强迫症患者也可以改来用。使用vue-cli创建项目，然后把keycloak.js放进去我是把代码加到了HelloWorld.vue里了，这个很HelloWorldimport'./keycloak'exportdefault{name:'HelloWorld',data(){return{msg:'WelcometoYourVue.jsApp',}},mounted(){console.info(this.$route.query)
vue2 + typescript + webpack2 动态加载组件方法
本文总结了使用typescript动态加载vue组件的方法。源码在最下面。Webpack配置动态加载需使用webpack的codesplit功能。需配置chunkFilename和publicPath。module.exports={...output:{//生成的文件路径。path:path.resolve(__dirname,'./dist'),//打包后资源文件的前缀publicPath:'/dist/',//动态加载模块的文件名chunkFilename:'chunk-[id].js?[chunkhash]',//生成的文件名filename:'build.js'},...}TypeScript动态加载文件方法webpack+typescript有两种动态加载模块的方法。分别为require方式和es6方式。普通方式webpack可以使用require实现动态加
Vue2 源码漫游（一）
Vue2源码漫游（一）描述：Vue框架中的基本原理可能大家都基本了解了，但是还没有漫游一下源码。所以，觉得还是有必要跑一下。由于是代码漫游，所以大部分为关键性代码，以主线路和主要分支的代码为主，大部分理解都写在代码注释中。一、代码主线文件结构1-->4，代码执行顺序4-->11.platforms/web/entry-runtime.js/index.jsweb不同平台入口；/*@flow*/importVuefrom'./runtime/index'exportdefaultVue2.runtime/index.js为Vue配置一些属性方法/*@flow*/importVuefrom'core/index'importconfigfrom'core/config'import{extend,noop}from'shared/util'import{mountComponent}from'core/instance/lifec
微信个人网页版API的微信机器人
微信个人网页版API的微信机器人，github上有很多轮子了，来一个electron-vue版的，完全开源github项目地址https://github.com/joehecn/j安装Windows,MacOS两个版本百度网盘：https://pan.baidu.com/s/1i4QFrzn.dmg.zip后缀的是MacOS安装文件.rar是Windows安装文件前面是版本号，下载一个最高版解压后直接安装即可功能自动回复群发使用1登录界面-微信扫二维码登录3主界面3群发消息3-1添加组3-2选择组3-3添加组成员（选择好友、选择聊天群），可以按关键字搜索好友3-4发送消息（要切换回组成员列表标签）4自动回复点选自动回复系统会要输入你的图灵key,确认后，一切正常的话，好友给你发消息机器人就自动回复了
Vue基础
Vue基础安装vuenpminstallvue命令行工具(CLI)Vue.js提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#安装依赖，走你$cdmy-project$npminstall$npmrundev使用引入vue.js一、声明和渲染Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统：<divid="app">{{message}}</div>varapp=newVue({el:'#app',data:{message:'Hello
Vue.js声明式渲染
基础概念理解：（*）1.什么是Vue？Vue是一套构建用户界面的渐进式框架。2.如何理解渐进式我对渐进式的理解其实就两个字：自由。当我们要用Angular框架时要知道它是强主张的，必须要遵循以下三条规则：必须使用它的模块机制必须使用它的依赖注入必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）而React的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。但是Vue就比较自由了你想把你的页面分的更加具体，分成更小的可控单元，那就用组件系统其他可以不用，当然声明式渲染我们还是得用的，应为我们都希望DOM的更新是自动的，而非手动去更新的。这也就是Vue现在这么受欢迎的原因之一吧！如何理解自底向上的开发模式我的理解就是比如我们先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。声明式渲染和命令式渲染命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去
vue組件自学
Vue组件什么是组件？组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。使用组件全局注册我们已经知道，可以通过以下方式创建一个Vue实例：newVue({el:'#some-element',//选项})要注册一个全局组件，可以使用Vue.component(tagName,options)。例如：Vue.component('my-component',{//选项})请注意，对于自定义标签的命名Vue.js不强制遵循W3C规则(小写，并且包含一个短杠)，尽管这被认为是最佳实践。组件在注册之后，便可以作为自定义元素<my-component></my-component>在一个实例的模板中使用。注意确保在初始化根实例之前注册组件：<d
vue入门总结
首先了解一下基本指令v-mind.title='属性名'给某个dom添加属性v-model='可以是方法名、数据、算法、布尔属性'v-if='true/false'让元素消失，是指从页面上删除元素，或者显示，是从页面上添加元素也可以当if条件用，但是vue一般需要条件判断，通常使用三目运算v-show='true/false'让元素隐藏、显示跟display:block/none相同:key='任意值'不重复使用的指令:class={a,b}/{a:b,c:d}/[a,b,c]class添加（前面不要少了冒号）v-for('(i,index)inlist(对象、数组)')给什么元素上面添加，就循环这个元素执行v-on:事件名='function名'也可简写@click='function名'eg:v-on:click='fun'@click='fun';fun就是函数名，简写的意思如果事件需要传参可以使用f
vue组件
什么叫组件：有结构HTML有样式CSS有交互（效果）行为信号量存数据组件的行为可以定制？通过属性设置在Vue中有什么样的组件(组件进行分类)：实现基本功能的基础的组件（最小的元素）可复用的逻辑组件（业务组件）页面组件页面上所有的东西全都是组件：形成了组件树理解组件的创建和注册我们用以下几个步骤来理解组件的创建和注册：Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。Vue.component()方法内部会调用组件构造器，创建一个组件实例。组件应该挂载到某个Vue实例下，否则它不会生效。组件的使用需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法
从零开始搭建Vue组件库——VV-UI
前言：前端组件化是当今热议的话题之一，也是我们在开发单页应用经常会碰到的一个问题，现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们想自己开发一套属于自己的组件库，来增强对组件的可控性。那么我们该如何去做呢？这里记录一下我从零开始搭建起来的组件库的过程，目前只有简单几个组件，不过我也会慢慢更新维护：VV-UI1.环境准备我们搭建组件库，需要准备一系列环境，首先我们要考虑一下问题：脚手架如何搭建如何规划目录结构如何编写文档首先，对于脚手架环境的问题，目前已经有非常成熟的vue官方的脚手架，我们拿来用就好了#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#安装依赖，走你$cdmy-project$npminstall$npmrundev接着我们看第二个问
如何利用webpack搭建vue环境
环境介绍系统：macOSHighSierra10.13node版本：v8.4.0npm版本：5.3.0搭建过程新建一个新的文件夹，进入文件夹，命令行中npminit,输入必要的信息安装webpacknpminstallwebpack--save-dev(注：可采用淘宝源，可以安装一个nrm工具，这个工具可用于切换npm包的获取地址，具体非本文主要内容)利用npminstall--save-devpath安装path以备使用在项目目录下新建一个文件，webpack.config.js,内容代码如下，官网直接拿过来的varpath=require('path');module.exports={entry:'./app/index.js',output:{filename:'index.js',path:path.resolve(__dirname,'dist')
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（一）初始化项目
创建项目learn直接在工作空间下用vue-cli来创建vueinitwebpacklearn安装依赖执行cnpmicnpmrundev成功的话讲出现这个画面正式开始写项目1、首先修改项目结构目前的结构新建一个vuex文件夹，用来管理部分状态，比如登录里面新建一个store.js新建一个api文件夹，用来写axios的请求借口,里面放一个api.js新建一个data文件夹，用来存放或模拟数据，放一个data.js里面放空内容就行现在的结构2、在main.js里面引入vuexelement等3、修改App.vue文件代码，确认element是否引入成功代码输出：说明是没有问题的组件规划和写路由结构预想中要实现的功能：主页home商品展示products使用帮助FAQ用户操作manger用户信息manger/my发货管理manger/send历史发货manger/history登录login注册regin
electron 将pc端（vue）页面打包为桌面端应用
背景最近在学习RxJS，平时边看文档边顺手就敲一敲那些API，有时候想回顾一些自己写的东西，就要先把项目跑起来，这也难免有些麻烦。于是乎，就想着把自己写的这个小项目打包成桌面端，方面每次打开电脑就能看。经过网上查阅，比较成熟的解决方案很多，比如electron，nw.js等等。最终选定用electron，因为他的星星最多，哈哈。这个练手Rxjs的小项目是用vue跑的，之前没玩过vue，顺手玩一下。打包桌面端，跟前端框架无关，只是想夸一下vue在构建项目上的体验真的好，简单方便，会以yesorno的形式让你完成一个主流的前端框架（回想以前构建angular应用，还要打开help，看一大堆api，在这一点用户体验上angular真是输了，不知道最近的ng5变没变）。electronElectronusesChromiumandNode.jssoyoucanbuildyourappwithHTML,CSS,andJavaScript.OpenSourceCrossPlatformCompatible
Vue-todolist
vue-todolist完成成品Vue-todolist基于Vue的TodoList示例，麻雀虽小，五脏俱全技术栈Vue+localStorage+hash功能描述(使用说明)添加备忘录(输入标题后回车添加,如果内容为空或只有空格会清空，什么都不添加)删除备忘录(点击标题后面的叉)完成备忘录(点击标题前面的复选框)编辑备忘录(双击标题进入编辑模式)取消编辑备忘录(按ESC或者失去焦点时)完成编辑备忘录(按回车键完成[如果内容为空的时候会自动删除]，此时也会调用到失去焦点事件)一键完成所有备忘录(点击第一行的复选框)过滤任务，显示全部，未完成，已完成的备忘录(点击全部，未完成，已完成按钮)清空已完成备忘录(点击清空已完成)Vue相关知识点练习：加载环境npminit-ynpmi-Sunderscorevuetodomvc-app-cssvimindex.html复制格式化后的html引入css将英文标题换成中文标题引入vue.js新建vue的实例写一个默认的任务：todoList:[
Todos备忘录项目详解
今天我们要做的是个备忘录项目模仿一下Todos这是Todos的官方网址http://todomvc.com/examples/v...操作流程新建文件夹和文件名称自定义文件夹和文件名称，我们用它来装我们今天的项目打开命令行依次输入：npminit-y//初始化项目npmi-Sunderscorevuetodomvc-app-css//下载这三个文件，因为我们后期要用到如图这样在index.html里边输入Vue的基本样式和引入css、html：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge">