vue 全局注册img自定义指令引入axios

可以通过以下方式，实现在 Vue 中全局注册 img 自定义指令并引入 axios：

1. 创建一个 Vue 自定义指令：

// main.js
import Vue from 'vue'
import axios from 'axios'

Vue.directive('img', {
  inserted: function (el, binding) {
    axios.get(binding.value).then(response => {
      el.setAttribute('src', response.data)
    })
  }
})

2. 在需要使用的组件中，将需要的图片地址传入 img 指令：

<template>
  <div>
    <img v-img="'/api/img/1.png'">
  </div>
</template>

这样，在组件渲染时，会通过 axios 发送请求获取图片地址并设置到 img 标签的 src 属性中。同时，由于该指令被全局注册，因此可以在任何组件中使用。

相关问题

vue购物商城期末大作业

### 使用 Vue.js 开发购物商城项目的期末大作业示例教程

#### 项目初始化与环境配置
为了快速启动基于 Vue.js 的移动端购物商城项目，推荐使用 Vue CLI 进行项目创建。通过命令 `npm install -g @vue/cli` 可以安装 Vue CLI 工具[^1]。

npm install -g @vue/cli

接着可以通过如下命令来新建一个 Vue 项目：

vue create my-shopping-mall
cd my-shopping-mall

#### 配置路由功能
为了让应用支持多页面浏览体验，在此引入 Vue Router 来处理不同视图间的导航逻辑。安装并设置好之后，可以在 src/router/index.js 文件内定义各个页面路径及其对应的组件。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;

#### 数据请求管理
对于网络通信部分，则采用 Axios 库来进行 API 接口调用操作。这使得开发者能够轻松地向服务器发送 GET 或 POST 请求，并接收返回的数据用于渲染界面元素。

// main.js 中全局注册 axios 实例
import axios from "axios";
app.config.globalProperties.$http = axios;

// 组件内部发起请求的例子
this.$http.get('/api/products').then(response => {
  this.products = response.data.items;
});

#### 商品列表展示
在首页显示商品概览信息时，通常会遍历 JSON 数组中的每一项产品对象，将其映射成 HTML 结构片段呈现在屏幕上。下面是一段简化版的商品卡片布局代码。

<div v-for="product in products" :key="product.id">
  <img :src="product.image_url"/>
  <h3>{{ product.title }}</h3>
  <p>${{ product.price }}</p>
</div>

#### 添加到购物车功能实现
当用户点击加入购物车按钮后，应该更新本地存储的状态记录所选物品的数量变化情况。这里可以利用 Vuex Store 来集中管理和同步多个地方使用的共享状态数据。

// store/modules/cart.js
mutations: {
  ADD_TO_CART(state, productId){
    const item = state.cart.find(i=>i.id===productId);
    if(item){
      item.quantity++;
    }else{
      state.cart.push({id: productId, quantity: 1});
    }
  }
}