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

2023年6月1日 256次阅读 来源: 天渡云

实用人群

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

技术栈

  • 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和后端通讯。

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

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

    原文作者：天渡云
    原文地址: https://www.jianshu.com/p/1c6e2145bfb7
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞