好久没更新自己的知识库，刚好借双十一的契机，用上了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. robot中使用evaluate转化数据格式

    如果你使用robot却没有用过evaluate,那你将永远禁锢在框架中. json对象格式入参可以使用字典格式直接传入,但最近有一个接口测试的入参是一个json数组,在传参时总是提示请求参数不合法, ...

  2. map的回调函数

    问题:--js   (['1','2','3']).map(parseInt) 第一眼看到这个题目的时候,脑海跳出的答案是 [1, 2, 3],但是真正的答案是[1, NaN, NaN]. 首先让我们 ...

  3. Nginx源码编译

    1. 概述 有时由于添加了自己编写的c++模块,或者改了源码的一些名称.配置什么的,需要自行编译nginx. 可以先下下来源码,然后需要的话就自己改下源码或增加模块,最后再编译成linux或者wind ...

  4. layer模态窗简单使用

    layer.open({ type: 1,//模态窗种类 skin: "layui-layer-rim", title: "编辑信息", area: [&quo ...

  5. zTree API中刷新树没效果

    想刷新树,但是根据API来的refresh无效 ---------------------------------------------------------------------------- ...

  6. BZOJ3531-[Sdoi2014]旅行（树剖+线段树动态开点）

    传送门 完了今天才知道原来线段树的动态开点和主席树是不一样的啊 我们先考虑没有宗教信仰的限制,那么就是一个很明显的树剖+线段树,路径查询最大值以及路径和 然后有了宗教信仰的限制该怎么做呢? 先考虑暴力 ...

  7. Linux下的信号量

    首先,什么是信号量? 信号量的本质是一种数据操作锁,它本身不具有数据交换的功能,而是通过控制其他的通信资源(文件,外部设备)来实现进程间通信,它本身只是一种外部资源的标识.信号量在此过程中负责操作的互 ...

  8. POJ2279 Mr Young's Picture Permutations

    POJ2279 Mr Young's Picture Permutations 描述: 有N个学生合影,站成左对齐的k排,每行分别有N1,N2…NK个人,第一排站最后,第k排站之前.学生身高依次是1… ...

  9. 斐讯K2P通过配置文件开启telnet的原理分析

    看过几篇教程之后我已经知道怎么备份固件了.但是现在有一个问题,我的本意是把K2P原机带的固件备份出来,用教程上的方法进行开启telnet.备份固件等操作是否会改变固件呢?下面我们来验证这个问题. Op ...

  10. js 实现tab栏切换效果

    效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...