新建的vue项目如何布局（侧边栏，主页等）

1. 新建一个vue项目，能够运行起来

2. 在src的view文件夹下，创建一个layout文件夹，然后分别创建如图所示的四个vue

在MainLayout的代码

3、找到router下面的index.js,配置，修改原来的5~10行，红色笔标出来的1、2是自己命名的，3处写的是MainLayout的路径

3. 继续在MainLayout.vue里面写代码，把NavBar等等写进去

4. 然后写代码在NavBar，HeaderView，ContentView里面，以ContentVIew为例

然后打开浏览器，可以看到这样子的页面

有上面的Home|view，是App.vue里面的代码没有清除掉，最好将里面的代码全删掉

就可以看到这样的，此时已获得初步的小小的成功

5. 在NavBar.vue里面写样式

得到的样式如图，设置的宽度和高度没有起作用，因为我们的大盒子Layout的宽高没有设置

6. 在MainLayout里面写样式，注意高度宽度等要写成100vh或者100vh，而不是直接的100%

此时显示效果如图：

（后面我悄咪咪的把我的大红色换了）

此时已经获得第二阶段的成功！！！

7. 浅浅的写一下headerview和contentview的样式

8. 要使用element-ui库，所以要先安装（这是一个痛苦的过程，可取element-ui官方库查看）

9. 将element-ui库里的侧边栏的代码粘到Navbar里面

粘贴这些代码就行了，下面是NavBar里面的完整代码

mian.js里的完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)

}).$mount('#app')

实现效果：

导航栏一二三可以点击，就这样吧

有不懂的评论区问我，不喜勿喷。。。。。。。。