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 , 获取权限.用户名.头像等 由于目前 ...
随机推荐
- 单例模式(Singleton)小记
概念 引用维基百科对单例的说明: 单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在. 继续引用维基百科的实现思路: 实现单例模式的思路是:一个类 ...
- centos7 守护进程
ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...
- 网易对象存储NOS图床神器
本文来自网易云社区 注:使用过程中有什么问题或建议欢迎到如下链接提交:http://note.youdao.com/noteshare?id=6321086fa4d7a6c003656354c1aa6 ...
- 洛谷P4705 玩游戏(生成函数+多项式运算)
题面 传送门 题解 妈呀这辣鸡题目调了我整整三天--最后发现竟然是因为分治\(NTT\)之后的多项式长度不是\(2\)的幂导致把多项式的值存下来的时候发生了一些玄学错误--玄学到了我\(WA\)的点全 ...
- [Swift实际操作]八、实用进阶-(6)通过属性进行对象间的消息传递
本文将演示,如何通过一个对象作为另一个对象的属性,从而通过设置属性的值,来实现对象之间的消息传递.首先打开自定义视图的代码文件(CustomView.swift) import UIKit //使当前 ...
- python+requests接口自动化测试框架实例详解
python+requests接口自动化测试框架实例详解 转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实 ...
- java字段中初始化的规律与如何用静态成员函数调用非静态成员
java字段中初始化的规律: 执行以下代码,出现的结果是什么? class InitializeBlockClass{ { field=200; } public int field=100; pub ...
- vue Vue-cli 笔记
之前用vue写项目都是用的es5,这几天看到小右弄了个命令行工具打算试水一下es6.结果老是报错,但是可以正常编译,虽然我不是处女座但是看到报错很不舒服.结果发现源代码最后一行要空一行,我心想这什么狗 ...
- Beautiful Soup解析网页
使用前步骤: 1.Beautiful Soup目前已经被移植到bs4,所以导入Beautiful Soup时先安装bs4库. 2.安装lxml库:如果不使用此库,就会使用Python默认的解析器,而l ...
- 欧拉筛(线性筛) & 洛谷 P3383 【模板】线性筛素数
嗯.... 埃氏筛和欧拉筛的思想都是相似的: 如果一个数是素数,那么它的所有倍数都不是素数.... 这里主要介绍一下欧拉筛的思路:(欧拉筛的复杂度大约在O(n)左右... 定义一个prime数组,这个 ...