windows10 上浅尝vue js好记性不如烂笔头之一

windows vue
大前端
发布日期:   2018-09-02
文章字数:   1.2k
阅读时长:   5 分
阅读次数:  

vuejs学习笔记—-vue安装、数据初始化、数据mock
简书地址

说实话，在windows配置前端不是不可以，但是确实比用mac麻烦多了（说的好像我是mac老手似的，其实只是有几个月的使用经验而已），曾记得，当年搞react-native环境就是这样，搞python环境也是一样，再到如今想搞vue，还是这样。

不过也不是不可能，只要你愿意折腾，不放弃（其实是买不起mac）。

安装环境

1、安装node，到今天（2018-09-10教师节），node最新版是10.8了，但是因为几个月前搞过vue，安装的node是8.6.0，今天升级以后反而连vue init都不能用了，所以不得已回退到8.6.0，所以还是使用稳定版比较稳妥。直接到官网下载si文件下一步下一步傻瓜式安装即可。

2、安装webpack

$ npm install -g webpack

3、安装vue-cli

$ npm install -g vue-cli

4、初始化项目

$ vue init webpack demo

5、运行项目

$ npm install
$ npm run dev

默认访问端口是8080，访问即可
hello world

使用json-server模拟REST API

因为是学习，老老实实写后端接口，再给前端调用，确实有些头重脚轻，我选择了json-server用来mock数据。

  • 安装服务
    $ npm install json-server -g
  • 创建文件
    在项目根目录新建/mock文件夹，并且在mock目录下新建db.json文件，内容如下：
{
    "list": [
      {
        "id": 1,
        "name": "张三",
        "tel": "15223810923"
      },
      {
        "id": 2,
        "name": "李四",
        "tel": "15223810923"
      },
      {
        "id": 3,
        "name": "王二",
        "tel": "15223810923"
      },
      {
        "id": 4,
        "name": "陈五",
        "tel": "15223810923"
      },
      {
        "name": "赵六",
        "tel": "123454323",
        "id": 5
      },
      {
        "name": "赵六",
        "tel": "123454323",
        "id": 6
      },
      {
        "name": "赵六",
        "tel": "123454323",
        "id": 7
      }
    ],
    "users": [
      {
        "id": 1,
        "name": "陈五",
        "sex":"male",
        "tel": "12345678",
        "auther":{
          "name":"陈五",
          "age":"25"
        }
      },
      {
        "id": 2,
        "name": "王二",
        "sex":"male",
        "tel": "15223810923",
        "auther":{
          "name":"王二",
          "age":"22"
        }
      }
    ],
    "user": {
        "id": 1,
        "name": "陈五",
        "tel": "15223810923"
      }
      ,
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" },
     "goods": {
        "data" :[
        { "price": "69.9", "title": "德芙", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t3688/270/776223567/128582/fa074fb3/58170f6dN6b9a12bf.jpg!q50.jpg.webp" },
        { "price": "63", "title": "费列罗", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t613/100/1264998035/221234/1a29d51f/54c34525Nb4f6581c.jpg!q50.jpg.webp"},
        { "price": "29.9", "title": "大米", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t1258/40/17387560/108696/aced445f/54e011deN3ae867ae.jpg!q50.jpg.webp"},
        { "price": "54.9", "title": "安慕希", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2734/15/680373407/215934/3abaa748/572057daNc09b5da7.jpg!q50.jpg.webp"},
        { "price": "58", "title": "金典", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2482/145/1424008556/91991/d62f5454/569f47a2N3f763060.jpg!q50.jpg.webp"},
        { "price": "60", "title": "味可滋", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2368/3/874563950/70786/7b5e8edd/563074c8N4d535db4.jpg!q50.jpg.webp" },
        { "price": "248.00", "title": "泸州老窖", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t283/166/1424018055/189580/7c0792b7/543b4958N05fa2feb.jpg!q50.jpg.webp"},
        { "price": "328.8", "title": "剑南春", "img": "http://m.360buyimg.com/babel/s350x350_g15/M05/1A/0A/rBEhWlNeLAwIAAAAAAHyok3PZY0AAMl8gO8My0AAfK6307.jpg!q50.jpg.webp"},
        { "price": "49.00", "title": "蓝莓", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2332/148/2952098628/94387/e64654e2/56f8d76aNb088c2ab.jpg!q50.jpg.webp" },
        { "price": "68", "title": "芒果", "img": "http://m.360buyimg.com/n0/jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q70.jpg"}
      ]
    }
  }

  • 运行json-server

    json-server db.json -p 8080

    指定rest api在8080端口上运行，使用http://127.0.0.1:8080/goods/查看。

  • 快捷启动
    为了方便，再创建一个 package.json 文件，写入

    {
"scripts": {
  "mock": "json-server db.json --port 3003"
}
}

    然后使用到 /mock 目录下执行 npm run mock 命令，如果成功会出现

$ npm run mock

> @ mock D:\Git\demo\vue\demo\mock
> json-server db.json --port 8080


  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:8080/list
  http://localhost:8080/users
  http://localhost:8080/user
  http://localhost:8080/posts
  http://localhost:8080/comments
  http://localhost:8080/profile
  http://localhost:8080/goods

  Home
  http://localhost:8080

如果不成功请检查 db.json 文件的格式是否正确。
api.png

  • 使用本地api
    代码：
    created () {   /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
    const Http = new Vue;
    this.$http.get('http://127.0.0.1:8080/goods').then((data) => {   /* 调用vue的ajax来请求数据，promise语法，并用es6的箭头函数 */
      console.log('===================================')
      console.log(data);
      console.log('===================================')
      this.items = data.body.data;
    })
}
    但是这样操作会报错,错误如下：
    errorage.png
    这是因为没有引入vue-resource导致的，可以参考Cannot read property ‘get’ of undefined” in vuejs和vue引入vue-resource无法使用$http.get。

vue-resource.png

最终实现的效果如图：
goods

核心参考文档：https://www.jianshu.com/p/7c5ccfac3fa8

参考

https://www.cnblogs.com/itfantasy/p/6043111.html
https://blog.csdn.net/sinat_17775997/article/details/77824878

视频和源码

视频共享：
链接: https://pan.baidu.com/s/18TFC0-VSCIWFo977p4YcTQ
提取码: rjcp

源代码共享：
https://gitee.com/marvinma/vue2-pc

windows vue
赏
评论
  目录