安裝 · thinkphp6.0/vue-element-admin后臺管理實戰基礎

# 安裝要求 ***** 1. composer 2. git 3. node.js # 開發工具 ***** 1. PhpStorm （PHP開發工具） 2. VScode （前端開發神器） # 安裝ThinkPHP6.0 ***** * 環境要求：PHP >= 7.1 * ThinkPHP6.0安裝命令： ~~~ composer create-project topthink/think demo（項目名稱） ~~~ * 目錄（主要列出app和config目錄）： ``` ├─app 應用目錄 │ ├─common 公共目錄（新增） # 主要存放公共基礎類 │ ├─controller 控制器目錄 │ ├─middleware 中間件（新增） │ ├─model 模型目錄（新增） │ ├─service 服務目錄（新增） # 服務類，數據操作 │ ├─utils 工具類目錄（新增） # 工具類，jwt等工具類 │ ├─validate 驗證器目錄（新增） # 驗證數據 │ ├─common.php 公共函數文件 │ └─event.php 事件定義文件 │ ├─config 配置目錄 │ ├─app.php 應用配置 │ ├─cache.php 緩存配置 │ ├─console.php 控制臺配置 │ ├─cookie.php Cookie配置 │ ├─database.php 數據庫配置 │ ├─filesystem.php 文件磁盤配置 │ ├─lang.php 多語言配置 │ ├─log.php 日志配置 │ ├─middleware.php 中間件配置 │ ├─route.php URL和路由配置 │ ├─session.php Session配置 │ ├─trace.php Trace配置 │ └─view.php 視圖配置 │ ...... ``` ## 啟動ThinkPHP6.0本地服務： * 安裝結束后用PhpStorm打開ThinkPHP6.0項目，在PhpStorm終端中執行： ``` php think run ``` * 啟動成功返回： ``` ThinkPHP Development server is started On <http://127.0.0.1:8000/> ``` * 瀏覽器打開 [http://127.0.0.1:8000](http://127.0.0.1:8000)，出現以下頁面則ThinkPHP6.0服務啟動成功 ![](https://img.kancloud.cn/23/c3/23c38c589c8112cc8172d47360139432_1145x750.png) # 安裝vue-element-admin ***** * 通過git方式安裝： ~~~ git clone https://github.com/PanJiaChen/vue-element-admin.git ~~~ * 目錄： ~~~ ├── build # 構建相關 ├── mock # 項目mock 模擬數據（本地數據，可刪除） ├── plop-templates # 基本模板 ├── public # 靜態資源 │ │── favicon.ico # favicon圖標 │ └── index.html # html模板 ├── src # 源代碼 │ ├── api # 所有請求 │ ├── assets # 主題字體等靜態資源 │ ├── components # 全局公用組件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 項目所有 svg icons │ ├── lang # 國際化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局樣式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有頁面 │ ├── App.vue # 入口頁面 │ ├── main.js # 入口文件加載組件初始化等 │ └── permission.js # 權限管理 ├── tests # 測試 ├── .env.xxx # 環境變量配置 ├── .eslintrc.js # eslint 配置項 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自動化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ~~~ ## 啟動vue-element-admin本地服務 ***** * VScode打開vue-element-admin項目，在終端中執行以下命令安裝依賴 ``` npm install ``` * 安裝結束后執行以下命令開啟本地服務 ``` npm run dev ``` * 啟動成功后返回 ``` App running at: - Local: http://localhost:9527/ - Network: http://192.168.3.6:9527/ ``` * 瀏覽器會自動打開登錄頁面，出現以下登錄頁面vue-element-admin服務啟動成功 ![](https://img.kancloud.cn/7a/7c/7a7ca314268089af369244d251383cef_2549x1343.png)