文章目錄

• 簡賬(開源記賬軟件)-前端環境簡介及部署
• 前言
• 一、前端主要技術棧簡介
• • • • 具體涉及的技術如下所示：
      • Q&A
• 二、環境部署
• • • 1. 安裝nodejs
    • 2. 從Github上下載代碼
    • 3. 安裝依賴
    • 4. 運行項目
• 三、總結
• 四、致謝

---

簡賬(開源記賬軟件)-前端環境簡介及部署

---

前言

由于自己有記賬的需求，在嘗試使用過市面上的記賬軟件后，發現大多數都有以下幾個問題

• 廣告比較多，主要分為信息流廣告及金融類廣告
• 頁面太癰腫，使用體驗不好
• 部分高級功能需要收費，如數據導出

所以就萌生了自己做一個記賬軟件的想法，這個想法在2020年5月左右落地的，到目前也快有一年了。
本著OpenSource的想法，已全部開源，也想借寫博客的機會獲得一些Star?

測試環境

• PC端：簡賬PC端

正式環境：

• 小程序：微信搜索【簡賬】
• PC端：簡賬PC端

Github開源地址：

• Java后端：簡賬后端
• PC端：簡賬PC端
• 小程序：簡賬uniapp

后續要完成的功能（重要性至上而下）

• 支持多賬本，可自定義維護
• 支持設置預算（年月預算）
• 支持多賬本間沖銷
• 支持Excel導出（年或月可自定義）
• 支持多人記賬及家庭賬本

待解決的Bug

• 如用戶未登錄過小程序，小程序掃碼授權會提示Token不能為空（提供者：喵了個小咪咪）

寫在后面
如果你有其他的想法或問題歡迎給我留言，或在Github上提Pr&Issue
tips：如果你也想你寫的東西被人使用，歡迎跟我一起維護簡賬～

往期鏈接

• 簡賬主要功能介紹
• 簡賬后端環境簡介及部署

---

一、前端主要技術棧簡介

從大體上來看，整個后端為單體的SpringBoot+Redis+Mysql

具體涉及的技術如下所示：

• Vue 2.6.x
• Vue Router 3.1.2
• Vuex 3.1.1
• axios 0.19.0
• AntDesign Vue 3.0

Q&A

項目是基于AntDesign Vue Pro嗎？

是的，此項目基于AntDesign Vue Pro開發的

相較于AntDesign Vue Pro官方實例項目，有做哪些定制化開發？

1.整個項目均為真實接口數據，無mock
2.基于vue的路由守衛實現了權限管理和動態菜單

二、環境部署

前端開發環境相對來說比較簡單，主要分為拉取代碼和啟動兩個部分

1. 安裝nodejs

• 去nodejs官網下載12.x 對應平臺的版本
• 驗證一下，是否安裝正確
  

2. 從Github上下載代碼

此處也可以fork一份代碼到你自己的倉庫后，從你自己的github倉庫拉取代碼

3. 安裝依賴

• 進入項目目錄
• 運行npm install
  

4. 運行項目

配置后臺地址

如果你已經成功啟動了簡賬的后端服務，此步驟可以跳過

修改vue.config.js中的webpack代理路徑

修改前：

修改后（http://jz.jackbin.cn）：

運行項目
運行命令：npm run serve，看到如下輸出即代表成功

瀏覽器中查看
地址：http://localhost:8000

三、總結

后續博客內容：

數據庫設計

SpringBoot集成SpringSecurity+JWT及動態路由生成

小程序掃碼登陸實現

記賬及月賬單實現

圖表分析實現

…

簡賬開發者：

SloppyJack

SmallishJoker

四、致謝

如果你覺我這個項目還不錯的話，不妨給我的Github點個Star?

總結

以上是生活随笔為你收集整理的简账(开源记账软件)-前端环境简介及部署的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。