vue新vue-cli3环境配置和模拟json数据的实例

下面我将给出“Vue新vue-cli3环境配置和模拟json数据的实例”的详细攻略。

环境配置

1. 安装Node.js

在官网下载 Node.js，选择对应系统的版本进行安装。

1. 安装Vue CLI 3

打开命令行终端，输入命令：

npm install -g @vue/cli

等待安装完成即可。

创建Vue项目

1. 创建项目

打开命令行终端，进入要创建项目的目录，输入命令：

vue create my-project

其中my-project为项目名称，可以根据自己的需要修改。

1. 运行项目

项目创建完成后，可以输入以下命令运行项目：

cd my-project
npm run serve

等待编译完成后，打开浏览器，访问http://localhost:8080即可查看项目。

模拟json数据

1. 安装json-server

打开命令行终端，输入以下命令安装json-server：

npm install -g json-server

1. 创建json文件

在项目根目录下创建db.json，并添加以下内容：

{
  "users": [
    {"id": 1, "name": "Tom"},
    {"id": 2, "name": "Jerry"}
  ]
}

1. 运行json-server

在命令行终端中输入以下命令启动json-server：

json-server --watch db.json

此时，访问http://localhost:3000/users即可查看模拟的json数据。

示例说明

示例1：向json-server中添加数据

1. 在db.json中添加一条数据：

{
  "users": [
    {"id": 1, "name": "Tom"},
    {"id": 2, "name": "Jerry"},
    {"id": 3, "name": "Mike"}
  ]
}

1. 在Vue组件中使用axios向json-server发送post请求添加数据：

import axios from 'axios'

export default {
  name: 'AddUser',
  data () {
    return {
      name: ''
    }
  },
  methods: {
    addUser () {
      axios.post('http://localhost:3000/users', { name: this.name })
        .then(() => {
          alert('添加成功')
          this.$router.replace('/')
        })
        .catch(() => {
          alert('添加失败')
        })
    }
  }
}

示例2：从json-server中获取数据

1. 在Vue组件中使用axios向json-server发送get请求获取数据：

import axios from 'axios'

export default {
  name: 'UserList',
  data () {
    return {
      users: []
    }
  },
  mounted () {
    axios.get('http://localhost:3000/users')
      .then(response => {
        this.users = response.data
      })
  }
}

1. 在模板中渲染获取到的数据：

<template>
  <div>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        <span>{{ user.name }}</span>
      </li>
    </ul>
  </div>
</template>