vue3.2图片上传Demo搭建 1.注册图标全局组件 新建导航

创建vite 项目 引用 bootstrap

index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

注册全局图标组件

新建  components/icons/IconUpload.vue   获取图标SVG 导入

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload"
                viewBox="0 0 16 16">
                <path
                    d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
                <path
                    d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z" />
            </svg>
</template>

components/icons/all.js

import IconArrowDown from "./IconArrowDown.vue";
import IconArrowUp from "./IconArrowUp.vue";
import IconCheck from "./IconCheck.vue";
import IconChevronDown from "./IconChevronDown.vue";
import IconChevronRight from "./IconChevronRight.vue";
import IconChevronUp from "./IconChevronUp.vue";
import IconClockwise from "./IconClockwise.vue";
import IconCloudArrowUp from "./IconCloudArrowUp.vue";
import IconExclamation from "./IconExclamation.vue";
import IconFolder from "./IconFolder.vue";
import IconFolderOpen from "./IconFolderOpen.vue";
import IconFolderPlus from "./IconFolderPlus.vue";
import IconPencil from "./IconPencil.vue";
import IconTimes from "./IconTimes.vue";
import IconTrash from "./IconTrash.vue";
import IconTypeCommon from "./IconTypeCommon.vue";
import IconTypeDoc from "./IconTypeDoc.vue";
import IconTypeExcel from "./IconTypeExcel.vue";
import IconTypeImage from "./IconTypeImage.vue";
import IconTypePdf from "./IconTypePdf.vue";
import IconTypeVideo from "./IconTypeVideo.vue";
import IconTypeZip from "./IconTypeZip.vue";
import IconUpload from "./IconUpload.vue";

export default {
    "icon-check": IconCheck,
    "icon-arrow-down": IconArrowDown,
    "icon-arrow-up": IconArrowUp,
    "icon-chevron-down": IconChevronDown,
    "icon-chevron-right": IconChevronRight,
    "icon-chevron-up": IconChevronUp,
    "icon-clockwise": IconClockwise,
    "icon-cloud-arrow-up": IconCloudArrowUp,
    "icon-exclamation": IconExclamation,
    "icon-folder": IconFolder,
    "icon-folder-open": IconFolderOpen,
    "icon-folder-plus": IconFolderPlus,
    "icon-pencil": IconPencil,
    "icon-times": IconTimes,
    "icon-trash": IconTrash,
    "icon-type-common": IconTypeCommon,
    "icon-type-doc": IconTypeDoc,
    "icon-type-excel": IconTypeExcel,
    "icon-type-image": IconTypeImage,
    "icon-type-pdf": IconTypePdf,
    "icon-type-video": IconTypeVideo,
    "icon-type-zip": IconTypeZip,
    "icon-upload": IconUpload,
}

main.js引用

import { createApp } from 'vue'
import App from './App.vue'

import icons from './components/icons/all'
const app=createApp(App)
// app.component("icon-upload",IconUpload) //注册全局组件

for(const[ key,value] of Object.entries(icons)){
    app.component(key,value)
}//注册全局组件

app.mount('#app')

新建 components/ActionsBar.vue

<template>

    <div class="d-flex
 justify-content-between 
 align-items-center 
 border-bottom 
 pt-2 
 pb-3">

        <button class="btn btn-outline-primary">
         <icon-upload />上传
        </button>
        <div class="action-buttons">
            <button type="button" class="rounded-button" title="Rename">
              <icon-pencil />

            </button>

            <button type="button" class="rounded-button" title="Remove selected">
             <icon-trash />
            </button>
        </div>

    </div>



</template>
<script setup>



</script>

新建 components/Navbar.vue

<template>
  <nav class="navbar navbar-light bg-white navbar-expand-lg border-bottom">
    <div class="container">
      <a class="navbar-brand" href="/"><strong>Vue</strong>图片上传</a>
     <form class="form-inline mt-2 mt-md-0">
       <input class="form-control"
        type="text" 
        placeholder="Search in Drive"
         aria-label="Search"/>
     </form>
    </div>
  </nav>
</template>
<script setup>
</script>

<style>
</style>

新建pages/MyFiles

<template>
<div class="container py-3"> 
    <ActionsBar/>
    </div>

</template>
<script setup>
import  ActionsBar from '../components/ActionsBar.vue'

</script>

<style>

</style>

APP.vue

<script setup>
import  Navbar from './components/Navbar.vue'
import  MyFiles from './pages/MyFiles.vue'
</script>

<template>
<Navbar  />
<MyFiles />

</template>

<style>

</style>