vue2+element-ui从头开始构建一个管理后台通用模板(1) 超级无敌详细小白版本

vue2+element-ui从头开始构建一个管理后台通用模板(1) 超级无敌详细小白版本

从事前端行业也将近两年的时间了，做了很多后台管理的项目，最近抽空自己写一个通用的模板,方便以后工作使用。
有需要的小伙伴可以直接白嫖。有写的不好的地方希望大家能指出，我们共同进步。
（本来是想用vue3.0搞一个的，但是害怕坑太多，自己搞不定，就先搞一个2.x的版本。待我再学习学习，把坑先踩一踩，再搞个3.0的）

---

---

前言

构建一个通用模板，需要以下的技术栈 1、熟练JS基础以及ES6及以上的语法 2、对vue有一定的了解，最好写过实际的项目 如果以上两个技术栈还没有掌握的同学，可以先学习一下，再来搭建我们自己的通用模板

---

一、工具准备（安装过的小伙伴可以直接跳过）

俗话说：工欲善其事，必先利其器
虽然我们是CV（CTRL+C CTRL+V）工程师，但是有一个好的工具，能使我们的开发效率大大提升（增加了我们摸鱼的时间）
话不多说，直接进入主题

良仔作为一个走在时尚前沿的前端开发工程师，肯定是选择最花里胡哨，啊不，最轻便、最实用、插件多、界面好看的编辑器。所以呢vsCode就是最适合我的编辑器，没有之一（有我也不承认）。

1.编辑器

链接: 点击跳转官网下载地址.
安装大家都会吧，我60岁的老爹都会，你要是不会，我让我爹去你家里手把手教你（把车票和住宿报一下就行）
根据你电脑的系统安装对应的版本就行。

下载完安装，根据提示安装就可以。没有什么难度。

安装完打开编辑器，大概就张这个样子

下载完之后，需要安装几个插件，来提高我们的工作效率。

首先呢，肯定是汉化包，对于我这种英语菜鸟来说，肯定是中文啊，不可能用用英文的，这辈子都不可能用英文（要是英文好，谁不用英文版的装逼啊）。

然后关于vue的插件，会检查和提示关于vue的语法，强烈建议一定要装。

还有一个很小众，但是我觉得超级好用的插件，号称人工智能补全（确实挺智能的），会根据你写代码的习惯，补全后面的代码。用了它让你体验一个Tab键一行代码的快感。

其他的插件呢，大家可以在百度搜一下，关于前端的好用插件，包括好看的主题、字体什么的，会有很多推荐，大家自行安装。

2.node环境安装

安装完编辑器，我们需要安装一个node环境，肯定会有人问，为什么要安装node呢？不要问，问就是必须安装，不安装你就没有不能下载vue需要的一些包。

首先打开官网
链接: 点击跳转node官网下载地址.

进入之后你会看到这样的页面，英语不好的小伙伴可能就有点头疼了，应该怎么下载，不要急，听我细细道来。

首先呢，chrome浏览器会自带一个翻译功能，小伙伴们可以直接翻译下载
但是有时候这个翻译会来大姨妈，翻译不过来。翻译不过来也不要慌，良仔告诉你怎么搞。
LTS: 代表长期稳定版本（下载这个就可以），稳的一匹。具体的英文单词忘了，有兴趣的大家可以去百度搜一下。
Current： 代表当前最新版，可以用，但是保不准会不会出现问题，如果喜欢踩坑的小伙伴可以下载这个版本。

剩下的操作就跟普通的下载一样。安装的时候就是无限下一步就可以了（因为都是英文，我也看不懂，看的懂的老铁们可以根据自己需要安装）。

安装完node之后呢 要检查一下是不是安装成功。

再桌面点金win+r键，输入cmd，然后回车，会出现这样一个对话框。（苹果的老铁们自行查一下如何打开，穷人实在是买不起苹果）

就是这个玩意，打开之后，输入node -v 回车（小写的v）

如果出现了版本号，恭喜你，你的node就安装成功了。
如果没有出现，怎么办呢，别着急，重新安装node就可以了，直到出现node版本号。

二、环境搭建

1.安装vue

既然我们是vue+element-ui，那肯定是要先安装一下vue的
根据vue官网的步骤

我们打开cmd（跟查看node版本一样）

$ npm install vue

输入或者复制这个代码 然后回车
等待安装完之后我们查看vue的版本vue -V（大写V）

这里出现了@vue/cli 4.3.1，为什么会出现cli呢？官网给出了我们解释

cli是vue的脚手架工具，可以让我们方便快捷的构建vue项目。（我们的项目也是用cli搭建的）

有兴趣的老铁们，可以浏览一下vue的官网。

总结

到这里我们环境搭建已经完成了，下一步就要开始构建项目，如果想自己搭建一个自己的后台管理模板，别犹豫了，赶快开始把。

各位大神手下留情，写的不好的地方欢迎大家指出，我会虚心接受并改正。