TC工具后台模式_Vue-cli+Element-ui实现后台管理系统（一）项目创建及Element-ui集成...

前言

近期由于个人项目中需要用到一套后台管理系统，于是去网上搜索了不少的框架，也有很多不错的，这里我使用过的有林间有风的lin-ui的cms系统、vue-element-admin这两套，如果大家有需要也是可以直接使用的，但是如果大家和我一样也想自己体会一下造轮子的乐趣，那不妨自己试试~

一、介绍

以下我将介绍一下Vue+element-ui如何搭建一套简单的后台管理系统。

开发工具：vscode

框架：Vue-cli4.2.2、element-ui2.13.0、vue-router3.1.5、vuex3.1.2、vuex-persistedstate2.7.1、axios0.19.2

其中Vuex是一个专为Vue.js 应用程序开发的状态管理模式。主要方便用于状态记录以及各组件通信。

axios用于请求数据接口的，后文中我将暂时不会介绍后台接口的开发，有兴趣可以自行研究或者和我交流。

最终能实现的效果同vue-element-admin，这里就借用一下主页图片展示了。

可实现的后台主页样式

二、创建项目

1、安装node和npm

要想使用vue开发项目，你需要先安装node和npm应用支持程序，安装也非常的简单，进入node官网下载最新的node安装程序安装即可：

node官网下载地址：https://nodejs.org/zh-cn/download/

node官网截图

选择你系统对应的版本下载安装即可，由于需要添加到系统环境变量便于后期命令的直接使用，建议在node安装过程中将添加至系统环境变量选项勾选上，这样安装后就无需重新配置了。（如果你没有选，window系统只需要打开我的电脑-属性-高级环境变量将node的安装目录添加进path中即可）

安装完成后通过以下命令检测一下是否已经安装好并成功配置到了系统环境变量中：

检查系统的node和npm

2、安装vue-cli

安装vue脚手架工具vue-cli，vue-cli能够帮助我们快速的构建vue项目，而无需传统额引入式开发模式了。安装也很简单，直接使用命令npm install -g @vue/cli。

注意：很多国内的使用npm会比较慢，这里可以更换一下npm的数据源就可以了，百度一搜会有很多数据源，这里大多数使用淘宝的数据源，

npm config set registry http://registry.npm.taobao.org/

安装完成后就可以使用cnpm进行后续的操作了。

3、创建项目

由于我是window系统，所以这里直接使用系统自带的命令行工具进行就可以了。

创建项目命令：vue create vue-el-admin , vue-el-admin为我们的项目名称。

选择项目相关配置

上图中N-config是我自己项目的默认配置项目，默认情况下是没有这一项的，需要你在选择完成后自行生成，后续会介绍如何生成这一项配置。第一次时这里我选择的是Manually这一项。

选择自己项目需要集成的框架组件

如上图创建项目需要选择项目所需要的一些辅助框架程序，这样有利于程序开发，这里我选择了Babel、Router、Vuex、Linter/Formatter。然后回车进入下一步。

选择路由模式

这一步选择路由模式是否使用history模式，这里根据自己项目的实际情况选择即可，选择与否的可视化区别就是你的项目在访问路径上是否存在一个#号。我这里先选择N不使用history模式，回车进入下一步。

选择格式话校验程序

这一步是选择格式化校验程序，说白了就是程序的规范性校验工具，我使用的是ESLint + Prettier，回车下一步。

选择在什么时候校验

这一步是选择程序在什么时候校验，第一个是在保存的时候校验，第二个是在提交的时候校验，一般选择第一项即可。

选择生成的配置文件

这一步选择将以上的项目配置信息生成在哪里，我们一般选择下一个package.json文件中。然后回车进入下一步。

会否保存以上的配置用于后期的项目创建

这一步主要是询问我们是否将以上的配置信息保存用于后期我们创建其他项目使用，正如我上面的N-config，如果你保存了，之后在使用vue create name创建项目的时候直接选择你配置的信息就可以直接开始创建项目了。由于我之前保存过，所以这里我选择N，不保存，回车开始构建我们的项目。当看到下图信息则表示项目创建成功了，我们就可以使用。

vue-cli项目创建成功

根据提示命令我们进入项目并运行项目，访问即可看到项目页面。

至此，项目创建成功了。接下来我们将集成element-ui进入我们的项目。

三、集成Element-ui

element-ui国内官网地址：https://element.eleme.cn/#/zh-CN

我们集成Element-ui只需要通过以下命令即可：

npm install element-ui --save

如下图所示则表示将element-ui成功加入了项目中：

vue集成element-ui

需要注意的是安装好后项目中还是无法直接使用的，因为这样安装后还需要引入elmenet-ui的组件和样式，引入方式是在项目的main.js文件中加入以下的引用代码即可全局使用element-ui的组件和样式来开发项目了。

import ElementUI from'element-ui'; 
import'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

至此Vue+Element-ui开发后台管理系统的项目我们已经创建成功了，我将在下一篇文章中去讲解如何开发后台管理系统的登录功能。

一个不是前端的前端coder，文章如有不足之处还望指出~