好久没更新自己的知识库，刚好借双十一的契机，用上了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. 获取vmware虚拟机模板

    在我们通过克隆虚机,需要用到虚机模板.在数据中心的目录下面有文件夹.模板和虚拟机,那么这里需要做的是根据类型做递归查询. private void GetTemplate() { System.Tex ...

  2. pipeline+sonar

    前提需要在项目根目录下新建sonar-project.properties文件,内容如下: # must be unique in a given SonarQube instance sonar.p ...

  3. “全栈2019”Java第三十二章：增强for循环Foreach语法

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. TCP/IP学习笔记（2）-数据链路层

    数据链路层有三个目的: 为IP模块发送和接收IP数据报. 为ARP模块发送ARP请求和接收ARP应答. 为RARP发送RARP请求和接收RARP应答 ip大家都听说过.至于ARP和RARP,ARP叫做 ...

  5. centos7中使用Rsync和inotify同步文件

    一. 环境说明 由于web服务器所提供的网站数据需要保持一致,但当服务器越来越多时,这些主机之间同步网站数据会很麻烦. 解决方案是在后端建立一个数据发布服务器,该服务器作为rsync客户端,通过ino ...

  6. Python常用功能函数

    Python常用功能函数汇总 1.按行写字符串到文件中 import sys, os, time, json def saveContext(filename,*name): format = '^' ...

  7. iOS学习笔记（1）－－认识Xcode6.1的Interface Builder和常用快捷键

    Interface Builder基本界面 红色区域为工具栏(Tool Bar) 蓝色区域为导航区(Navigator Area) 绿色区域为编辑区(Editor Area) 黑色区域是调试区(Deb ...

  8. POJ3666 Making the Grade

    POJ3666 Making the Grade 题意: 给定一个长度为n的序列A,构造一个长度为n的序列B,满足b非严格单调,并且最小化S=∑i=1N |Ai-Bi|,求出这个最小值S,1<= ...

  9. redis实现 msetex和 getdel命令

    1.redis本身不提供 msetex命令(批量增加key并设置过期时间) class RedisExtend { private static final Logger logger = Logge ...

  10. 为什么要选择RabbitMQ ，RabbitMQ简介，各种MQ选型对比

    原文:https://www.sojson.com/blog/48.html 前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: ...