Vue2+Element UI后台管理系统的实现过程

利用脚手架创建项目

  使用vue2写项目，脚手架用对应3版本的脚手架，如果安装的脚手架版本过高会导致出现警告，识别不到相应的内容。

  安装脚手架之后，使用”vue create 项目名“，建立本次项目，选择需要使用到的选项，显示如下界面，选择Manually selected features，手动选择功能，选中如下选项（空格是选中，Enter是确定，进行下一步）：

下一步选择hash模式或者history模式（hash模式兼容性比较好，history看起来简洁一些），本项目选择的是history模式，所以打出Y，之后选择书写css的方式，选择Less（可以嵌套写样式）：

再选择严格模式，选择最后一个严格模式，比较完善：

之后选择语法的检查模式，选择第一个保存之后就进行检查：

然后选择配置文件的储存位置，这里可以选择第二个：

最后是否保存本次选项做为未来创建项目的预设，因为每次项目需要的功能不尽相同，所以这里咱们输入n，使用npm run serve运行，显示如下界面：

项目初始化完成。

实现对组件的管理

  先来理理头绪，咱们看到上面的界面是App.vue这个根组件所呈现出来的，所以后面所有的组件最终都需要挂载到App.vue上进行呈现，一个项目会涉及到很多组件，为了方便进行组件管理，便于进行页面效果观察，咱们使用vue-router进行组件管理，同时为了避免适配问题，咱们通过npm install vue-router@3.1.3安装相适配的版本。之后在src中建立专门的文件夹router，在该文件夹下新建进行路由管理的JS文件，所有组件路径都将在该JS文件里书写，JS文件中引入vue-router，添加到Vue的使用中，定义一个数组，将组件路径等相关信息封装成一个对象，再把对象放到数组中，最后将该数组导出，那么该文件部分完成了，添加组件就可以直接按模板进行操作了，很多语言都以main为语言的入口，vue也是，在main.js文件处对router进行引入，添加成实例化Vue的变量，建立与根组件App.vue的联系，在App.vue中id为app的盒子中写上router-view，就可以组件中的内容显示到界面里了，并且可以通过在导航输入框中进行路径跳转，这样便于页面的观察和调试。

完成界面

  知道了如何便利的查看界面，下一步咱们就要开始写界面了，本次书写界面用到了Element ui组件库，咱们先安装，项目终端输入npm i element-ui -S对其进行安装，引入这个组件库的方式有两种，全局引入和局部引入，本次案例我用到的是全局引入，需要在main.js引入，添加到Vue对象的使用，同时设置大小和权重，设置完毕，可以去Element UI的官网查看所需组件的用法。

  下面在components中新建common和page两个文件夹，其中common用来储存公用部分的组件，page用来储存非公用部分的页面组件，ELement UI组件库中有专门的布局组件，可以用来进行主页布局，一般分为顶部，主体，底部和侧边栏，本次案例就是这样的布局，侧边栏可以用组件库中的组件来实现，用该组件同时也解决了路径跳转的问题，将相关组件“：index”的值写成需要跳转的组件界面路径，点击之后即可进行跳转，下面按照需要写每个界面即可。

  我在写的时候，有部分布局比较难实现，就采用浮动，定位等css属性，可能与组件库中的一些组件产生冲突，还有就是在style处一定要加上scope="scoped"，否则组件元素内部选择器的名称相同，就会产生冲突，导致页面呈现的效果差强人意，提前构思自己各个部分组件的布局需要，以及组合到一块之后的布局情况，大布局与小布局同步思考，统筹兼顾，才能完备呈现出自己想要的效果。

发送请求获取数据

  等页面写完了，部分内容需要通过网络请求从接口拿到数据进行布局渲染，这次的案例是通过Apifox对接口进行模拟，并获取所需数据，先安装axios，在案例终端输入npm install axios，通过axios发送网络请求，在src下新建api文件夹，再新建request.js文件，引入axios，根据模拟的接口，设置默认路径（每次发送请求都会自动添加到前面的路径），设置请求时间，再写请求拦截器和响应拦截器，需要在这两个拦截器哪部分进行操作，可以自行书写。再在api文件夹下新建index.js文件，引入request.js同时，将自己所需要写的请求暴露（导出）给外部，需要使用该请求的组件进行引入，并通过异步挂载的方式根据接口传递数据的格式拿到相应的数据，将数据渲染到界面。

非父子组件数据传递

如果需要非父子组件之间的值传递，在src下新建utils文件夹，新建bus.js文件，在文件中引入Vue，写变量bus为实例化的Vue对象，暴露（导出）bus，记传递数据的组件为A，接收数据的组件为B，在A，B中都引入bus.js，在A组件的方法中写

message就是传递走的数据，在B组件中写

变量e就接收到了传递过来的数据，可以对拿到的数据进行操作，要记得对用到的变量进行定义，如message。

  等界面和数据渲染都完成之后，就可以思考一些更加具备逻辑性的功能实现了。更完整的案例内容和内部逻辑，后面会在用vue3书写案例的时候呈现出来。

思考总结

  一个案例有很多小知识汇聚在一起，部分知识需要学会了才能用，还有部分知识用着用着就会了，多思考思考整块逻辑实现的过程，分部实现，逐步攻克，最终实现大的功能，多多实践，找到适合自己的方式。