Nuxt 随着现在vue和react的流行，许多网站都做成了SPA，确实提升了用户体验，但SPA也有两个弱点，就是SEO和首屏渲染速度。为了解决单页应用的痛点，基于vue和react的服务端渲染应运而生。由于公司的框架采用的是vue，所以就简单的研究了一下基于vue的服务端渲染框架——NUXT。在vue的官网有关于服务端渲染的详细介绍，而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置，也集成了Vue2、vue-router、vuex、vux-meta（管理页...
最近面试发现很多前端程序员都从来没有写过插件的经验，基本上都是网上百度。所以打算写一系列文章，手把手的教一些没有写过组件的兄弟们如何去写插件。本系列文章都基于VUE，核心内容都一样，会了之后大家可以快速的改写成react、angular或者是小程序等组件。这篇文章是第一篇，写的是一个类似QQ的侧边菜单组件。 效果展示 先让大家看个效果展示，知道咱们要做的东西是个怎么样的样子，图片有点模糊，大家先将就点：开始制作 DOM结...
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。 而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=xx() .stop .prevent .capture .self .once <a v-on:...
一、 布局 Flex Flex 布局，可以简便、完整、响应式地实现各种页面布局，Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 // 指定为 Flex 布局display: flex； // 主要属性 flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 flex-grow属性定义...
最近看到一个需求： 实现一个评论功能，要求对评论列表进行分页显示对相应模块实现组件化能显示发布者、发布时间以及内容乍一看不是很难，但是在具体的实现上还是遇到了一些问题。此外，因为第一次使用 vue ，看文档看的也是一脸懵逼，话不多说，下面来分析一下，具体每个模块是怎么实现的。源码地址评论表单代码：<!-- 文档结构区开始 --> <template><div id="comment" ><UserDiv @transferUser="getInput" ></UserDiv><CommentDi...
react、vue、angular代表了3种前端工程化的思想，学习三大框架主要是理解它们的核心概念，比如组件、生命周期、单向数据流、双向绑定等。这些概念在非框架开发中，很少人会去这样系统化的思考，对于新手来说，很多概念都没有接触过，不知道从何入手一个react、vue或者是angular项目，下面我将会从零搭建vue项目，边做项目边学习vue的思想。 1、想要使用vue，我首先该怎么做？想要学习vue，我第一件事是去vue官网看简介：https://cn...
vue项目基础结构一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。 1.vue-cli：搭建基本的vue项目骨架，脚手架工具 2.sass-loader&node-sass:我是使用的sass作为样式...
对于React，Vue构建的单页面应用老说，SEO是一个众所周知的问题。服务端渲染(SSR-server Side Render)是目前看来最好的解决办法。React应用有Next.js，对应Vue的解决方案就是Nuxt.js。1.简介 官网：https://nuxtjs.org/GitHub：https://github.com/nuxt/nuxt.js Nuxt.js 是什么？ Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵...
一、本文将分享如何快速搭起基于webpack+vue的前端项目框架，利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置，再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。下面是具体实操。 二、基本命令操作。 1.在开发之前需要首先安装node.js，直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/ 在装完node之后npm包管理工具也自动的安装好，安装完之后，在命令行输入node -v或者npm -v，出现版本号...
最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑： 1.问题：只刷新一次，解决方法：需要自己手动重置状态 this.scrollerStatus.pullupStatus = ‘default， 2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置 activated () {this.$refs.scroller.reset() } 如果还没效果，请在获取后台数据后，执行如下代码 this.$nxtTick(() => {this.$refs.scroller.reset()}) 贴出整个页面的...
像我们平日里做惯了 Java 或者 .NET 这种后端程序员，对于前端的认识还常常停留在 jQuery 时代，包括其插件在需要时就引用一下，不需要就删除。故观念使然，尽管 Nuget 和 Maven 用得顺溜，但对 NPM 仍不带感，兴许是周边无人带动的稀薄气氛，也或者是没参加过类似的大型活动，于是在自发性上差了许多。再者，我不用 MVVM 模式，领导也不会扣绩效。 为了快速体验 MVVM 模式，我选择了非工程化方式来起步，并选择使用 Vue.js，以及基...
“大白话，讲编程”系列又回来了，这个系列我们一起学习的是Vue.js基础知识。你没看错，是基础知识。所以，哪怕你入行不久，相信你在的大白话风格下，也能学会。 但还是希望你有开发过html，css，javascript的项目经验，如果你连一点项目经验都没有，亦或者你早已掌握Vue.js的知识，那么这个系列不适合你当前的学习阶段。 1 学习目标 通过这一节，你会学会： 1.目前前端技术使用的趋势 2.什么是MVVM 3.Vue.js的优点 4.Vue.js的两大...
Mint UI GitHub：github.com/ElemeFE/mint 项目主页：mint-ui.github.io/# Demo：elemefe.github.io/mint- 文档：mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来，根据社区和团队内部的反馈，修复了一些 bug 并新增了部分组件，于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 Mint UI 的 Vue 项目。 脚手架 随着 Vue.js 的迅速发展，目前搭建一个 Vu...
本篇博客主要说明：前后端框架（本例中是vue和koa）如何发送请求?获取响应？以及跨域问题如何解决？vue部分： import App from ./App.vue import Axios from axios new Vue({el: #app,render: h => h(App),mounted(){Axios({method: get,url: http://localhost:3000,}).then((response) => {console.log(response);})} })koa部分： const Koa = require(koa); const cors = require(koa-cors); const app = new Koa(); const main ...
本文实例为大家分享了vue.js实现表单排序和分页的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html><head><meta charset="UTF-8"><script src="../lib/vue.min.js" type="text/javascript"></script><title>表格组件</title></head><body><div id="app"><mydiv v-bind:info="info" v-bind:header="header" v-bind:num="num" v-bind:page="page"></mydiv></div><script type="text/x-template" id="mysc"><div><table><tr...