Vue3，Axios，Vue Router + Bootstrap5：逐步构建你自己的前端框架

若是没有安拆Vue3的话，初始化安拆一下：

npm init vue@latest创建本身的项目：npm create vue vue3-bootstrap5

连结默认选项，一路enter。

根本的Vue3网站运行没问题。如下图所示:

安拆bootstrapnpm install bootstrap

翻开src/main.js并引入bootstrap，如下所示-

import { createApp } from 'vue'import App from './App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'/*import './assets/main.css'*/createApp(App).mount('#app')

留意：记得把 import './assets/main.css' 正文掉，因为它与bootstrap的CSS抵触。

把App.vue中主动生成的style/script等代码清理一下，加个bootstrap的navbar碰运气

<template> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="javascript:void(0)"><img class="img-fluid" src="./assets/logo.png" /></a> <button class="navbar-toggler" tyPE="button" data-bs-toggle="collapse" data-bs-target="#mynavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> <li class="nav-item"> <router-link to="/tutorials" class="nav-link">产物列表</router-link> </li> <li class="nav-item"> <a class="nav-link" href="#">联络</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="text" placeholder="找一找"> <button class="btn btn-PRimary" type="button">Go</button> </form> </div> </div> </nav> <main><!-- <TheWelcome />--> </main></template>

效果如下：

安拆收集恳求组件npm install axios

然后，在src文件夹下，我们创建http-common.js文件，如下所示：

import axios from "axios";export default axios.create({ baseURL: "https://api.unsplash.com/photos"});

我们将挪用unsplash网站的API加载图片。

创建 services/TutorialDataService.js，封拆恳求import http from "../http-common";class ProductDataService { code = "?client_id=5xFGLiWZbSLDC1ydv5VONFulJQEiFHe63dPwvqiwYGM&per_page=30" getAll() { return http.get("/" + this.code); }}export default new ProductDataService();

可按照需要，增加更多营业办法。

返回图片json格局的列表数据。下面将创建组件，会利用ProductDataService。

创建1个view组件：ProductsList.vue

用来展现产物图片墙

<template> <div class="masonry"> <div class="item" :class="{ active: index == currentIndex }" v-for="(product, index) in products" :key="index"> <img v-bind:src="product.urls.small_s3" /> <p>{{ product.alt_description }} </p> </div> </div></template><script>import ProductDataService from "../services/ProductDataService";export default { name: "tutorials-list", data() { return { products: [], currentTutorial: null, currentIndex: -1, title: "" }; }, methods: { retrieveProducts() { ProductDataService.getAll() .then(response => { this.products = response.data; console.log(response.data); }) .catch(e => { console.log(e); }); }, }, mounted() { this.retrieveProducts(); }};</script><style>.masonry { width: 1440px; margin: 20px auto; columns: 4; column-gap: 30px;}.item { width: 100%; break-inside: avoid; margin-bottom: 30px;}.item img { width: 100%;}.item h2 { padding: 8px 0;}.item P { color: #555;}@media screen and (min-width: 1024px) and (max-width: 1439.98px) { .masonry { width: 96vw; columns: 3; column-gap: 20px; }}@media screen and (min-width: 768px) and (max-width: 1023.98px) { .masonry { width: 96vw; columns: 2; column-gap: 20px; }}@media screen and (max-width: 767.98px) { .masonry { width: 96vw; columns: 1; }}</style>

用到尺度体例 v-bind 绑定图片src。css定义了图片瀑布流效果。

安拆vue-routernpm install vue-router

在src文件夹中，创建router.js：

import { createWebHistory, createRouter } from "vue-router";const routes = [ { path: "/", alias: "/products", name: "products", component: () => import("./components/ProductsList.vue") }];const router = createRouter({ history: createWebHistory(), routes,});export default router;

翻开src/main.js，导入router：

...import router from './router'createApp(App).use(router).mount('#app')

默认翻开ProductsList组件视图。

如许，根本网站的构造就成立起来了。

施行号令

npm run dev