基于Vue和PHP打造前后端分离的通用管理系统（一）

实用人群

• 适合小白入门，高手请绕行

技术栈

• javascript vuejs webpack babel eslint nodejs axios
• php mysql redis
• git vagrant centos

---

整体思路

• git负责版本控制，这个算是标配

• 前台: 使用vuejs框架，用javascript语言打造，UI使用ElementUI。webpack babel eslint nodejs 服务于javascript代码编写。

• 后台: 用PHP作，mysql数据库，redis缓存，运行在装有centos系统虚拟机中，通过vagrant管理虚拟机

• 前端通过axios和后端通讯。

  • 前端到回台请求url: http://localhost/json.php/Module/Controller/Action/param/value
  • 后端发给前台的Json指令符合如下格式

return {
  // 需要渲染的界面
  view: {
     // 界面名称
    name: 'Table'
    // 界面的配置信息
    column: [ 
      ...
    ]
    // ...
  },
  // 需要渲染的数据列表
  rows: [
    ...
  ],
  //提示信息
  message: '...', 
  status: true 
}

环境搭建

为方便新手入门，本文在windows环境下进行。软件统一安装到D:\Server目录下

1. 创建工作目录

在D盘创建Server目录，用于搭建工作环境

2. 安装git

在git首页下载相应位数（64/32）的Windows版git，
然后一路下一步安装，注意选择安装位置。

调出命令行（win+r输入cmd）输入 git --version 显示git版本号即可。

3. 安装Nodejs和Vue

在nodejs首页下载，一路next，注意选择安装位置。

命令行输入 node -v 显示node版本号。

命令行输入 npm --v 显示npm版本号即可。

在D:\Server\nodejs目录下下建立"node_global"及"node_cache"两个文件夹。然后命令行输入:

npm config set prefix "D:\Server\nodejs\node_global"
npm config set cache "D:\Server\nodejs\node_cache"

桌面/我的电脑/右键【属性】/高级系统设置/高级/环境变量

1. 用户变量Path中 C:\...npm 替换为D:\Server\nodejs\node_global
2. 系统变量增加NODE_PATH=D:\Server\nodejs\node_global

可以通过 npm config get prefix查看设置情况

输入npm install --global vue-cli测试一下（不改源，需要喝杯水的时间...）

正常的话，vue就安装完成了，下一步在浏览器插件商店中找到并安装vue-devtools

恭喜，前端环境搭建基本完成