node-vue-mongodb全栈项目-管理后台基础界面（二）

node-vue-mongodb全栈项目-项目创建与初始化（一）juejin.cn/post/695903…

准备工作

保留一个终端窗口cd admin进入admin项目

安装elementUInpm i element-ui --save安装成功后，package.json->"dependencies"会多出element-ui

启动admin项目npm run serve

安装element-ui插件

为了避免耦合，建议新建一个专门管理插件的文件夹plugin,每个插件使用单独的js文件进行引入导出。

src下新建plugin文件夹，在plugin文件夹下新建elementui.js文件，来管理element-ui插件。

main.js中引入并挂载插件

新建页面

在elementUI官网上找到布局组件，复制代码，在admin->src->view下新建Main.vue文件，把代码粘贴进去，记得把上面那部分代码用包裹起来。

引用页面

打开src->router->index.js配置路由 1.import 页面 2.配置路由映射

此时，页面已经可以在浏览器正常显示了：

清理App.vue

// App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
// 去掉边距
html,body{
  margin: 0;
  padding: 0;
}
</style>

调整Main.vue中的视口宽度

使布局撑满整个频幕高度