script里面不使用export default和data的相关代码

在 `App.vue` 中实现购物车删除功能时，如果不想使用 `export default` 和 `data` 相关代码，可以采用以下方式来组织脚本部分：

### App.vue

<template>
  <div class="cart">
    <h1>购物车</h1>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入 Vue
import Vue from 'vue';

// 定义组件
new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { name: '商品1', price: 100 },
        { name: '商品2', price: 200 },
        { name: '商品3', price: 300 }
      ]
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});
</script>

<style scoped src="./css/bootstrap.mini.css"></style>

### 解释

1. **模板部分**:
- 使用 `v-for` 指令遍历 `items` 数组，生成每个商品的列表项。
- 每个列表项中包含一个按钮，点击按钮时调用 `removeItem` 方法并传入当前项的索引。

2. **脚本部分**:
- 不使用 `export default`，而是直接创建一个新的 Vue 实例。
- 在 `data` 函数中返回初始数据 `items`。
- 在 `methods` 对象中定义 `removeItem` 方法，该方法通过 `splice` 方法从 `items` 数组中移除指定索引的元素。

3. **样式部分**:
- 使用 `scoped` 属性将样式限制在当前组件内。
- 通过 `src` 属性引入外部 CSS 文件 `bootstrap.mini.css`。

这种方式虽然没有使用 `export default` 和 `data` 属性，但仍然能够实现相同的功能。