Vue-selller 饿了吗 - 准备工作

安装脚手架vue-cli

npm install -g vue-cli　　

建立项目

vue init webpack sell(sell是项目名称）　

进入项目目录

cd sell

 

可以看目录结构:

ls      

ll -a　　

安装依赖

npm install

运行项目

npm run dev

 

项目都建立在src目录下，src目录下建文件夹 - 公共文件【common】- 公共文件下建3个文件夹：js、fonts、stylus

stylus：是css预处理器，和Less、Sass功能差不多，但语法略有区别

   

 查看文档【IconMoon图标字体制作】

字体图标库下载的包解压后：这里使用HBuilderX有 styl插件

1、复制fonts内容至 common - fonts 文件夹

2、复制 style.css 至common - stylus 文件夹

3、修改style.css 样式名称为有意义的：icon.styl

4、修改icon.styl文件为styl语法：删掉所有的分号；和大括号{}

   

 复制后

复制后

 

 

删掉assets目录

目录构成

复制data.json数据到项目中 和index.html同级

其中data数据含义：

　　　　　　　　seller：商家

　　　　　　　　goods：商品

　　　　　　　　ratings：评论

 

调用本地数据接口 配置

//请求本地数据的配置方法 在const portfinder = require('portfinder')之后开始写

 

var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings 

 

before(app){
          app.get('/api/seller', function(req, res){
              res.json({
                  errno:0,
                  data:seller
              })
          });
          app.get('/api/goods', function(req, res){
              res.json({
                  errno:0,
                  data:goods
              })
          });
          app.get('/api/ratings', function(req, res){
              res.json({
                  errno:0,
                  data:ratings
              })
          });
      },

重新npm run dev

http://localhost:8080/api/seller

http://localhost:8080/api/seller

即可查看数据，查看文档安装谷歌插件，才能看到格式化后的json数据【谷歌浏览器中安装JsonView扩展程序】