46 使用vue cli 写一个新增收货地址功能页面

好的，下面是一个简单的使用 Vue CLI 实现新增收货地址功能页面的示例：

1. 首先，安装 Vue CLI：

npm install -g @vue/cli

2. 创建一个新的 Vue 项目：

vue create address-book

3. 进入项目目录，安装需要的依赖：

cd address-book
npm install axios

4. 在 `src` 目录下创建一个新的组件 `AddAddress.vue`，并添加以下代码：

<template>
  <div>
    <h1>新增收货地址</h1>
    <form @submit.prevent="addAddress">
      <div>
        <label for="name">姓名</label>
        <input id="name" type="text" v-model="name">
      </div>
      <div>
        <label for="phone">电话</label>
        <input id="phone" type="text" v-model="phone">
      </div>
      <div>
        <label for="address">地址</label>
        <input id="address" type="text" v-model="address">
      </div>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      phone: '',
      address: '',
    };
  },
  methods: {
    addAddress() {
      axios.post('/api/address', {
        name: this.name,
        phone: this.phone,
        address: this.address,
      }).then(() => {
        this.$router.push('/address-book');
      });
    },
  },
};
</script>

这个组件包含一个表单，用户可以输入新的收货地址信息，并点击“保存”按钮提交表单。

5. 在 `router/index.js` 中添加路由，使得用户可以通过访问 `/add-address` 来加载 `AddAddress` 组件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import AddressBook from '../views/AddressBook.vue';
import AddAddress from '../views/AddAddress.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/address-book',
    name: 'AddressBook',
    component: AddressBook,
  },
  {
    path: '/add-address',
    name: 'AddAddress',
    component: AddAddress,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

6. 最后，在 `AddressBook.vue` 组件中添加一个链接，使得用户可以跳转到新增收货地址页面：

<template>
  <div>
    <h1>收货地址簿</h1>
    <ul>
      <li v-for="address in addresses" :key="address.id">
        {{ address.name }}，{{ address.phone }}，{{ address.address }}
      </li>
    </ul>
    <router-link to="/add-address">新增收货地址</router-link>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      addresses: [],
    };
  },
  created() {
    axios.get('/api/address').then((response) => {
      this.addresses = response.data;
    });
  },
};
</script>

这个组件会显示当前用户的收货地址列表，并在页面底部显示一个链接，用户可以点击该链接跳转到新增收货地址页面。

以上就是一个简单的使用 Vue CLI 实现新增收货地址功能页面的示例。当然，这只是一个基础的实现，实际项目中可能需要更复杂的逻辑和样式。