bootstrap5.0导航

src/App.vue

@@ -10,6 +10,6 @@
 
 <style>
 .container-fluid{
-    padding: 0;
+    padding: 0 !important;
 }
 </style>

src/components/layout/header.vue

@@ -2,25 +2,23 @@
   <header>
     <div class="logo"></div>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button
           class="navbar-toggler"
           type="button"
-        data-toggle="collapse"
-        data-target="#navbarSupportedContent"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
         </button>
-
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item active">
-            <a class="nav-link" href="#"
-              >Home <span class="sr-only">(current)</span></a
-            >
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#">Link</a>
@@ -31,28 +29,36 @@
                 href="#"
                 id="navbarDropdown"
                 role="button"
-              data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
                 Dropdown
               </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <div class="dropdown-divider"></div>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><hr class="dropdown-divider" /></li>
+                <li>
                   <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+                </li>
+              </ul>
             </li>
             <li class="nav-item">
-            <a
-              class="nav-link disabled"
-              href="#"
-              tabindex="-1"
-              aria-disabled="true"
-              >Disabled</a
-            >
+              <a class="nav-link disabled">Disabled</a>
             </li>
           </ul>
+          <form class="d-flex">
+            <input
+              class="form-control me-2"
+              type="search"
+              placeholder="Search"
+              aria-label="Search"
+            />
+            <button class="btn btn-outline-success" type="submit">
+              Search
+            </button>
+          </form>
+        </div>
       </div>
     </nav>
     <div class="user"></div>
@@ -64,6 +70,7 @@ export default {
   data() {
     return {};
   },
+  created() {},
 };
 </script>
 

src/components/main.vue

 <template>
-    <el-container>
-        <el-container>
-            <el-header>
+  <div>
     <Header></Header>
-            </el-header>
-            <el-main>
     <router-view></router-view>
-            </el-main>
-            <el-footer>
     <Footer></Footer>
-            </el-footer>
-        </el-container>
-    </el-container>
+  </div>
 </template>
 
 <script>
-    import Header from "./layout/header.vue"
-    // import Footer from "./layout/footer.vue"
-    export default {
+import Header from "./layout/header.vue";
+// import Footer from "./layout/footer.vue"
+export default {
   components: {
     Header,
   },
@@ -25,17 +17,13 @@
     return {
       userName: "",
       sidebarNav: [],
-            }
+    };
   },
-        computed: {
-        },
-        methods: {
-        },
-        created() {
-        },
-        mounted() {
-        }
-    }
+  computed: {},
+  methods: {},
+  created() {},
+  mounted() {},
+};
 </script>
 
 <style lang="scss">

src/main.js

@@ -44,7 +44,6 @@ Vue.use(Clipboard)
 // Vuex
 import storage from "./utils/storage.js"
 Vue.prototype.$storage = storage
-Vue.prototype.$ = $
 
 // ngprogress
 import NProgress from "nprogress";

vue.config.js

@@ -27,11 +27,11 @@ module.exports = {
         modules: false, //启动css Modules
         extract: process.env.NODE_ENV === "production", //css分离插件
         loaderOptions: {
-            css:{
-                localIdentName:"[path]-[name]-[local]-[hash:base64:5]",
-                camelCase:true,
+            css: {
+                localIdentName: "[path]-[name]-[local]-[hash:base64:5]",
+                camelCase: true,
             },
-            sass:{
+            sass: {
                 data: `@import "@/assets/css/_style.scss";`
             }
         }
@@ -51,8 +51,8 @@ module.exports = {
         host: "0.0.0.0", // 全部
         https: false,
         open: false,
-        compress:true,
-        disableHostCheck:true,
+        compress: true,
+        disableHostCheck: true,
         proxy: {
             "/api": {
                 target: process.env.VUE_APP_HOST_URL, // 原地址