- 删除不需要的文件、把App.vue作为根路由出口
用 Vue Cli 脚手架创建完项目后有默认的Home和About页面以及components下的HelloWorld组件。删除这几个文件，清空router/index.js中的routes路由规则，App.vue中只保留 router-view 同时#app的宽高为整个屏幕
-
views目录下新增 Index.vue 首页组件，内容暂时只简单显示"index"；同时router/index.js中的routes数组中新增该index路由规则，此时页面显示根路径/对应的页面，也就是新增的Index页面：
新增Index.vue -
页面结构规划。常见管理后台页面结构如图（左侧Logo和菜单栏、右侧上边为顶栏显示登录用户、右侧下边为页面显示内容区域）：
页面结构 -
使用 ElementUI 实现静态的页面结构。终端中运行 npm i element-ui 安装ElementUI，安装成功后在 main.js 中引入并use。这里测试直接完整引入，实际项目如需按需引入按照ElementUI官网文件操作即可( https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru )；注意需要引入elementUI的css。然后在刚才新增的Index.vue页面中写一个<el-button>组件测试是否引入成功。
使用ElementUI 实现Layout静态布局。src目录下新增layout目录及各个组件文件（SideBar、TopBar、MainContent），layout/Index.vue下引入3个子组件并注册，使用flex布局实现设计的页面结构；这里使用了sass语法，需要安装相关依赖（安装的node-sass和sass-loader版本与node版本需要配套，我本地的node版本是16.8。可以搜索与自己本地的node版本兼容的sass依赖并指定版本安装），终端中运行
npm i node-sass@6.* sass-loader@10.* -D
安装依赖后即可使用sass语法写样式。安装后终端中如有报错重新编译即可。
修改router/index.js中关于 / 根路径的路由规则，引入Layout，同时为根路径添加子路由，访问根路径时自动转到该子路由，子路由的页面内容将渲染到Layout中MainContent组件的 router-view路由出口处。
使用ElementUI的 NavMenu 导航菜单 组件实现左侧菜单：在store中添加控制菜单栏展开收起的state属性 sideBarIsCollapse， 并添加切换状态值的mutation方法 TOGGLE_SIDE_BAR。 为展开收起图标添加点击事件commit该mutation；同时在layout/Index.vue中动态绑定style，根据sideBarIsCollapse的值动态计算菜单栏的宽度。
之后给TopBar和MainContent简单的样式即可实现页面的整体布局：
下篇文章继续添加测试路由和页面，封装axios并登录请求token和roles。
