Web前端-Vue.js必备框架（五）

摘要：前端必备框架五页面组件，商品列表组件，详情组件，购物车清单组件，结算页组件，订单详情组件，订单列表组件。生命周期创建阶段更新阶段销毁阶段创建阶段更新阶段，多次执行销毁阶段函数式组件无状态，无实例，没有生命周期，没有上下文。

Web前端-Vue.js必备框架（五）

页面组件，商品列表组件，详情组件，购物车清单组件，结算页组件，订单详情组件，订单列表组件。

vue-router 路由
vuex 组件集中管理
webpack
vue-cli

node下载：

http://nodejs.cn/

node-v
使用vue-cli脚手架搭建项目

vue+webpack+es6

https://github.com/vuejs/vue-cli

// 全局下载工具
npm install -g vue-cli
// 下载基于webpack模板项目
vue init webpack Smartisan
cd Smartisan
// 下载项目依赖的所有模块
npm install
npm run dev

// 淘宝镜像
cnpm install -g vue-cli

vue init webpack Smartisan

// 进入项目
cd Smartisan
// 运行我们的项目
npm run dev

cnpm install vuex --save

npm install vuex --save

引入Vuex，它是为vue开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，以相应的规则保证状态以一种可预测的方式发生变化。

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {
    pjtnews: 0,
    count: 1
}

const mutations = {
    add(state) {
        state.count += 1;
    },
    reduce(state) {
        state.count -= 1;
    }
}
export default new Vuex.Store({
    state,
    mutations
});

计算属性

computed数据缓存，响应式的数据类型，减少模板中计算逻辑，依赖固定的数据类型。

 
 {{ reversedMessage1 }} 
 
 {{ reversedMessage2 }} 
 
 {{ now }} 
 update