Vue.js 零基础实战——饿了吗APP(笔记)
2018-07-22 16:34
585 查看
- 熟读vue.js文档,对Vue.js有一定的基础了解,掌握基本的指令,动画的过渡以及组件的用法;
-
安装脚手架,前置任务,安装wekpack(不用担心版本问题,webpack自带npm),具备git(各种IDE自带git),也可以自己安装git(廖雪峰);
- 打开IDE终端,检查webpack的版本(确认webpack已安装),使用cd命令到相应的目录下,全局安装Vue-cli, ,安装完成,执行vue命令, ,此时说明安装完成,可以根据git提供的命令来安装,执行vue list命令,提示安装webpack的模板,选择想用的模板后,执行vue init webpack+项目名称,根据项目需求设置对应的需求;
- 脚手架生成后,可以在相应的目录下看到生成的模板文件,将其拖入到IDE中,vue-cli 3.0中build文件中没有
这2个文件,需要在webpack.dev.confg.js中设置读取本地的json文件,相应代码如下:
[code]// local json exports const express = require('express'); const app = express(); var appData = require('../data.json'); var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings; var apiRoutes = express.Router(); app.use('/api', apiRoutes);
并在devSever对象中设置如下代码:
[code] 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 }); }); } },
相关文章推荐
- 【慕课网实战课程笔记】Vue.js高仿饿了么外卖App
- vue.js移动端app实战2
- vue.js移动端app实战1
- 【vuejs路由】vuejs 路由基础入门实战操作详细指南
- Vue.js实战系列---饿了么(1)基础知识
- Vue.js实战笔记Day1(vue-cli)
- 2018最新 Vue2.5开发去哪儿网App+从零基础入门到实战
- vue.js移动端app实战3:从一个购物车入门vue
- vue.js移动端app实战1:初始配置
- 2018目前最新Vue2.5开发去哪儿网App+从零基础入门到实战项目
- vue.js移动端app实战3:从一个购物车入门vue
- 微信小程序学习笔记 (小程序主体学习 二 逻辑层 app.js 基础食用方法)
- vue.js移动端app实战4:上拉加载以及下拉刷新
- vue.js移动端app实战1:初始配置详解
- vue.js基础笔记
- 最新Vue2.5从零基础入门到去哪儿网App实战项目开发全套
- vue.js移动端app实战3:从一个购物车入门vuex
- vue.js移动端app之上拉加载以及下拉刷新实战
- 最新Vue2.5开发去哪儿网App 从零基础入门到实战项目完整版
- Vue.js 源码全方位深入解析 实战课程 (1-5章带随堂笔记)