好久没更新自己的知识库，刚好借双十一的契机，用上了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. 菜鸟的Xamarin.Forms前行之路——原生Toast的简单实现方法

    项目中信息提示框,貌似只有个DisplayAlert,信息提示太过于单一,且在有些场合Toast更加实用,以下是一个简单的原生Toast的实现方法 项目地址:https://github.com/we ...

  2. SQL Server分页模板

    SQL Server分页模板 WITH T AS ( SELECT ROW_NUMBER() OVER(ORDER BY AlbumId ) AS row_number, * FROM (SELECT ...

  3. ajax 多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题

     多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题 浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有问 ...

  4. Sublime text3!行首,行尾,批量编辑!

    1.Windows下的操作操作步骤 1.Ctrl + H 2.打开正则,输入^,然后Find All,查找所有的行首 3.打开正则,输入$,然后Find All,查找所有的行尾 4.光标闪动,就可以进 ...

  5. 极大似然估计MLE 极大后验概率估计MAP

    https://www.cnblogs.com/sylvanas2012/p/5058065.html 写的贼好 http://www.cnblogs.com/washa/p/3222109.html ...

  6. “全栈2019”Java第二十六章：流程控制语句中循环语句do-while

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

  7. [ActionScript 3.0] 常用的正则表达式

    as 3.0常用的正则表达式: /* * 去除字符串前面的空格和跳格符 */ var src:String=" Hello! "; trace(src); //原文本 trace( ...

  8. jquery源码解析：jQuery工具方法when详解

    我们先来看when方法是如何使用的: var cb = $.when();   //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...

  9. [独家] Adobe Flash 直接复制元件不改变原元件

    正在考网页高级考证,然后会需要做Adobe Flash相关操作.在网上看了下,基本都是错误的.于是,自己研究解决该问题. 首先,你需要更改元件不改变原文件是不可能的. 所以: 1.你需要对原元件所在的 ...

  10. 原生js 实现旋转木马

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...