用vue前后端分离项目开发记录
一:软件安装
1.1 检测node 是否安装

1.2 安装淘宝镜像 cnpm
1.3 安装vue-cli

1.4 检查是否安装vue-cli脚手架成功

1.5安装webpack 模块管理工具

二:创建Vue项目
2.1 创建一个基于webpack项目

2.2 进入项目文件

2.3以生产环境启动项目

2.4打开浏览器

三:安装插件
3.1 安装ajax插件axios (vue-resource在2.0以后就不在更新了)

3.2 安装状态管理工具vuex (组件间数据传输)

3.3 安装框架Element Ui

3.4 安装less插件

3.5安装animate插件

四:配置插件
4.1 配置axios插件

4.2 配置vuex


4.3 配置Element Ui

4.5 配置使用animate插件

五:开始首页(头部尾部)
5.1:home主页



5.2 头部


5.3 尾部


六:模拟数据
6.1 装插件 mockjs,一个模仿接口的小东西

6.2 配置插件



正式写数据




用vue前后端分离项目开发记录的更多相关文章
- 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案
因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
- Jeecg-Boot 2.0 版本发布,基于Springboot+Vue 前后端分离快速开发平台
目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...
- SpringBoot+Vue前后端分离项目,maven package自动打包整合
起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了. 1. 建立个maven父项目 next 这个作为父工程,next Finish ...
- 21.Shiro在springboot与vue前后端分离项目里的session管理
1.前言 当决定前端与后端代码分开部署时,发现shiro自带的session不起作用了. 然后通过对请求head的分析,然后在网上查找一部分解决方案. 最终就是,登录成功之后,前端接收到后端传回来的s ...
- React+Flask打造前后端分离项目开发环境
目录 前言 Backend-Flask Frontend-React Done References 前言 新的一年,开始水第一篇技术文.碰巧最近React玩得多,撸一篇文章纪念一下开发环境的搭建.
- Django+Vue前后端分离项目的部署
部署静态文件: 静态文件有两种方式 1:通过django路由访问 2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加 url(r'^$', TemplateView.as_view( ...
- 基于Vue的前后端分离项目实践
一.为什么需要前后端分离 1.1什么是前后端分离 前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...
随机推荐
- 记录下安装ES过程中遇到的错误及解决
1.集群配置 需要修改 cluster.name .node.name .network.host: 0.0.0.0[此处默认localhost].http.port: 9200 只要集群名相同,且机 ...
- 数据库历险记(二) | Redis 和 Mecached 到底哪个好?
文章首发于微信公众号「陈树义」,专注于 Java 技术分享的社区.点击链接扫描二维码,与500位小伙伴一起共同进步.微信公众号二维码 http://p3npq6ecr.bkt.clouddn.com/ ...
- 设计模式 笔记 策略模式 Strategy
//---------------------------15/04/28---------------------------- //Strategy 策略模式----对象行为型模式 /* 1:意图 ...
- winform 保存文件 打开文件 选择文件 字体样式颜色(流 using System.IO;)
string filePath = ""; private void 保存SToolStripMenuItem_Click(object sender, EventArgs e) ...
- OpenStack与OpenDaylight的对接过程
由于项目中需要使用OpenDaylight(Oxygen)替换OpenStack(Otaca)中的neutron-openvswitch-agent,能找到的一些资料都是比较旧的版本,官网上的文档也一 ...
- Hive的一些理解
首先谈一下关于hive和hbase的区别的疑问(完全不是一个东西): 本质上来说hive和hbase没什么关系,虽然都是表,查数据等,但是他们根本就不是一个层面的东西 hive就是一个rapduce的 ...
- linux/Centos下查看和修改网卡Mac地址(ifconfig命令)
本文转载自http://www.169it.com/article/14360294838474691537.html linux/Centos下查看网卡Mac地址,输入命令: #ifconfig - ...
- 《linux内核设计与实现》第一章
第一章Linux内核简介 一.unix 1.Unix的历史 Unix是现存操作系统中最强大和最优秀的系统. ——1969年由Ken Thompson和Dernis Ritchie的灵感点亮的产物. — ...
- ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一)
ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (一)ubuntu18.04配置n ...
- css3-文本新增属性
rgba:a是设透明度值 应用:background:rgb(255,255,255,0.5) color:rgb(255,255,255,0.5) border:1px solid rgb(255, ...