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 , 获取权限.用户名.头像等 由于目前 ...
随机推荐
- RobotFramework与Jenkins集成发送邮件
转: A. 目标:实现RobotFramework的脚本定时自动执行,执行完后自动将结果发送到指定邮箱 B. 前提1. 配置好Robot Framework的环境,脚本可以正常运行 2. ...
- selenium三大浏览器driver下载地址
Chrome 点击下载chrome的webdriver: http://chromedriver.storage.googleapis.com/index.html 不同的Chrome的版本对应的ch ...
- cannot be resolved to a type (Java)
最近经常遇到cannot be resolved to a type (Java)报错,以下为在网上找到的解决方案: 1.先看看有没有引用相关jar包2.检查jar是否引用了多个相同的,或者多个jar ...
- VSM Import Cluster功能验证一(准备篇)
一.概述 本文档记录了VSM Import Cluster功能验证过程及过程中遇到的问题. 二.准备 2.1.网络规划 1) Management Network:VSM控制节点对其他节点的管理网络, ...
- coffee主题美化内容概要
1.具备自动生浮动标题目录(可隐藏) 2.页首目录概要 3.主标题有明显的标志背景颜色,二级标题缩进合适 4.一级.二级标题下图片缩进合适 5.博客签名 6.背景音乐列表 7.打赏 8.联系方式(QQ ...
- “全栈2019”Java第四十三章:封装
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- QTREE5 - Query on a tree V(LCT)
题意翻译 你被给定一棵n个点的树,点从1到n编号.每个点可能有两种颜色:黑或白.我们定义dist(a,b)为点a至点b路径上的边个数. 一开始所有的点都是黑色的. 要求作以下操作: 0 i 将点i的颜 ...
- 模拟实现strstr和strrstr
strstr函数用于判断str2是否是str1的子串,如果是,则返回str2在str1中首次出现位置的地址,如果不是则返回NULL.其模拟实现代码如下:#include<iostream> ...
- 2016级算法第二次上机-A.画个圈圈诅咒你
890 画个圈圈诅咒你 思路 简单题.题目中的圆并没有什么实际作用,简化成线段重合问题会更好理解些. 暴力解法:使用双重for循环会T到想哭,记住最直接的方法一般是过不了题的. 解法一:二分查找.空间 ...
- ElasticSearch 因为磁盘空间不够引起的数据插入错误。(message [ClusterBlockException[blocked by: [FORBIDDEN/12/index read-only / allow delete (api)];]])
ES升级到624测试从Kettle插入数据的时候,经常提示如下错误 message [ClusterBlockException[blocked by: [FORBIDDEN/12/index rea ...