項目vue2.0仿外賣APP（三）

項目的結構以下：

     

     

     

項目資源準備

準備項目的各類圖片資源等等

注意：在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

這樣數據也已經有了，接下來就能夠來編寫這個頁面了。