暴躁兔子的记录

上一篇我们创建了几个基本的页面，但是在访问的时候我们怎么才能访问到他们呢？默认只有首页的。为此我们需要用到vue-router官网1. vue-router安装vscode终端：linyundeMacBook-Pro:my-demo ly$ npm install --save vue-router+ vue-router@3.0.6added 1 package from 1 cont...

前面我们知道了如果获取数据，如何删除数据。但是有个小问题，我们每次进入列表页面的时候，都会重新去获取数据，这个不太美好，如果数据变化不是那么快的场景，完全没有必要浪费网络资源。目标：首次进入列表加载数据返回首页，再次进入列表，不加载新数据用户顶部下拉，加载新数据滑动到底部，加载旧数据子页面，或者其他页面对列表数据删除，返回列表页查看数据已经删除1. keepalive为了使...

上篇我们知道了怎么获取多条数据，这篇来看看如何获取一条数据和删除数据。1. 获取单个数据上篇我们列出了用到的接口，但是只使用了获取多条数据的，这次我们试着获取单条数据http://jsonplaceholder.typicode.com/users/1在用户列表，我们点击一条数据，进入用户详情页面，src/views/users下创建一个UserInfo.vue页面用来展示用户信息这里...

回到我们的项目目录，正式的项目肯定不能这么简单的划分，为了更好的维护项目，我们构建一下自己的目录结构，我全部构建完毕，加上注释。依据团队习惯吧构建完了目录，对页面进行几个初始化:错误页面404首页修改用户管理页面文章管理页面删除helloworld1. 错误页面在error目录下创建404.vue文件：<template> <!-- eslin...

我们也不做一个超级大项目，但是简单的设计还是要的，当然你可以直接略过看后面的。不是很清晰，列一下：首页：几个按钮(用户管理，文章管理)，进入下一页【首页判断下是手机打开还是pc打开的，跳转到不同的页面】用户管理：顶部navbar，返回首页，或者进入新增用户页面，用户管理列表文章管理：顶部navbar，左滑删除，列表缓存，等。需要做到的几个点： 左滑列表，出现删除，删除数据后，列...

我们的前端页面大致上整理完毕，下面进入对数据的操作了，不然不知道怎么结合数据岂不是瞎玩么。有一些么有后台接口经验的前端同学也不要慌，咱们搞个简单的，也不要自己提供接口，网上都有写好的。http://jsonplaceholder.typicode.com/这个网站，提供了公共的一些可以访问的接口我们就用这个网站的接口了，直接浏览器访问就有返回数据获取10个用户：http://jso...

这一篇主要是搭建基础项目，完全空的项目，还有一些基本配置本项目使用mac 开发环境，所以做个参考，window其实差别不大关键词：npmvue-cli 3vscode配置1. 电脑环境怎么安装node，vuecli3这里就不做详细的介绍了，大家自学一下，不难。（mac使用brew install node之后，直接改源：npm config set registry https:...

本系列是我学习了vue的一些基础概念之后，再结合网上的demo，然后应用到本公司的实际项目中，将以前的后台管理移植为前后分离架构。本文的主要参考对象是：vue-element-admin , vantvue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型...

接着上篇，我们昨晚了页面跳转，下面就搞点数据。但是在加载数据之前，优化一下页面。如果使用浏览器打开我们的应用跳转页面的时候，会发现刷新按钮是不会变动的，只有地址栏变动。但是页面是一屏闪过，没有个提示什么的。如果遇到页面比较大的情况，出现等待的时候，用户没有感知反馈可能就退出了。1. 进度条这里我们用一个网上的插件nprogress。安装插件：npm install --save nprog...

基本功能开发完毕，我们需要打包工程发布到线上。关闭服务检查vue.config.js配置还记得我们的vue.config.js中的几个配置吗？我们回顾一下publicPath：项目路径，默认为/，如果你的项目地址不是根路径，可以修改为项目名称outputDir: 'dist'：build之后，生成的文件保存在哪里（相对于当前项目目录，名字随便写）assetsDir:'static...