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

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