vue+node 打造简易商城系统

vue和react的相同之处

• 利用虚拟DOM实现快速渲染;
• 轻量级;
• 响应式组件;
• 服务器端渲染;
• 易于集成路由工具,打包工具,状态管理工具;
• 优秀的支持和社区;

vue.js
本身不是一个框架,
vue结合周边生态构成一个灵活的\渐进式的框架
声明式渲染-->组件系统-->客户端路由-->大规模状态管理-->构建工具
new Vue实例 component router vuex

vue核心思想

• 数据驱动(通过js和DOM是耦合的,关系密切的),
• 组件化(购物车模块,登录模块,公用的部分抽用出来) ,
  view(DOM)--->viewMOdel(Vue)--->Model(原生js对象)
  vue组件化: 可以拆成很小的颗粒;

Vue组件树:

如何实现双向数据绑定: Object.definedProperty()函数
------------------------------分割线----------------------------------
vue+node--------------掌握全栈的能力
主要讲什么,有哪些功能,使用到了那些技术栈
基于全栈开发一个商城系统
功能:涵盖了商品列表,购物车,地址,结算订单以及登录模块
技术栈: vue全家桶,ES6语法, express框架,DB使用mogo

vue 环境搭建以及vue-cli使用

Vue多页面应用文件引用

• 官网拷贝:
• npm 安装

package.json

package.json

vue配置介绍

build 是打包的配置文件所在的文件夹
config 是打包的配置,webpack的配置
src是源码
app.vue入口文件
main.js是项目的入口文件
.babelrc是配置文件,解析ES6语法的
.editorconfig 是编辑器的配置
.gitgnore是忽略提交的文件
index.html 是单页面应用的文件入口
package.json 是项目的 包含依赖库,辅助插件,引擎,浏览器的列表

vue基础语法介绍

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

router-view是组件的渲染
router-link是跳转

image.png

image.png

image.png

给router-view定义名字

vue-resource

image.png

从服务器端拿收据是get,

image.png

在

全局拦截器

导入axios

axios基础介绍

https://www.kancloud.cn/yunye/axios/234845 axios中文说明 API

API

AMD 是异步函数定义 依赖前置，

AMD

CMD 是同步函数定义 依赖就近

那个地方使用，那个地方require（“模块名称”）
淘宝团队出品

CMD

CommonJs规范是在nodeJs后端使用的，前端不支持的，

CommonJs