好久没更新自己的知识库，刚好借双十一的契机，用上了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. 学习笔记之Struts2—工作原理图

    本文以Struts2的官方工作原理图作为主线讲解(参考部分书籍与视频) 1.初始概念 struts2是web.xml进行配置的一个过滤器,当web项目启动的时候,这个过滤器就会生效. 2.web.xm ...

  2. Razor TagHelper实现Markdown转HTML

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 用途 Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

  3. 工作中的Buff加成-结构化思考力：第一章：认识结构化思维及其作用

    一:引言 为了更好的说明结构思考力,我们先来做几个小测试. PS:如果你能做到,请留言,因为我要和你交好友,因为你是人才啊,可以挖一挖,挖到我的公司中. 第一个测试:请在三秒内记住下列数字.数字顺序不 ...

  4. MySQL数据库（四）

    操作数据库表的内容: -- 向表中插入数据:insert into table_name values(now(),'a'); insert into student (id,name,sex) va ...

  5. Android 虚拟机访问本地服务器的地址

    http://10.0.2.2:8080/test/ 比如 localhost:8080 为 tomcat 地址,然后 test 是 tomcat 目录下 webapps 的子目录. 10.0.2.2 ...

  6. linux 安全配置随笔

    1. 禁止Ctrl+Alt+Del直接重启服务器 /bin/mv /etc/init/control-alt-delete.conf /etc/init/control-alt-delete.conf ...

  7. 编译图像质量分析库iqa

    介绍   iqa库是我在GitHub上偶然发现的一个具有MSE, PSNR, SSIM, MS-SSIM等图像质量分析算法的库,觉得还不错,就把它下载下来编译,编译后生成静态的库.以下是我总结的编译方 ...

  8. replace函数结合正则表达式实现转化成驼峰与转化成连接字符串的方法

    //连接符转成驼峰写法 function toCamel(str){ var reg=/-(\w)/g; return str.replace(reg,function(){ return argum ...

  9. 使用cookie下次自动登录

    登录时勾选了自动登录处理: 1.加密账号和IP,保存在cookie中,cookie('auto', $value, $time) 2.解密cookie,取出账号和上次IP,判断上次IP==当前IP.账 ...

  10. Python开发转盘小游戏

    Python开发转盘小游戏 Python  一 原理分析 Python开发一个图形界面 有12个选项和2个功能键 确定每个按钮的位置 每个按钮的间隔相同 点击开始时转动,当前选项的背景颜色为红色,其他 ...