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

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