vuethink 是一款基於PHP TP5和Vuejs 結合的後臺框架，設計起來是使用較爲前沿。在使用的過程，需要對這款開源的後臺做一些調整和麪對一些細節的坑。前段時間也因爲有項目需求，所以下載了玩了一下。好，下面看看如何安裝使用。
1 下載源代碼
進入到官網 到到這個網頁進行下載。
2 安裝依賴庫
下載的vuejs代碼包是沒有安裝相應的依賴庫。因此，你需要在這個時候對前端的代碼進行安裝依賴庫。
這裏使用的vscode開發IDE，打開項目後，在終端裏面使用npm安裝命令進行安裝。npm install
安裝過程會出現過慢的情況。完成後最後出現一些警告，這裏可以不做處理。完成安裝代碼庫後如下圖。
3 配置數據庫
下載到後端並不能馬上使用，還需要對數據庫進行調整到自己適合的。
首先進入php的代碼包，修改config目錄下 database.php配置信息，這裏填寫數據庫的配置，修改數據庫名，用戶名 和 密碼，端口。如本機的用戶爲root，密碼爲空，端口爲3306，數據庫建立一個thinkphp5的標記。
'type' => 'mysql',
// 服務器地址
'hostname' => '127.0.0.1',
// 數據庫名
'database' => 'thinkphp5',
// 用戶名
'username' => 'root',
// 密碼
'password' => '',
// 端口
'hostport' => '3306',
將install.sql，安裝到數據庫中去。這裏使用Navicat for MySQL 工具先建立一個名爲thinkphp5的數據庫，然後通過右鍵運行sql文件，指向install.sql文件，完成後可以看到我們的數據庫表已經安裝到了。
4 運行後端檢測是否成功
使用這個後端之前，我們還需要做的一個環節，除了安裝依賴庫，配置數據庫連接配置外，需要檢測一下接口鏈接是否通了，這一步很重要。
在這裏，使用了xampp服務器，將兩個文件包frontEnd 和php 放置一個htdocs裏面，建立一個文件夾vue。
運行如下鏈接
http://127.0.0.1/vue/php/
出現vuethink接口字眼 則代表成功了。實際上這個路由缺失（miss的）的情況下出現的，這個時候對應好路由請求，這個接口字眼就不會出現的。部署過程僅僅是告知你聯通是否。
我們在php\application\admin\controller 找到對應base.php
// miss 路由：處理沒有匹配到的路由規則
public function miss()
{
if (Request::instance()->isOptions()) {
return ;
} else {
echo 'vuethink接口';
}
}
5 運行前端第一關
注意運行 之前需要把代碼嚴格校驗配置取消 否者會出現如下錯誤
Vue-cli中構建的Vue項目中Expected linebreaks to be 'CRLF' but found 'LF'
修改如下
修改項目根目錄下有.eslintrc.js文件，在配置文件中修改rule配置項：
或者配置
執行npm run dev 運行前端，第一步會出現
請求超時，請檢查網絡情況。
造成這個問題，基於前端後分離的情況出現跨域的問題。我們很容易理解，前端把fontEnd當成了根目錄，但是請求的接口就不是在我們的根目錄下面。
從這個猜測，請求接口的路徑已經出錯了，默認下請求爲根目錄。
http://localhost/admin/base/getConfigs
可是我們剛纔放置根目錄下的二級目錄vue這個文件夾。因此，我們訪問的路徑應該是，其中php爲文件夾，對應的是index.php文件。
http://127.0.0.1/vue/php/index.php/’
解決這個問題，首先在前端找到，main.js 修改兩處請求的地方。
將axios.defaults.baseURL =HOST
window.HOST = HOST
修改爲如下情況。
axios.defaults.baseURL = 'http://127.0.0.1/vue/php/index.php/'
window.HOST = 'http://127.0.0.1/vue/php/index.php/'
6.進入後臺
輸入admin 密碼123456 進入到相關的後臺。可以看到這裏開發後端。
這裏理解爲vue 是我們放置的文件夾，裏面又放置了兩個文件，分別是forntEnd（前端）和php(後端)
完成修改後，就可以進入到後端了。
7.選擇禁用eslint 報錯
由於vuethink採用了eslint嚴格的機制，所以你的代碼一旦不按照這個機制寫格式，例如你寫雙引號，空格不按照對齊。這個時候就會報錯，報錯。這肯定是受不了。
如果不需要這個嚴格的驗證機制，那麼你可以在這個機制上取消這個驗證。搜索前端打開
webpack.base.conf.js 的js 文件
註解一下這個配置。不讓eslint給你添麻煩。
eslint: {
// configFile: './.eslintrc.json'
},
module: {
preLoaders: [
// {
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'eslint'
// },
// {
// test: /\.vue$/,
// exclude: /node_modules/,
// loader: 'eslint'
// }
],
8.後端路由設置
開發過程，我們需要對路由進行設置開發,設置不同的路由，對應好不同的文件。框架提供了配置路由的設置，這個文件在。
php\config\route_admin.php 文件裏面。
<?php
// +----------------------------------------------------------------------
// | Description: 基礎框架路由配置文件
// +----------------------------------------------------------------------
// | Author: linchuangbin <[email protected]>
// +----------------------------------------------------------------------
return [
// 定義資源路由
'__rest__'=>[
'admin/rules' =>'admin/rules',
'admin/groups' =>'admin/groups',
'admin/users' =>'admin/users',
'admin/menus' =>'admin/menus',
'admin/structures' =>'admin/structures',
'admin/posts' =>'admin/posts',
],
// 【基礎】登錄
'admin/base/login' => ['admin/base/login', ['method' => 'POST']],
// 【基礎】記住登錄
'admin/base/relogin' => ['admin/base/relogin', ['method' => 'POST']],
// 【基礎】修改密碼
'admin/base/setInfo' => ['admin/base/setInfo', ['method' => 'POST']],
// 【基礎】退出登錄
'admin/base/logout' => ['admin/base/logout', ['method' => 'POST']],
// 【基礎】獲取配置
'admin/base/getConfigs' => ['admin/base/getConfigs', ['method' => 'POST']],
// 【基礎】獲取驗證碼
'admin/base/getVerify' => ['admin/base/getVerify', ['method' => 'GET']],
// 【基礎】上傳圖片
'admin/upload' => ['admin/upload/index', ['method' => 'POST']],
// 保存系統配置
'admin/systemConfigs' => ['admin/systemConfigs/save', ['method' => 'POST']],
// 【規則】批量刪除
'admin/rules/deletes' => ['admin/rules/deletes', ['method' => 'POST']],
// 【規則】批量啓用/禁用
'admin/rules/enables' => ['admin/rules/enables', ['method' => 'POST']],
// 【用戶組】批量刪除
'admin/groups/deletes' => ['admin/groups/deletes', ['method' => 'POST']],
// 【用戶組】批量啓用/禁用
'admin/groups/enables' => ['admin/groups/enables', ['method' => 'POST']],
// 【用戶】批量刪除
'admin/users/deletes' => ['admin/users/deletes', ['method' => 'POST']],
// 【用戶】批量啓用/禁用
'admin/users/enables' => ['admin/users/enables', ['method' => 'POST']],
// 【菜單】批量刪除
'admin/menus/deletes' => ['admin/menus/deletes', ['method' => 'POST']],
// 【菜單】批量啓用/禁用
'admin/menus/enables' => ['admin/menus/enables', ['method' => 'POST']],
// 【組織架構】批量刪除
'admin/structures/deletes' => ['admin/structures/deletes', ['method' => 'POST']],
// 【組織架構】批量啓用/禁用
'admin/structures/enables' => ['admin/structures/enables', ['method' => 'POST']],
// 【部門】批量刪除
'admin/posts/deletes' => ['admin/posts/deletes', ['method' => 'POST']],
// 【部門】批量啓用/禁用
'admin/posts/enables' => ['admin/posts/enables', ['method' => 'POST']],
// MISS路由
'__miss__' => 'admin/base/miss',
];
例如我們模塊裏面定義個新路由，那麼你就在首先
並在路由裏面添加一個路由設置。
'admin/hello/index' => ['admin/hello/index', ['method' => 'GET']],
1
然後在php\application\admin\controller，新建一個控制類。
<?php
namespace app\admin\controller;
use think\Request;
use think\Db;
use app\common\adapter\AuthAdapter;
use app\common\controller\Common;
class Hello extends Common
{
public function index()
{
echo "Hello Vuethink";
}
}
嘗試運行一下
http://127.0.0.1/vue/php/index.php/admin/hello/index
admin/hello/index 是我們定義的路由，採取Get的方式獲取數據。
執行運行後，可以訪問到我們的前端路由了。
以此類推，可以定義更多路由和設置更多繼承接口的方法。
默認下多個控制器均繼承了ApiCommon帶接口驗證，繼承Common 沒有驗證。Common直接繼承了Controller類。
---------------------
版權聲明：本文爲CSDN博主「hero82748274」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/hero82748274/article/details/76100938