好久没更新自己的知识库,刚好借双十一的契机,用上了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. scvmm2008 错误 2941 0x80072efe

    该错误是由于vmm和主机之间的证书不匹配所导致的. 1. 运行mmc,文件=>添加管理单元=>添加证书=>计算机账户=>本地计算机. 2. 在下图各个目录证书下删除和vmm关联 ...

  2. [Erlang06]在Erlang shell怎么在目录A下编译目录B下的文件,并把生成文件统一放置目录C?

    问题描述: 我们想快速测试一个小功能,第一个反应就是打开Erl shell 直接输入,但是当想测试一个复杂的函数时,一般会写成一个*.erl文件,然后在shell下: cd(FileDir). c(F ...

  3. c#设计模式之:外观模式(Facade)

    一.引言 在软件开发过程中,客户端程序经常会与复杂系统的内部子系统进行耦合,从而导致客户端程序随着子系统的变化而变化,然而为了将复杂系统的内部子系统与客户端之间的依赖解耦,从而就有了外观模式,也称作 ...

  4. jQuery为DOM动态追加事件

    处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接jsrender写了个模板,但是后面有一个操作按钮,去查看数据详情,想到了jquery使用on进行事件委托,然后就开搞 最初是这样写的: ...

  5. webapi发布常见错误及解决方案

    webapi发布常见错误及解决方案 错误一: 错误:404 (Not Found) 解决方案: 在  <system.webServer>节点中添加如下模块: <modules ru ...

  6. WebSerervice webapi使用

    WebSerervice  webapi使用 1.传json参数: 2.返回json数据: 3.权限控制: Authorize特性:必须经过认证,请求头必须具有token信息 4.路由: 5.过滤器: ...

  7. iOS检测项目图片资源是否包含P3图片

    1.问题描述 我们需要知道的是在iOS9.3以下系统上,.ipa包内如果含有p3图片,将会导致严重的闪退问题,具体原因还请google,非本文的重点. 2.问题解决 拿到的如果是ipa包(不是则跳过) ...

  8. Linux centos 7安装

    Linux 安装 本章节我们将为大家介绍Linux的安装. 本章节以 centos6.4 为例. centos 下载地址: 可以去官网下载最新版本:https://www.centos.org/dow ...

  9. mycat 1.6.6.1 distinct报错问题

    以前在mysql5.7上执行如下sql语句没有问题 SELECT DISTINCT u.*,c.content userCategory FROM m_user u LEFT JOIN m_categ ...

  10. easyui页面上显示和PL/SQL编码问题

    在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...