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扩展程序】
Vue-selller 饿了吗 - 准备工作的更多相关文章
- 基于vue模块化开发后台系统——准备工作
文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下v ...
- 用vue制作饿了么首页(1)
无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由 购物车 每部分先占住自己位置,然后挨个将这三部分分别 ...
- 【vue】饿了么项目-使用webpack打包项目
1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的& ...
- 【vue】饿了么项目-goods商品列表页开发
1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-sh ...
- 【vue】饿了么项目-header组件开发
1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: { 'v-header': header } 然后才能引用 <v-header :seller ...
- 【vue】饿了么项目-页面骨架开发
1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...
- Vue项目开发前的准备工作,node的安装,vue-cli的安装
一.安装node 1- 点击这里进入node官网下载 2- 3- 下载完成是这样的 4- 双击打开进行安装,一路next,安装完成是这样 5- 打开cmd进入安装node的文件夹,输入node ...
- 【vue】饿了么项目的相关笔记链接
http://www.mtons.com/content/1819.htm http://www.tuicool.com/articles/F7BnaiY https://segmentfault.c ...
- vue的饿了么写作感受
1.在重复使用的组件中,要把重复使用组件的需要在数据的请求的地方设置为在富组件中,通过props船只到子组件,这样在重复调用次组件的时候既可以很好的避免组件的值的冲突 2.getData的使用,把所有 ...
随机推荐
- 构建工具:grunt、Glup、webpack
相关代码已上传至github 怎么是项目构建? 编译项目中的js, sass, less: 合并js/css等资源文件: 压缩js/css/html等资源文件: JS语法的检查. 构建工具的作用? 简 ...
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- js的微任务和宏任务
1.机制如下: 注意一点: 宏任务需要多次事件循环才能执行完,微任务是一次性执行完的: 2.宏任务macrotask: (事件队列中的每一个事件都是一个macrotask) 优先级:主代码块 > ...
- Python处理数据
由于找实习,要学习python处理数据,python连接mysql,python读写文件,python读写xlsx文件,这些只要引入了相关的包,就非常容易,处理过程非常清晰.模块如果封装的好,没怎么学 ...
- Spark RDD Transformation 简单用例(三)
cache和persist 将RDD数据进行存储,persist(newLevel: StorageLevel)设置了存储级别,cache()和persist()是相同的,存储级别为MEMORY_ON ...
- Steeltoe之Service Discovery篇
在前文一窥Spring Cloud Eureka中,已经构建了基于Eureka的服务端与客户端,可用于实现服务注册与发现功能.而借助Steeltoe的类库,可以在.NET生态系统中使用Spring C ...
- robot framework ——关键字run keyword if 如何在一个条件下接多个执行语句,以及如何写复杂条件句
曾一度疯狂搜索run keyword if 的用法,帖子是挺多的,可惜,没有一个我想要的.现在我终于把我想要的用法,收集好了,在此总结下. 1.曾经天真的以为 run keyword if +条件 ...
- autofac生命周期入门(如何避免内存泄漏)
如果你是一个IOC新手,那么生命周期可能会比较难以理解.以至于谈到这个问题时,一些老手也时常表示疑虑和害怕.一个令人不安的问题就是-对象没有在合适的时机被销毁.这样一来内存的使用率就会一直攀升,直到程 ...
- Ubuntu下文件所属用户的说明
最近做项目发现,当你使用sudo建立新的文件或者目录时,该文件的所有者是root用户,此种情况下,使用tensorflow加速就会报错,除非你把文件的权限改成777,但是这样不安全. 纠正的做法是,建 ...
- 使用babel与@babel/node
安装 yarn add -D @babel/cli @babel/node 编译entry-server.js yarn babel ./src/ssr/entry-server.js --prese ...