一個前端界面vue ssr , 後端界面 react spa , 服務node的項目

時間 2019-11-15

標籤一個前端界面 vue ssr 後端 react spa 服務 node 項目欄目 React 简体版

原文原文鏈接

Kitephp

This is a vue + react projectvue

kite

前臺演示網站地址：小隨筆https://www.xiaosuibi.com/node

後臺演示網站地址：小隨筆https://www.xiaosuibi.com/_admin mysql

後臺演示網站帳戶：kitetest 密碼：q123456 （資源有點大，可能要加載一段時間）react

兼容方面目前仍是主推薦用google瀏覽器吧webpack

備註：由於項目是一直在寫的，週期比較長，改了又改，代碼可能比較亂，你們能看則看，有意見的，直接提意見，發出來的目的，就是但願你們多提建議，或者意見
而後我再來改，代碼方面我會一直優化的！！！！！！
關於項目的維護，會一直維護下去的git

再次備註：代碼方面美觀，或者有問題的代碼，各位大佬直接指出便可，都是本身一我的在學，因此代碼方面質量方面確定沒那麼好web

後續是先作小程序版本+app版本vue-router

而後邊維護和改bugsql

目前還須要對編輯器進行優化

Build

# npm install || cnpm install  安裝全部的包，可能有些多，前臺和後臺是在一塊兒的

打包後臺界面 npm run admin-build

打包前臺界面 npm run client-build

Start

# 目前用的數據庫只有mysql 本地開發的話，下一個phpstudy便可

初始化：npm run init 而後打開瀏覽器收入 localhost:8086 按照步驟操做便可

而後能夠選擇pro or dev 開始


pro 生產環境

pro1.1 在cmd 中輸入 npm run server 便可進入程序

pro1.2 (url或者ip)+ :8086端口便可看到客戶端主頁

pro1.3 (url或者ip)+ :8086/admin端口便可看到客戶端後臺頁面



dev 本地開發環境

dev1.1 在cmd 中輸入 npm run server-start 便可進開啓接口服務

dev1.2 在cmd 中輸入 npm run admin-start 便可進入後臺開發預覽（地址爲：localhost:8083）

dev1.3 在cmd 中輸入 npm run client-start 便可進入前臺開發預覽（地址爲：localhost:8081）

dev1.4 開發環境下 必定要先運行dev1.1的狀況下再運行 dev1.2 或者 dev1.3

目前cli部分代碼寫的比較亂，等後期有時間再繼續優化，哈哈
項目斷斷續續的寫着，主體基本寫完，目前就是優化和改bug，代碼的邏輯啥的，能看則看，不能看就略過吧，也是本身學習的一個過程，
放心這個代碼會一直優化的，已經堅持了好久了，能夠看提交，哈哈

目錄結構

kite/
   |
   ├──admin/                     * 後臺頁面目錄react
   |
   ├──client/                    * 前臺ssr文件目錄
   │   ├──build                  * vur ssr build 配置文件
   │   ├──config                 * 部分配置文件
   │   ├──public                 * index模版文件
   │   ├──request                * 請求配置文件
   │   ├──server                 * dev 模式下的開始文件
   │   ├──src                    * src ssr 主文件目錄
   │   └──static                 * 靜態資源目錄
   │
   │──config/                    * 部分可配置文件
   │
   │──db/                        * mysql and lowdb
   |
   ├──server/                    * 服務層，全部前臺後臺接口
   │
   ├──static/                    * 靜態資源目錄
   |
   ├──views/                     * cli 模版目錄
   │
   │──plugins/                   * 第三方組件 + 自有js庫 + 其餘插件性質的腳本
   │
   │──static/                    * 不經編譯器處理的靜態資源
   │
   │──store/                     * 全局數據狀態管理
   │
   │──package.json               * 包信息
   │
   │──.eslintrc                  * Eslint配置
   │
   │──_nodemon.json              * _nodemon配置
   │
   │──.gitignore                 * Git忽略文件配置
   │
   └──pm2.json                   * pm2配置