摘要：前端必備框架五頁面組件，商品列表組件，詳情組件，購物車清單組件，結(jié)算頁組件，訂單詳情組件，訂單列表組件。生命周期創(chuàng)建階段更新階段銷毀階段創(chuàng)建階段更新階段，多次執(zhí)行銷毀階段函數(shù)式組件無狀態(tài)，無實(shí)例，沒有生命周期，沒有上下文。

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

頁面組件，商品列表組件，詳情組件，購物車清單組件，結(jié)算頁組件，訂單詳情組件，訂單列表組件。

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

node下載：

http://nodejs.cn/

node-v
使用vue-cli腳手架搭建項(xiàng)目

vue+webpack+es6

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

// 全局下載工具
npm install -g vue-cli
// 下載基于webpack模板項(xiàng)目
vue init webpack Smartisan
cd Smartisan
// 下載項(xiàng)目依賴的所有模塊
npm install
npm run dev

// 淘寶鏡像
cnpm install -g vue-cli

vue init webpack Smartisan

// 進(jìn)入項(xiàng)目
cd Smartisan
// 運(yùn)行我們的項(xiàng)目
npm run dev

cnpm install vuex --save

npm install vuex --save

引入Vuex，它是為vue開發(fā)的狀態(tài)管理模式，采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

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
});

計(jì)算屬性

computed數(shù)據(jù)緩存，響應(yīng)式的數(shù)據(jù)類型，減少模板中計(jì)算邏輯，依賴固定的數(shù)據(jù)類型。

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