44、Vue.js 应用开发与部署全流程

Vue.js 应用开发与部署全流程

1. 完善 Vue.js 应用功能

1.1 基础组件配置

首先进行基础组件的配置，以下是相关代码：

import { defineComponent, onMounted } from "vue";
import ProductList from "./views/ProductList.vue";
import { HttpHandler } from "./data/httpHandler";
import { useStore } from "vuex";

export default defineComponent({
    name: "App",
    //components: { ProductList },
    setup() {
        const store = useStore();
        const handler = new HttpHandler();
        onMounted(() => store.dispatch("loadProducts", handler.loadProducts));
    }
});

router - view 元素用于显示所选组件。保存更改后，浏览器将显示 /products URL 并展示 ProductList 组件的内容。

1.2 添加 URL 导航

为了实现从 Header