从零开始用Vue.js+LocalStorage搭建个人专用证券持仓档案软件
一、准备基础工具与环境
1. 安装Node.js与npm
- 下载地址:https://nodejs.org/zh-cn/download/prebuilt-installer
- 选择对应系统(Windows/macOS/Linux)的LTS版本(长期稳定版),双击默认安装
- 验证安装:打开终端(Windows用CMD/PowerShell,macOS/Linux用Terminal),输入`node -v`和`npm -v`,出现版本号即成功
2. 初始化Vue.js项目
- 终端输入`npm create vue@latest`(首次需按提示输入y确认安装create-vue工具)
- 按以下步骤配置项目(全部用方向键选择/Enter确认):
```
Project name: securities-archive 项目名,可自定义
Add TypeScript? No
Add JSX Support? No
Add Vue Router for Single Page Application development? No
Add Pinia for state management? No
Add Vitest for Unit Testing? No
Add an End-to-End Testing Solution? No
Add ESLint for code quality? No
Add Prettier for code formatting? No
```
- 进入项目目录:`cd securities-archive`
- 安装依赖:`npm install`
- 启动开发服务器:`npm run dev`,终端输出Local地址(如http://127.0.0.1:5173/),浏览器打开看到Vue标志即成功
二、修改核心代码实现功能
1. 替换入口模板与组件
- 打开项目根目录下的`index.html`,将``标签内容改为「个人证券持仓档案」
- 进入`src`目录,删除`assets`和`components`文件夹下的所有内容,删除`App.vue`原有代码,复制以下完整代码:
```vue
```
2. 测试功能与优化
- 浏览器刷新开发服务器页面,即可看到完整的证券档案界面
- 测试步骤:
1. 填写股票代码(如000001)、名称(平安银行)、数量(1000)、单价(12.34),选择日期后点击「添加持仓」
2. 查看总持仓成本与持仓数量是否正确
3. 点击「删除」按钮,确认后查看列表是否更新
4. 关闭浏览器再重新打开,验证数据是否通过LocalStorage持久保存
三、生成可离线使用的exe/zip文件
1. 打包Vue项目
- 终端停止开发服务器(按Ctrl+C)
- 输入`npm run build`,等待打包完成,生成的`dist`文件夹即为可部署的静态文件
2. 使用Electron打包成桌面应用(可选进阶)
- 安装Electron打包工具:`npm install electron electron-builder -D`
- 在项目根目录新建`electron.js`,复制以下完整代码:
```javascript
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
const win = new BrowserWindow({
width: 900,
height: 700,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载本地打包后的Vue页面
win.loadFile(path.join(__dirname, 'dist/index.html'))
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
```
- 在项目根目录新建`preload.js`(留空即可,用于安全机制兼容)
- 修改`package.json`,添加以下内容:
```json
"main": "electron.js",
"scripts": {
"electron:serve": "electron .",
"electron:build": "electron-builder"
},
"build": {
"appId": "com.securities.archive",
"productName": "个人证券持仓档案",
"directories": {
"output": "electron-dist"
},
"win": {
"target": "nsis"
},
"mac": {
"target": "dmg"
},
"linux": {
"target": "AppImage"
}
}
```
- 测试桌面应用:`npm run build && npm run electron:serve`
- 生成可执行文件:`npm run build && npm run electron:build`,生成的文件在`electron-dist`文件夹中
个人证券持仓档案
总持仓成本:{{ totalCost.toFixed(2) }}元

持仓数量:{{ stockList.length }}只
-
{{ stock.code }} - {{ stock.name }} 数量:{{ stock.quantity }}股 单价:{{ stock.price.toFixed(2) }}元 日期:{{ stock.date }} 成本:{{ (stock.quantity stock.price).toFixed(2) }}元