vue(2.0)+vue-router(2.0)+vuex(2.0)实战
好久没更新自己的知识库,刚好借双十一的契机,用上了vue(2.0)+vue-router(2.0)+vuex(2.0)来开发公司的双十一电商活动。
项目目录结构:

运行:
npm install
npm run dev
浏览器会打开本地8080端口
效果(主要有两个页面):
商品列表页:

商品详情页:

总结(项目特点):
vue提供的脚手架工具可以快速让你搭建一个vue项目
支持热加载
提供proxy机制(解决前端接口跨域问题)
前后端分离
支持es6语法
eslint代码规范检查
由于项目涉及公司业务逻辑,所以删减所有和业务逻辑相关的代码,但不影响demo运行。项目demo地址: https://github.com/navyxie/vue-2.0-vue-router-2.0-vuex-2.0-
vue(2.0)+vue-router(2.0)+vuex(2.0)实战的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function
1.[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意,只要出现Error i ...
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作!
官方文档地址: ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479 ElemetUI: https://elemen ...
- 【vue系列之二】详解vue-cli 2.0配置文件
上次给大家分享的是用vue-cli快速搭建vue项目,虽然很省时间和精力,但想要真正搞明白,我们还需要对其原理一探究竟. 大家拿到一个项目,要快速上手,正确的思路是这样的: 首先,如果在项目有read ...
- Vue-Cli 3.0 + vue.config.js
虽然一直没有亲手搭建过vue项目,但是2.0的时候就开始自学(但并没有实践项目).然后公司最近有个人用3.0做了个项目,公司让我参与进去,我就顺便学习了一把3.0.(美滋滋) 因为电脑的环境还是之前自 ...
- vue-cli3.0 vue组件发布到npm
一.创建项目 1.vue create xxx (使用的版本是3.1.0) 2.把src目录名称改为examples 3.新建文件夹packages 用来存放组件 4.比如:新建Button组件 in ...
- 1.0 vue开篇之作
vue官网链接:https://cn.vuejs.org/ 一. vue简介 vue目前分为2.X版和3.X版,本文以2.X版为准,后续会更新3.X版本相关教程,建议从2.X版开始学起,因为此版本经过 ...
- vue+elementui搭建后台管理界面(7 vuex和mockjs的使用)
将权限管理应用到系统,首先做好登录, 点击登录按钮后,触发以下动作 vuex 中的 login 动作,设置 cookie vuex 中的 getuserinfo , 获取权限.用户名.头像等 由于目前 ...
随机推荐
- 只是误以为导入了maven依赖
背景: 之前用Spring Boot 开发了一个小项目,考虑将代码迁到Git服务器,由于之前没用过Git,在将代码正式签入Git服务器前, 我想先签入一个最简单的Spring Boot程序代码作为试验 ...
- C# usb设备的自动退出
using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...
- Flash Builder 4.6/4.7 注释以及字体大小修改
①修改字体颜色.粗体.斜体.下划线 英文版:windows-preferences-flex-editors-syntex coloring-ActionScript-Comment 汉化版:窗口—首 ...
- js vs2013中允许js访问json文件的解决方案
js vs2013中允许js访问json文件的解决方案 <?xml version="1.0" encoding="utf-8"?> <!- ...
- RabbitMq初探——php的一个demo
<?php /** * Created by PhpStorm. * Date: 2017/10/17 * Time: 16:21 */ class Rabbit { public functi ...
- django 配置xadmin
django xadmin本地安装 百度云 下载,激活码:bxhv,下载后不需要解压,直接本地 pip install xxx.zip django 版本需要 1.1.11, 1,添加app INST ...
- [agc004f]Namori 贪心
Description 现在给你一张NN个点MM条边的连通图,我们保证N−1≤M≤NN−1≤M≤N,且无重边和自环. 每一个点都有一种颜色,非黑即白.初始时,所有点都是白色的. 想通过执行 ...
- 洛谷P3806 【模板】点分治1
题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接下来m行每行询问一个K 输出格式: 对于 ...
- PHP网上支付
1,网上支付方式两类:企业与银行对接和通过中间公司间接与银行对接. (1),企业与银行对接,优点:因为直接与银行进行财务结算,交易资金结算比较安全.适合资金流量比较大的企业,这种方案适合于,每月结算金 ...
- java操作AWS S3一些坑记录
1,aws sdk jar版本不一致问题 一开始我在pom.xml中只配置了如下aws-java-sdk-s3 <!-- https://mvnrepository.com/artifact/c ...