項目的結構如下：
項目資源准備
准備項目的各種圖片資源等等
注意：在webpack可以不用css sprite，直接用單張圖片，因為它會幫忙打包。
還有SVG圖片，放大之后不會影響質量，在移動端開發中，通常會把色彩單一的圖片做成SVG圖片。這些不是直接用，利用一些工具去把這些SVG圖片去轉化成一個叫圖標字體的文件，就可以在CSS引用了。
圖標字體制作
在項目開發前期，我們需要將設計師給的一些圖片制作成字體圖標
用一個叫IcoMoon的工具（https://icomoon.io/），它本身有的圖標可以查看IcoMoon App，要用自定義圖標的話可以在IcoMoon App里面點擊Import Icons，將所有的SVG圖片導入，就可以下載使用了。（里面的Get Code可以查看使用方法）。在下載之前可以點擊左上角的preferences，設置一下名稱：sell-icon
項目目錄設計
所有代碼都在src文件目錄下
入口文件main.js；
整個頁面的vue實例文件App.vue；
components：存放我們的組件文件，但我們不會像hello.vue一樣直接放在里面，我們會多件一個子目錄，像這樣：
這樣做是因為一個vue組件除了它的.vue文件以外，還可能包含一個圖片相關資源等等。之前說過，組件一個很重要的設計原則就是就近維護，把一個組件相關資源都放在一個目錄下。
還要創建一個common目錄，包好一個公共的模塊和資源，再在它其中添加三個子目錄。
在這兒項目中，我們使用的css預處理器是stylus。
結構如下圖：
並且將圖標字體生成的style.css添加到stylus目錄下，並改名為icon.styl，並改為stylus語法：把括號和分號去掉。
把asset目錄刪掉。
mock數據（模擬后台數據）
作為前端經常需要模擬后台數據，我們稱之為mock。
http://blog.csdn.net/sysuzjz/article/details/50317531
mock 的真正意義在於簡化測試環境。假如你現在要測試一個dao，但是你有不想構建數據庫環境就可以用mock模擬數據庫的返回結果。
數據來源：data.json
我們模擬的數據請求就是從這里面讀取數據，接下來就來編寫這些接口。
打開build目錄-dev-server.js（就是我們開發的webpack打包的一個入口文件），打開之后使用express這個框架去指一個nodeserver，我們也可以用express-router來編寫這些接口請求。
先拿到這些數據：
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, 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 }); });
要在express使用它，我們需要調用express的變量app：
app.use('/api', apiRoutes);
這樣我們就可以直接通過’/goods’來獲取數據了。
完整的dev-server.js：
完了之后要重新運行cnpm run dev，因為我們改的是node文件，然后http://localhost:8080/api/seller，這樣就返回了數據：
當然，我們也可以利用Google的插件jsonview將數據格式化。
http://localhost:8080/api/goods
http://localhost:8080/api/ratings
這樣數據也已經有了，接下來就可以來編寫這個頁面了。