# phx-account-vue

**Repository Path**: Jrepository/phx-account-vue

## Basic Information

- **Project Name**: phx-account-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-29
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 环境

### 安装Node.js

# phx-account-vue

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### Install Axios

npm install axios

### Install Element Plus

* npm install element-plus

* 在main.js中全局配置‌

```js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```

### 安装Vue Router

* npm install vue-router@4

* main.js中配置路由

```js
// 导入路由配置
import router from './router'
// 创建Vue应用实例（已存在）
const app = createApp(App)
// 挂载路由
app.use(router) 
```

* [index.js](src/router/index.js)

* app.vue中使用路由视图

```
 <!-- 内容区 -->
 <el-main style="padding: 20px">
    <router-view />
 </el-main>
```

* 默认激活菜单项

[index.js](src/router/index.js)

```js
 // 重定向到 /account/record
 {
    path: '/',
   redirect: '/account/record'
  },
```

[LayoutSide.vue](src/components/layout/LayoutSide.vue)

```yaml
<el-menu
default-active="/account/record"
router>
```

### 处理日期 向前一天

* 方式1：el-date-picker 中添加 value-format="YYYY-MM-DD"
* 方式2：
    * npm install dayjs

    * main.js

      ```js
      import dayjs from 'dayjs'
      
      //Vue.prototype.$dayjs = dayjs
      或
      // Vue 3 中挂载全局属性的正确方式
      // app.config.globalProperties.$dayjs = dayjs
      ```
    * 组件中使用
      ```js
      saveEdit(record){
        // 解决日期向前一天的问题
       const payload = { ...record };
       payload.recordDate = this.$dayjs(payload.recordDate).format('YYYY-MM-DD');
        axios.post('/api/phx/account/record/save', payload){
      }
      ```

### Echarts 图表库

* npm install echarts

* 引入
    * main.js 中全局引入，‌组件中通过 this.$echarts 访问
      ```js
      import * as echarts from 'echarts'
      app.config.globalProperties.$echarts = echarts
      ```

    * 在需要使用的组件中引入
      ```js
      import * as echarts from 'echarts'
      ```

### 分页插件显示中文

main.js

```
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
locale: zhCn
})
```

### 部署

[nginx.conf](nginx.conf)

```
docker run -d --name vue-nginx -p 9001:80 \
-v /home/phx/my-java/vue/dist:/usr/share/nginx/html \
-v /home/phx/my-java/vue/nginx.conf:/etc/nginx/nginx.conf \
nginx

```

```
docker run -d --name vue-nginx-2 -p 9002:80 \
-v /home/phx/my-java/vue/dist:/usr/share/nginx/html \
nginx
```

* 挂载时能调用接口，但是页面乱了

 ```
# 静态资源统一处理
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Vary Accept-Encoding;
access_log off;
}
```

* 页面仍然乱
  ResponseHandler 中 content-type:text/plain
* 加上 include /etc/nginx/mime.types; default_type application/octet-stream; 解决了