您的位置:首页 > Web前端 > Vue.js

Vue.js 零基础实战——饿了吗APP(笔记)

2018-07-22 16:34 585 查看
  1. 熟读vue.js文档,对Vue.js有一定的基础了解,掌握基本的指令,动画的过渡以及组件的用法;
  2. 安装脚手架,前置任务,安装wekpack(不用担心版本问题,webpack自带npm),具备git(各种IDE自带git),也可以自己安装git(廖雪峰)

  3. 打开IDE终端,检查webpack的版本(确认webpack已安装),使用cd命令到相应的目录下,全局安装Vue-cli, ,安装完成,执行vue命令, ,此时说明安装完成,可以根据git提供的命令来安装,执行vue list命令,提示安装webpack的模板,选择想用的模板后,执行vue init webpack+项目名称,根据项目需求设置对应的需求;
  4. 脚手架生成后,可以在相应的目录下看到生成的模板文件,将其拖入到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
    });
    });
    }
    },

     

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: