bootstrap5.0导航

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="referrer" content="never">
-   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 		<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
     <title>中国物品编码中心</title>
   </head>

src/App.vue

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

src/components/layout/header.vue

@@ -2,57 +2,63 @@
   <header>
     <div class="logo"></div>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
-      <a class="navbar-brand" href="#">Navbar</a>
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-toggle="collapse"
-        data-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
-            >
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-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>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
-          </li>
-          <li class="nav-item">
-            <a
-              class="nav-link disabled"
-              href="#"
-              tabindex="-1"
-              aria-disabled="true"
-              >Disabled</a
-            >
-          </li>
-        </ul>
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Navbar</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          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 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>
+            </li>
+            <li class="nav-item dropdown">
+              <a
+                class="nav-link dropdown-toggle"
+                href="#"
+                id="navbarDropdown"
+                role="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                Dropdown
+              </a>
+              <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>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <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>
-                <Header></Header>
-            </el-header>
-            <el-main>
-                <router-view></router-view>
-            </el-main>
-            <el-footer>
-                <Footer></Footer>
-            </el-footer>
-        </el-container>
-    </el-container>
+  <div>
+    <Header></Header>
+    <router-view></router-view>
+    <Footer></Footer>
+  </div>
 </template>
 
 <script>
-    import Header from "./layout/header.vue"
-    // import Footer from "./layout/footer.vue"
-    export default {
-        components: {
-            Header,
-        },
-        data() {
-            return {
-                userName: "",
-                sidebarNav: [],
-            }
-        },
-        computed: {
-        },
-        methods: {
-        },
-        created() {
-        },
-        mounted() {
-        }
-    }
+import Header from "./layout/header.vue";
+// import Footer from "./layout/footer.vue"
+export default {
+  components: {
+    Header,
+  },
+  data() {
+    return {
+      userName: "",
+      sidebarNav: [],
+    };
+  },
+  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

@@ -9,7 +9,7 @@ const resolve = dir => {
 const BASE_URL = process.env.NODE_ENV === "production"
     ? "/"
     : "/"
-    
+
 module.exports = {
     publicPath: BASE_URL, //根路径
     outputDir: "dist", //打包目录
@@ -27,32 +27,32 @@ 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";`
             }
         }
     },
     configureWebpack: {
-      plugins: [
-          new webpack.ProvidePlugin({
-              $: 'jquery',
-              jQuery: 'jquery',
-              'window.jQuery': 'jquery',
-              Popper: ['popper.js', 'default']
+        plugins: [
+            new webpack.ProvidePlugin({
+                $: 'jquery',
+                jQuery: 'jquery',
+                'window.jQuery': 'jquery',
+                Popper: ['popper.js', 'default']
             })
-      ]
+        ]
     },
     devServer: {
         port: "8090",
         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, // 原地址