修改bootstrap导航，有问题待解决

src/App.vue

 <template>
-    <div id="app">
+    <div id="app" class="container-fluid">
         <router-view></router-view>
     </div>
 </template>
@@ -9,5 +9,7 @@
 </script>
 
 <style>
-
+.container-fluid{
+    padding: 0;
+}
 </style>

src/components/layout/header.vue

 <template>
-    <header>
-        <div class="header-user">
-            <img src="../../assets/image/login-bg.jpg" alt=""/>
-            <div>
-                <p class="user-name">{{userNameInfoStr}}</p>
-                <p class="user-role">{{userRoleInfoStr}}</p>
+  <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>
-        </div>
-        <div class="header-logout">
-            <span @click="handleLogout">
-                <img src="../../assets/image/icon-logout.png" alt="">
-                <p>退出</p>
-            </span>
-        </div>
-    </header>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link disabled"
+              href="#"
+              tabindex="-1"
+              aria-disabled="true"
+              >Disabled</a
+            >
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <div class="user"></div>
+  </header>
 </template>
 
 <script>
-    import {
-        mapActions,
-        mapGetters
-    } from "vuex"
-
-    export default {
-        data() {
-            return {
-                menu:[]
-            }
-        },
-        computed:{
-            ...mapGetters("user", [
-                "userName",
-                "userBlockName",
-                "userRoleName"
-            ]),
-            userNameInfoStr() {
-                return `你好，${this.userName} ！`
-            },
-            userRoleInfoStr() {
-                let str = ""
-                if (this.userBlockName) {
-                    str += `${this.userBlockName} `
-                }
-                if (this.userRoleName) {
-                    str += `${this.userRoleName} `
-                }
-                return str
-            }
-        },
-        methods: {
-            ...mapActions("user", [
-                "LogoutActionAction"
-            ]),
-            handleLogout(){
-                this.$confirm("是否退出登录", "提示", {
-                    type: "warning",
-                    closeOnClickModal: false,
-                    cancelButtonClass: "cancel",
-                    confirmButtonClass: "confirm",
-                }).then(() => {
-                    // 清除登录信息
-                    this.LogoutActionAction()
-                }).catch(() => {})
-            },
-            
-        },
-        mounted() {
-            
-        },
-        created(){
-            
-        }
-    }
+export default {
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style lang="scss">

src/components/main.vue

 <template>
-    <el-container class="layout">
+    <el-container>
         <el-container>
-            <el-header height="65px">
+            <el-header>
                 <Header></Header>
             </el-header>
             <el-main>

src/main.js

@@ -2,8 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router/index'
 import store from './vuex/store'
+import $ from 'jquery'
 import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap/dist/js/bootstrap.min'
+import 'bootstrap/dist/js/bootstrap.min.js'
 import './plugins/element.js'
 import './plugins/qrcode.js'
 import "./assets/css/main.scss"
@@ -43,6 +44,7 @@ Vue.use(Clipboard)
 // Vuex
 import storage from "./utils/storage.js"
 Vue.prototype.$storage = storage
+Vue.prototype.$ = $
 
 // ngprogress
 import NProgress from "nprogress";
@@ -100,5 +102,6 @@ router.afterEach(() => {
 window.vm = new Vue({
     router,
     store,
+    $,
     render: h => h(App)
 }).$mount('#app')

src/views/News/index.vue

 <template>
-  <div></div>
+  <div>
+    
+  </div>
 </template>
-
 <script>
-</script>
-
-<style lang="scss">
-</style>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+}
+</script>
\ No newline at end of file