我们在使用vue-router开发前端项目时，经常需要保证有些页面不需要登录就可以访问，但有些页面必须登录后才能访问，那我们该如何才能方便地实现这样的需求呢？其实，使用vue-router中的路由拦截可以轻松实现一些收保护的页面如果在未登录状态下被请求访问，可以直接跳转到登录页面。我们实现如上需求只需要两个步骤：1）在router目录下的index.js……

在使用ElementUI实现后台管理首页布局是比较常见的一个需求，下面潘老师就带大家来实现简单的后台管理布局。我这里使用的是vue-cli脚手架整合ElementUI来搭建的环境，如果你还不会整合请参考博文：第1步：实现如图整体布局1）首先我们在components文件夹中新建一个Home.vue组件，作为我们的后台管理首页组件，我们参考Element……

一、环境准备1、我这里使用的是CentOS7 64位的Linux系统2、在Linux系统执行如下指令安装gcc zlib zlib-devel pcre-devel openssl openssl-devel：yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel……

一、Nginx介绍1、Nginx服务器官网：http://nginx.org/2、Nginx (engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，是apache服务器不错的代替品……

在进行前端网页开发尤其是在调用接口时经常会遇到跨域问题，导致接口调用失败（浏览器端类似报错如下图），接下来潘老师带大家来了解下到底什么是跨域，为什么会产生跨域问题，以及我们有哪些方法可以规避跨域问题。一、什么是跨域跨域的概念很简单，即当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同则视为跨域，而跨域问题产生的原因主要是由浏览器的“……

有时候我们的博客文章列表需要阅读全文按钮，怎么做才能炫酷有好看？今天特地给自己别搞了个包裹式类似别针一样卡在文章列表上，下面直接贴代码：1、html代码如下：<div class="read-all">阅读全文 >></div>2、css代码如下：<style> ……

一、素材准备1、在购物车中没有商品时，显示购物车为空图片，图片下载：2、解压后上传至assets\img目录下二、购物车组件实现修改Shopcar.vue如下：<template> <div id="shopcar"> <!-- 顶部导航栏 --> ……

本文接：vue手机商城项目实战（8）-路由跳转转场过渡动画效果实现我们添加购物车的操作有两个地方，一个是首页商品列表Goods.vue和商品详情页GoodsDetail.vue,下面我们来实现添加到购物车功能。一、共享购物车状态1、我们购物车信息会被购物车组件使用，所以我们将购物车商品信息存放在vuex中，在store\index.js的state新增……

本文接：vue手机商城项目实战（7）-商品详情组件实现我们发现在路由跳转的时候无论是点击底部选项卡，还是点击商品详情和搜索，页面跳转都比较生硬，因此我们可以考虑使用vue提供的转场效果来优化用户体验。一、转场代码实现1、需要给router-view包裹transition，App.vue中修改如下：<transition :name=&qu……