项目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

这样数据也已经有了，接下来就可以来编写这个页面了。