使用vuethink搭建系统

本文介绍如何使用vuethink搭建系统。

一、下载

地址：http://www.vuethink.com/
下载下来以后放在web的www目录下，解压。

---

二、安装依赖库

cd frontEnd
npm install

这里首先需要安装好npm（nodejs的包管理工具，装好nodejs以后就带npm了），安装方式不详述。
npm install命令会根据当前目录下的package.json文件安装依赖环境。

---

三、数据库配置

1.修改数据库配置信息

首先进入php的代码包，修改config目录下 database.php配置信息，包括用户名、密码、数据库（默认为thinkphp5）、端口（3306）。

2.添加数据库

直接导入php文件夹下的install.sql到数据库中即可。

3.测试

http://127.0.0.1/vue/php/ 运行该链接，可出现vuethink即成功。

---

四、运行

1.修改前端配置

修改前端文件，frontEnd/src/main.js

axios.defaults.baseURL = 'http://127.0.0.1/[your project name]/php/index.php/'

window.HOST = 'http://127.0.0.1/[your project name]/php/index.php/'

以上原来的语句为：

axios.defaults.baseURL = HOST
window.HOST = HOST

这里在前端的HOST是默认下前端的web根目录，因为前后端分离，所以会出现访问错误，我们把它修改为后端的根目录即可。

2.运行

cd frontEnd
npm run dev

正常即可访问项目首页的登录页面了，默认用户名密码为admin、123456

---

五、定义后端资源路由

到上一步就成功运行vuethink系统了。如果需要新增一个后端资源路由，需要以下两个步骤：

1.路由配置

可以在php/config/route_admin.php文件里添加以下：

'admin/test/index' => ['admin/test/index', ['method' => 'GET']],

2.添加控制器文件

在 php\application\admin\controller中添加Test.php文件：

namespace app\admin\controller;

use think\Request;
use think\Db;
use app\common\adapter\AuthAdapter;
use app\common\controller\Common;

class Test extends Common
{
    public function  index()
    {
        echo "Hello Vuethink";
    }
}

此时访问http://127.0.0.1/[your project name]/php/index.php/admin/hello/index即可看到输出的资源内容,说明该资源配置成功。

---

六、配置前端路由

上一节讲了如何配置后端资源路由，前端需要请求数据时直接访问定义在php/config/route_admin.php中的路由即可。

前端的路由是在\frontEnd\src\routes.js中进行配置，这个对熟悉vue的同学来说肯定很easy了，具体的操作可以查看vue-router的官方介绍。

---