好久没更新自己的知识库，刚好借双十一的契机，用上了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)实战的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  3. [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 ...

  4. ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作！

    官方文档地址: ​ ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479 ​ ElemetUI: https://elemen ...

  5. 【vue系列之二】详解vue-cli 2.0配置文件

    上次给大家分享的是用vue-cli快速搭建vue项目,虽然很省时间和精力,但想要真正搞明白,我们还需要对其原理一探究竟. 大家拿到一个项目,要快速上手,正确的思路是这样的: 首先,如果在项目有read ...

  6. Vue-Cli 3.0 + vue.config.js

    虽然一直没有亲手搭建过vue项目,但是2.0的时候就开始自学(但并没有实践项目).然后公司最近有个人用3.0做了个项目,公司让我参与进去,我就顺便学习了一把3.0.(美滋滋) 因为电脑的环境还是之前自 ...

  7. vue-cli3.0 vue组件发布到npm

    一.创建项目 1.vue create xxx (使用的版本是3.1.0) 2.把src目录名称改为examples 3.新建文件夹packages 用来存放组件 4.比如:新建Button组件 in ...

  8. 1.0 vue开篇之作

    vue官网链接:https://cn.vuejs.org/ 一. vue简介 vue目前分为2.X版和3.X版,本文以2.X版为准,后续会更新3.X版本相关教程,建议从2.X版开始学起,因为此版本经过 ...

  9. vue+elementui搭建后台管理界面(7 vuex和mockjs的使用)

    将权限管理应用到系统,首先做好登录, 点击登录按钮后,触发以下动作 vuex 中的 login 动作,设置 cookie vuex 中的 getuserinfo , 获取权限.用户名.头像等 由于目前 ...

随机推荐

  1. Win RT Webview获取cookie

    方法1: HttpBaseProtocolFilter filter = new HttpBaseProtocolFilter(); var cookis = filter.CookieManager ...

  2. SQL命令行修改数据库

    增加列: alter table tableName add columnName varchar(30) 修改列类型:alter table tableName alter column colum ...

  3. 「AH2017/HNOI2017」礼物

    题目链接 戳我 \(Solution\) 应为我们可以将任意一个数列加上一个非负整数,即可以变为将一个数列加上一个整数(可以为负),我们将这个整数设为\(z\).所以要求的式子的变为: \[\sum_ ...

  4. linux命令之磁盘与文件系统管理命令（上）

    1.fdisk:磁盘分区工具 该命令是linux下常用的磁盘分区工具,但是只能给小于2TB的磁盘划分分区. 常用参数为-l,显示所有磁盘分区的信息. 示例: 1)显示磁盘分区列表 [root@boxi ...

  5. bzoj 4283 魔法少女伊莉雅

    题目大意 给定一个 $n$ 个点 $m$ 条边的带正权无向图.要求找一条路径满足: 它是一条简单路径 它是一条严格次短路 对于任何一条可能存在于最短路上的边,不能包含它的反向边. 不存在这条路径输出 ...

  6. ArchLinux下shadow服务报错

    用着Linux蓦然开机就报错了.我是个对报错很敏感的,而是是开机报错. 这个的严重性,听一位前辈说过:如果开机报错你都不理它,慢慢的它就会宕机. 报错内容: shadow服务是Linux下用于校队pa ...

  7. ArchLinux下Shell基础学习

    首先来认识脚本语言:通常指的是命令行界面的解析器.(来自维基的解释) 第一部分:认识Shell 大家可以看到这里使用了#!/bin/sh和!/bin/bash.可是俩者有什么区别呢?下图有解释. sh ...

  8. PHP将多维数组变成一维数组

    function reduceArray($array) { $return = []; array_walk_recursive($array, function ($x) use (&$r ...

  9. [原创]SSH密钥访问Git仓库配置

    SSH密钥并非为了解决拉取git仓库代码时,需要频繁输入密码的问题. SSH是一种比较安全的协议,可以用来免去远程登录Linux等服务器时需要输入密码的繁琐过程. 命令: ssh user@serve ...

  10. mysql里面 limit的奇效

    项目里面有遇到一个需求,查询一个表,先group by ,再按group 的count(*)进行倒序,取出每个group里面发表时间最新的一个纪录,之前的同事SQL是这样写的 SELECT * FRO ...