1.官網(wǎng)下載源碼http://www.vuethink.com/挨厚。
下載完成后尸诽，這款后臺是前后端分離鬼雀，基于PHP開發(fā)，以及Vuejs然遏。解壓后會有frotEnd 和 php 兩個安裝包贫途。
frontEnd 是前端吧彪，php是后端代碼待侵。
2.安裝前端依賴庫
首先需要有nodejs的環(huán)境，以前前端依賴庫管理工具npm姨裸。npm有時候慢秧倾，可以用淘寶的cnpm。
進入frontEnd 執(zhí)行 npm install 完成前端依賴庫安裝傀缩。(安裝完成后會出現(xiàn)一些警告那先，可以不做處理)
3.配置后臺數(shù)據(jù)庫
1)php 文件夾下面有 install.sql，先新建數(shù)據(jù)庫 tpvue, 導(dǎo)入 install.sql 語句 赡艰。
2)php 文件夾下 config文件夾 database.php 修改數(shù)據(jù)庫名售淡，用戶名，密碼慷垮，端口揖闸。
4.運行后端檢測是否成功
http://127.0.0.1/vuethink/php (也可以自行配置虛擬主機)，后出現(xiàn) “vuethink接口”料身。
代表成功了汤纸，實現(xiàn)上這個路由缺失(miss)的情況下出現(xiàn)的，對應(yīng) application/admin/controller/Base.php 里面 miss() 方法
5.運行前端第一關(guān)
進入 frontEnd 芹血，執(zhí)行 npm run dev贮泞，會出現(xiàn)請求超時。造成這個問題幔烛，基于前后端分離的情況會出現(xiàn)跨域的問題啃擦。前端把frontEnd 當成了根目錄，
但是請求的接口就不是在我們的根目錄下面饿悬，而是在 php/index.php.
猜測令蛉，“cannot load http://localhost/admin/base/getConfigs”.
vuethink 的數(shù)據(jù)交互是用到 Axios,我們找到 main.js梅猿，看到“axios.defaults.baseURL=HOST",其中HOST是為 http://localhost:80（webpack.base.conf.js）
我們真正訪問的接口應(yīng)該是在 http://localhost/index.php/,因些我們需要改為 "axios.defaults.baseURL=http://localhost/index.php/".
"windows.HOST =http://localhost/index.php/"
6.進入后臺
localhost:8080 輸入用戶臺 admin ,密碼123456
7.選擇禁用eslint 報錯
由于 vuethink 采用了 eslint 嚴格的機制所以你的代碼一旦不按照這個機制寫格式膜眠，例如你寫雙引號，空格不按照對齊凉袱。
這個時候就會報錯傲宜，報錯运杭。這肯定是受不了。
不需要 eslint 驗證機制函卒，webpack.base.conf.js
loaders: [
eslint: {
// configFile: './.eslintrc.json'
},
module: {
preLoaders: [
// {
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'eslint'
// },
// {
// test: /\.vue$/,
// exclude: /node_modules/,
// loader: 'eslint'
// }
],
8.后端路由設(shè)置
后端路由是在php\config\route_admin.php 文件里面辆憔。
<?php
// +----------------------------------------------------------------------
// | Description: 基礎(chǔ)框架路由配置文件
// +----------------------------------------------------------------------
// | Author: linchuangbin linchuangbin@honghaiweb.com
// +----------------------------------------------------------------------
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',
],
// 【基礎(chǔ)】登錄
'admin/base/login' => ['admin/base/login', ['method' => 'POST']],
// 【基礎(chǔ)】記住登錄
'admin/base/relogin' => ['admin/base/relogin', ['method' => 'POST']],
// 【基礎(chǔ)】修改密碼
'admin/base/setInfo' => ['admin/base/setInfo', ['method' => 'POST']],
// 【基礎(chǔ)】退出登錄
'admin/base/logout' => ['admin/base/logout', ['method' => 'POST']],
// 【基礎(chǔ)】獲取配置
'admin/base/getConfigs' => ['admin/base/getConfigs', ['method' => 'POST']],
// 【基礎(chǔ)】獲取驗證碼
'admin/base/getVerify' => ['admin/base/getVerify', ['method' => 'GET']],
// 【基礎(chǔ)】上傳圖片
'admin/upload' => ['admin/upload/index', ['method' => 'POST']],
// 保存系統(tǒng)配置
'admin/systemConfigs' => ['admin/systemConfigs/save', ['method' => 'POST']],
// 【規(guī)則】批量刪除
'admin/rules/deletes' => ['admin/rules/deletes', ['method' => 'POST']],
// 【規(guī)則】批量啟用/禁用
'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']],
// 【組織架構(gòu)】批量刪除
'admin/structures/deletes' => ['admin/structures/deletes', ['method' => 'POST']],
// 【組織架構(gòu)】批量啟用/禁用
'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' => ['admin/hello/index',['method' => 'GET']],
然后在php/application/admin/controller 新建一個Hello類
Hello.php
<?php
namespace app\admin\controller;
use app\common\controller\Common;
class Hello extends Common
{
public function index()
{
echo "Hello Vuethink";
}
}
Common類只是繼承了Controller類是不需要驗證的，大部分的類都繼承了ApiCommon 是需要驗證的虱咧。
這里需要注意一點熊榛，Common類的初始化方法中已經(jīng)禁止跨域，所以我們需要把接受任何請求放開才能訪問上面的路由腕巡。
// header('Access-Control-Allow-Origin:*'); // 可跨域 (這里注釋去掉玄坦，可以接受所有的訪問)。
之后我們訪問新寫的路由绘沉。127.0.0.1/vuethink/php/index.php/admin/hello/index 就可以顯示
Hello Vuethink
9.vuethink 項目部署
項目要在vue下面跑起來煎楣，一般會用npm run dev，但是不可能每次都要打開cmd跑項目车伞，我們用 npm run build,會在frontEnd文件夾下
出現(xiàn)一個dist文件夾择懂。
這里還會遇到一個問題，由于Vue的特性另玖，導(dǎo)致運行的dist文件困曙，必須是根目錄下，必須要提前配置好谦去，如果是以端口號加文件目錄的方式慷丽，則無法訪問。
需要新建虛擬站點哪轿。
部署的時候, php文件夾和dist文件夾一起部署盈魁，改虛擬目錄的路徑為dist文件路徑，即
D:/wamp/www/vuethink/frontEnd/dist/ 虛擬站點為 http://tpvue.my.com
同時需要將 main.js axios的默認地址改為axios.defaults.baseURL = 'http://127.0.0.1/vuethink/php/index.php/'
還有 window.HOST = 'http://127.0.0.1/vuethink/php/index.php'
這樣配置登錄后窃诉，點進去刷新的時候杨耙，即304重定向的時候，會出現(xiàn)404 Not Found.
因為創(chuàng)建好的dist文件后飘痛，并沒有實際存在的home文件夾或者menu方法珊膜，list方法或者html頁面都不存在，是js動態(tài)生成的宣脉，所以實際的地址會報錯车柠。
因為vue用的是單頁面應(yīng)用，用的虛擬路由塑猖。
添加中間的一段代碼
<IfModule mod_rewrite.c>
RewriteEngine On 開啟重寫
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
RewriteCond和緊追的RewriteRule是配合使用的竹祷。 RewriteCond是匹配字符串用的，第一個參數(shù)是測試的字符串羊苟，第二個參數(shù)是匹配規(guī)則塑陵，通過一個正則。
RewriteCond第一個參數(shù)基本都是用來匹配$_SERVER里的那堆參數(shù)蜡励，HTTP_HOST,REQUEST_FILENAME之類的令花。就是對應(yīng)瀏覽器地址欄里輸入的那串url進行匹配阻桅，
如果url符合這條規(guī)則，那么就走下面的這條路由兼都。RewriteCond和RewriteRuel配合使用嫂沉，路由就是一個轉(zhuǎn)的過程，原來寫的是A扮碧，經(jīng)過這個路由之后趟章，就轉(zhuǎn)給B去了。
[L]表示如果匹配的話芬萍，這個就是最后一個重寫規(guī)則尤揣。
這里的意思就是如果匹配得到index.html 那么就是最后的重寫規(guī)則搔啊。
如果請求的文件不是文件也不是目錄柬祠，就重定向到index.html
這樣做可避免出現(xiàn)上面的錯誤 ，但是又有一個缺點负芋，失去了404報錯的頁面漫蛔，需要自己額外做一個404頁面來跳轉(zhuǎn)。
Apache 配置如下：
<VirtualHost *:80>
ServerAdmin admin@localhost.com
DocumentRoot "D:/wamp/www/vuethink/frontEnd/dist/"
ServerName localhost
ServerAlias tpvue.my.com
<Directory "D:/wamp/www/vuethink/frontEnd/dist/">
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
#Options FollowSymLinks
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
#Order deny,allow
#Require all granted
Require local
</Directory>
</VirtualHost>
10. webpack-hot-middleware 用 vue_cli 跑項目時旧蛾，不能熱加載莽龟。
用的webstrorm,phpstorm，將文件保存在臨時文件中锨天，所以不能熱加載毯盈。
解決方案： File => Settings => Appearance & Behavior => System Settings => Synchronization 最后一項去掉就可以了。
Use "safe write" (save changes to a temporary file first)
