一·需求分析

二，製作css字型圖示的製作和使用

前面已經有人做過總結，我就直接引用了

css字型圖示的製作和使用。

三，專案目錄結構設計

1,每一個元件都單獨建立一個資料夾，例如商品頁建立goods資料夾，goods資料夾放商品頁元件，goods.vue以及商品頁需要用到的圖片等資源。就近維護。

在src目錄下再新建一個common資料夾，存放公共的js,css以及字型圖示檔案·。

三，mock資料（模擬後臺資料）

1，首先我們有一個data.json,這個檔案儲存的就是我們需要的資料，它的位置與（index.html）同級。模擬的資料請求是從data.json中讀取資料。

2，在此次開發過程中要去本地資料地址進行請求，而原版配置在dev-server.js中，新版vue-webpack-template已經刪除dev-server.js,改用webpack.dev.conf.js代替，所以配置本地訪問在webpack.dev.conf.js裡配置即可。

在webpack.dev.conf.js中新增以下程式碼：

/**載入模擬資料*/
const express = require('express')
const app = express() //請求server
var appData  =require('../data.json'); //載入本地資料檔案
 

var seller = appData.seller  //獲取對應的本地資料
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api',apiRoutes); //通過路由請求資料

2）編寫路由及相應介面

呼叫get方法，傳入seller介面。傳送請求，服務端接收請求，返回給客戶端一個json型別的資料。（包括 errno 及資料），其中 errno 是開發規範所有，當其值為0時，表示返回的資料正常，當遇到一些比如許可權限制時，errno 可能不為0，具體值是由也業務方規定的。因為本次專案使用的是模擬資料，所以 errno 一定為0。

 before(app){
      app.get('/api/seller',(req,res)=>{
        res.json({
          errno:0,
          data:seller
        }) //介面返回json資料，上面配置的資料seller就複製給data請求後呼叫
      }),
        app.get('/api/goods',(req,res)=>{
          res.json({
            errno:0,
            data:goods
          }) //介面返回json資料，上面配置的資料seller就複製給data請求後呼叫
        }),
        app.get('/api/ratings',(req,res)=>{
          res.json({
            errno:0,
            data:ratings
          }) //介面返回json資料，上面配置的資料seller就複製給data請求後呼叫
        })
    }

3）執行

npm run dev,啟動後輸入http://localhost:8080/api/seller，如果資料正常顯示，則資料能正常返回。