準(zhǔn)備工作

安裝vue-cli

npm install vue-cli

初始化webpack模板

vue init webpack [項(xiàng)目名]

注：填寫到ESLint選項(xiàng)時選yes，preset為standard，剩下的karma和nightwatch為no。

安裝依賴

npm install

運(yùn)行

npm run dev

需求分析

相關(guān)設(shè)計(jì)稿

點(diǎn)擊公告和數(shù)字時，展示浮層，點(diǎn)擊x，浮層關(guān)閉。
內(nèi)容區(qū)：商品對應(yīng)的區(qū)塊高亮。當(dāng)商品數(shù)超過可視區(qū)，兩邊的列表可以滾動。點(diǎn)擊加號加入購物車，當(dāng)購物車總價超過最小配送費(fèi)時，付款按鈕高亮。購物車中商品數(shù)量大于0，則展示商品列表。

商品詳情頁：自適應(yīng)大圖，點(diǎn)擊購物車進(jìn)入購買流程；底部為評論區(qū)。
評論頁：自適應(yīng)滾動。
商家詳情頁：圖可以左右滾動，收藏按鈕收藏商家。

項(xiàng)目資源

下載地址

文件目錄

項(xiàng)目目錄

所有代碼寫在src下，svg轉(zhuǎn)換的字體copy到fonts目錄下，style.css拷貝到stylus目錄下，把該文件的擴(kuò)展名改為【.styl】，并把文件中所有分號和大括號刪除，刪除assets目錄

mock數(shù)據(jù)

把下載的資源中【data.json】的放到項(xiàng)目根目錄下，并在【dev-server.js】中添加代碼，如下

var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings

//定義路由
var apiRoutes = express.Router()
apiRoutes.get('/seller', function (req, res) {
    res.json({
        errno: 0, // 請求正常的標(biāo)識
        data: seller
    })
})

apiRoutes.get('/goods', function (req, res) {
    res.json({
        errno: 0,
        data: goods
    })
})

apiRoutes.get('/ratings', function (req, res) {
    res.json({
        errno: 0,
        data: ratings
    })
})
app.use('/api',apiRoutes) // express使用api

測試

先npm run dev，測試是否通過；再在瀏覽器地址欄中輸入【.../api/seller】查看是否存在代碼【這里需要安裝Chrome的jsonview擴(kuò)展】，之后測試goods和ratings。