vue vue-router vuex element-ui axios 的学习笔记（七）完善登录注册
现在我们已经能够在服务器环境下完成注册操作了登录功能login.vue<template><el-main><el-form:model="LoginForm"ref="LoginForm":rules="rule"label-width="0"class="login-form"><h3>用户登录系统</h3><el-form-itemprop="username"><el-inputtype="text"v-model="LoginForm.username"placeholder="username"></el-input></el-form-item><el-
canvas图片裁剪，双指缩放顺滑体验，支持PC端移动端
Demo在线演示使用说明API请移步https://github.com/Gitjinfeiy...使用请参考demoleteditor=newImageEditor(options);Options{container:'.wrapper',//必填挂载容器limit:{minWidth:50,//宽度限制maxWidth:200,minHeight:50,//高度限制maxHeight:200,maxSize:50,//图片大小限制kb},created:function(imageEditor){//editor被初始化后},beforeReadFile:function(){//初始化file之前只有调用`readFile(file)`才会触发(建议在这一步显示编辑器)},afterReadFile:function(){//通过FileReader读取文件之后},beforeLoadImage
学好vue真的很简单吗
学好vue真的很简单吗vue很难吗难和简单都是相对的，尤大大当然觉得vueissoeasy，一个新手小白当然觉得vue是难的。如果你学不会，然后怀疑自己是不是太蠢，那就太不应该了。几乎所有的文章都在说vue官方文档写的好，vue比react、angular难于上手，学习曲线没那么陡峭，虽然都说的实话，但是那都是对于一个基础良好的同学说的，对于一个命令行没用过几次、node是啥玩意的同学来说，那就太难了以上我只想表达一个意思，难与不难都取决于你自己，30%的同学学习能力强的上手vue那还不是分分钟的事？但是遗憾的是大多数同学都属于那能力不那么强的70%。应该学vue吗可以说mvvm框架至少是最近两年最应该学习的框架之一了，因为它火呀因为它流行呀，别人都用你就得用，你说是不。另一方面，虽然vue不难，但是对于新手也是一道不低的门槛，所以就算你公司还没用上mvvm框架，学个vue对以后跳槽也是有很大帮助的。如何学vue尤大大说了，不会英文你就去学呀。尤大大又说了，如果这么简单清晰的官方文档你都觉得吃力的话，应该占时不应该学v
安装和使用MongoDB
MongoDB是一个著名的NoSQL数据库，顾名思义就是不使用SQL的数据库，目前在很多场景都有使用。如果你不喜欢使用笨拙的各种SQL数据库，可以尝试使用一下MongoDB，会有不一样的感受。本文就是一篇简单的Windows下的安装和使用教程。下载和安装首先，先到MongoDB官网下载页下载社区版的服务器，由于这里是Windows系统，所以当然下载Windows版本的。注意我们要下载的是社区版，而不是导航条第一个的Atlas。如你所见，MongoDB官网是一个商业化的网站，Atlas正是它提供的一个商业版服务，可以让我们连接到他们的服务器。具体版本默认第一个就可以了，功能最全，带有SSL支持。注意三个版本都是64位的，所以32位的操作系统无法运行。下载完成之后安装即可，大约150M左右的安装包，很快就可以安装完毕。配置和启动对于我来说，我将其安装到了D:\ProgramFiles\MongoDB。等到安装完成，打开D:\ProgramFiles\MongoDB\Server\3.4\bin就会发现MongoDB的一系列程序，主要用
Vuex
为什么使用Vuex在学习Vuex之前，先了解一下“单向数据流”这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将state映射到视图；actions，响应在view上的用户输入导致的状态变化。(比如请求数据或者修改数据会导致数据源状态改变)但是遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，而且特别不方便。如果坚持使用，传参的方法对于多层嵌套的组件将会非常繁琐，各种各样的问题通常会导致无法维护的代码。所以我们把组件的共享状态抽取出来，以一个全局单例模式管理(惰性单例的设计模式)每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex和单纯的全局对象有以下两点不同：Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变store中的状态。改变store中的状态的唯一途
也许vue+css3做交互特效更简单
1.前言做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用vue，开发技术栈方面，理所当然就使用了vue+css3开发，过程中发现使用vue+css3开发特效，和javascript/jquery+css3的思维方式不一样，但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例，希望能起到拓展思维的作用，让大家明白vue+css3应该怎样开发交互效果！如果大家有什么好的建议，或者觉得我哪里写错了，欢迎指出！1.文章上面的代码，虽然代码很简单，不难理解，但是也是建议大家边写边看，这样不会混乱。2.文章所提及的小实例，都是很基础的，大家可以参照自己的想法进行扩展，或者修改，可能会有意想不到的效果。我写这类型的文章也是想授人以渔，不是授人以鱼！3.这几个实例，摘自我自己的平常练习的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。2.开场小动画运行效果gif图模糊效果看着跟实际效果不太一样！大家注意！原理分析说到原理分析，其实也没什么可以分析的，就是在页面是下面
自定义自己的vue-cli模板
自定义自己的vue-cli模板在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。例如下面是我常用构建项目的目录。src├─api//接口├─assets//图片├─components//公用组件├─css//样式主要是scss├─js//第三方以及工具类├─page//页面├─router//路由└─store//vuex下面说下怎么自定义自己的vue-cli模板fork一个自己的模板从https://github.com/vuejs-templates/webpackfork一个库，再提交自己的修改到【自己的分支】，因为我们大部分内容还是在这个基础上做修改的。关于vue-cli的源码分析可以参考下这个文章从vue-cli源码学习如何写模板vuejs-templates/webpack
vue+koa2+mockjs模拟数据
首先说一下这是本人第一次分享东西第一次写，写的不好或者有错误的请大家多包涵支出错误共同进步加粗文字第一步安装vue-cli项目不多说网上一大把第二步因为本地的vue访问本地的mock1、配置vue代理在config/index.js里面的proxyTable，因为本地node启动的服务默认访问的是3000端口所以在target里面配置http://localhost:3000/proxyTable:{'/api':{target:'http://localhost:3000/',changeOrigin:true,pathRewrite:{'^/api':'/'}}2、在vue项目的mianjs中importaxiosfrom'axios'axios.defaults.baseURL='/api'第三步搭建nodejs的koa2项目全局安装koa，不是koa2注意1、npminst
vue+elementUI部分引入组件
因为最近公司开发一个很小的后台项目，所以考虑部分引入element的组件，因为第一次单独引入没有经验，网上看了很多都有这样那样的问题，个人感觉官网也没把我说明白（也许自己水平太低了），所以自己研究了一下亲测有效，如有错误欢迎指出。安装vue-clinpminstall-gvue-cli创建项目projectName是你项目的名字npminstallwebpackprojectName进入项目目录cdprojectName初始化项目安装依赖npminstall安装elementuinpminstallelement-ui--save-dev首先确定项目是否有style-loader和babel-plugin-component若没有npm一个npminstallxxx--save-dev简单粗暴点，找到.babelrc把原文件内容全部删除，粘贴下面代码{"presets":[["env",{"modules"
Vue源码解析(五)-vuex
Vue组件中获得Vuex状态按官网说法：“由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态”，本文结合下面的demo进行分析：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)constvueStore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})letvm=newVue({el:'#app',store:vueStore,template:'<div>{{count}}</div>',computed:{count(){returnthi
用一个简单的例子弄懂vuex和模块化
这篇文章预设你已经了解vue相关的基础知识，因此本文不再赘述。对vuex的定位和解释可以看官方文档，说的很详细了，我主要从实用的角度写一写如何在实际项目中使用vuex，例子真的很简单（简陋），但是主要是理解这种思维就好。例子是在vue-cli基础上构建的，以下是src文件下的内容目录。├──App.vue├──components//组件文件夹│ ├──tab1.vue│ ├──tab2.vue│ ├──tab3.vue│ └──tab4.vue├──main.js//vue的主文件入口├──router//vue-router文件│ └──index.js└──store//vuex文件├──action.js//action├──getter.js//getter├──index.js//vuex的主文件
另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新
目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注：此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求，用户体验更流畅。项目需求：任何技术的探索，都来自项目的需求。之前经手的一个项目是微信端商城，使用的是传统的mvc模式，利用的是jq+js，因此对于商城的项目需求比较熟悉。目前在学习vue，练手一个商城，遇到之前经常提及而无法很好解决的需求。有些页面需要前进刷新，后退不刷新。比如，从商城的【首页】-->【详情页】-->【订单提交页】，每次打开新页面都需要获取新数据，但是按下返回键后，就不需要再获取新数据了，而滚动条还保留在之前的位置。最常见的操作是从【首页】-->【详情页】，然后在从【详情页】-->【首页】，如此反复。实例如图：前人经验：前人栽树，后人好乘凉。技术圈的分享一直都在蓬勃发展。遇到问题，我们可以尽情去搜索，去寻找大佬的足迹。针对上述需求，
过滤器 Vue filter
过滤器使用场景当数据需要再次加工和处理的时候。Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部双花括号插值(使用全局定义)HTML:<!--在双花括号中--><span>{{message|capitalize}}</span>JS:Vue.filter('capitalize',(value)=>{if(!value)return''//对数据处理后返回value=value.toString()returnvalue.charAt(0).toUpperCase()+value.slice(1)})过滤器函数总接收表达式的值作为第一个参数。在上述例子中，capitalize过滤器函数将会收到message的值作为第一个参数。v-bind表达式(在组件内定义)HTML:<!--
vue vue-router vuex element-ui axios学习笔记（六）在项目中使用MongoDB完成注册
完成注册功能的思路我的个人构思想法1、首先建里一个简单nodeserver.2、然后定好接口，两边都把接口写好3、最后把项目打包，丢过去server里面测试一下缺点：这样调试非常非常不方便，不知道有没有简单一点的办法，希望有大佬能指点一下第一步：创建一个简单的servercnpminit然后安装各种包然后写一个app.js//引入各种包constexpress=require('express');constformidable=require('formidable');//这个DB.js是我看一个大佬写的操作mongodb的封装好的库constDB=require('./DB');//这是数据库的地址和集letdburl='mongodb://localhost:27017/learn'letcollection='users'constmondb=newDB(dburl,collection)//这个解析穿过来的数据constform=new
新版 vue-cli 2.9.1的webpack的存在问题解决
最新vue-cli2.9.1的webpack存在问题最近vue-cli更新，用其构建项目的时候，发现bulid文件下少了两个文件，分别是dev-sever.js和dev-client.jsvue-cli2.8vue-cli2.9.1这是为什么呢我们查看下package.jsonvue-cli2.8vue-cli2.9.1由此可知在最新版本的vue-cli中webpack版本更新到v3.6.0了。既然更新了那就我们就重新开下webpack的配置项。vue自启浏览器设置当我们启动npmrundev执行此cli的时候发现居然不会自己启动浏览器了这样的话岂不是装逼不了？不不不还是可以的，只要我们修改下配置项就可以了我们先看看我们npmrundev到底执行了什么继续查看package.json的scripts选项的dev配置vue-cli2.9.1package.json对比下就知道当我们运行npmrundev实际上是执
vuex浅入浅出
什么是Vuex?Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。newVue({el:"#app",//state驱动应用的数据源data(){return{count:0}},//view以声明方式将state映射到视图；template:'<div@click="increment">{{count}}</div>',//actions响应在view上的用户输入导致的状态变化。methods:{increment(){this.count+
WEEX系列 我的第一个WEEX DEMO
和一步一起聊聊WEEX我刚学WEEX的时候，环境就搭建了好久，大家若也遇到了一些坑可以去weex-toolkit的github上提issue。这个也是我遇到困难的解决方案。那么就让我们来实现第一个weex程序吧。创建项目weexcreatefirst-demonpminstall我们先了解src是我们业务代码存放的地方，webpack.config.js是webpack的配置文件将vue文件打包成weex可以执行的JSBundle。web可以简单理解为是h5个性化的代码工作区。platforms是原生android代码或者ios代码的存放位置。写两行代码试试<template><div><text>HelloWorld</text></div></template><style></style><script>exportdefaul
vue.js开发一个全局调用的MessageBox组件
前言目前在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。源码Talkischeap.Showmethecode.组件模板///src/components/MessageBox/index.vue<template><divclass="message-box"v-show="isShowMessageBox"><divclass="mask"@click="cancel"></div><divclass="message-content"><svgclass="icon"aria-hidden="true"@click="cancel"><usexlink:href="#icon-delete
Vuex.js
Vuex是什么Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vue的状态管理首先来看一个简单的的例子：<!DOCTYPEhtml><htmllang="en"><head><title></title><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"></head><body><divid="app"><p>{{counter}}</p><button@click="add">+<
WEEX系列 WEEX入门
和一步一起从前端视角聊一聊WEEXWEEX是一套构建高性能、可扩展的原生应用跨平台解决方案。就一个字吊。通过使用有限的类HTML标签、阉割的CSS及JS基于VUE语法来快速构建原生应用。一次编写多端运行，可以使用相同的API开发Web，Android和iOS应用。优势官网给出三点：1、体积小，语法简单2、可扩展3、高性能1、简单体积小不小我不知道，但是语法确实很简单。WEEX提供了10几个内建组件和10几个内建模块，简单读一读就可以开发应用程序。2、可扩展VueJS的亮点之一就是组件化、模块化,WEEX同样继承了其优点，基于内建组件，我们可以开发扩展自己的组件库。3、高性能WEEX本身对加载时间和资源占用进行了优化。站在巨人的肩膀上，我们也很容易开发出高性能的APP。4、开发成本低一个前端搞定三端。原理我们使用WEEX提供的template、script、style三个标签来构建页面或者组件，然后通过webpack打包成JSBundle。我们可以把JSBundle部署到服务器上实现热更新。JS