# acrm

**Repository Path**: wang_hua_kun/acrm

## Basic Information

- **Project Name**: acrm
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev_wk
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-07
- **Last Updated**: 2023-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# apms-front-cli

## 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/).

项目如果报"git add . && git-cz undefined  通过下面命令安装即可
npm install -D  @commitlint/cli @commitlint/config-conventional commitizen conventional-changelog-cli cz-customizable standard-version

# Vue 3 + Typescript + Vue-Cli(Webpack)

提示：框架基于 Vue3的全家桶，不支持 IE11，主要特点如下

响应式 reactivity-api

组合式 composition-api

单文件组件 (SFC)
```<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖```

## 推荐编辑器与插件

推荐使用 vscode 代码编辑器配合 Volar 插件极速开发

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

请将插件 Vuter 禁用，它只支持 Vue2

## 主要模块依赖

less
antd-design-vue
dayjs
@types/lodash
```
src
├─assets
│  │  └─images  静态图片
│  ├─components 公共组件
│  │  ├─index
│  │  ├─layout   布局组件
│  │  └─teleport 传送门组件
│  ├─hooks   全局封装hooks
│  ├─net     生成的请求文件
│  │  └─protos
│  ├─router 全局路由文件
│  ├─store  状态管理
│  │  └─modules 
│  ├─styles 全局样式
│  ├─types 全局类型
│  └─views 视图
│      ├─auditManagement
│      ├─channelTrackStatistics
│      ├─commissionManagement
│      ├─feedback
│      ├─home
│      │  └─component
│      ├─homeView
│      ├─mine
│      ├─preparationStoreManagement
│      ├─storeDwellerManagement
│      ├─storePriceQuery
│      ├─storeWardRoundManagement
│      └─templateManagement
└─tools  生成请求配置文件
    ├─utils
    └─wonder_proto_generator
        ├─format
        ├─generator
        ├─interface
        │  └─component
        ├─homeView
        ├─mine
        ├─preparationStoreManagement
        ├─storeDwellerManagement
        ├─storePriceQuery
        ├─storeWardRoundManagement
        └─templateManagement
```

### Vue-Cli5（Webpack5）Vue3 升级指南

安装 vue-cli
npm install -g @vue/cli

升级 vue-cli
npm update -g @vue/cli

在vue.congig.ts 新增 configureWebpack 对象来配置 webpack
该对象将会被 webpack-merge 合并入最终的 webpack 配置。

```js
module.exports = {
  configureWebpack: {
    
  }
}
```

webpack 5 不再自动 polyfill Node.js 的核心模块
查看webpack官网地址 [链接地址](https://webpack.docschina.org/configuration/resolve/#resolvefallback)

这意味着我们不能在使用 Node.js 的核心模块 path
在处理文件的绝对路径引入时，我们经常需要时 webpack 的 resolve.alias 来设置别名
用 path.reslove 将 "@" 来代表当前目录的 './src' 路径。

现在我们这样处理，其他 nodejs 模块类似
安装依赖 npm i path-browserify -D
修改 vue.congig.ts 代码

```ts
configureWebpack: {
    resolve: {
      fallback: {
        path: require.resolve('path-browserify')
      }
    }
  }
```

然后我们可以 ```const path = require('path')``` 来 path 模块

Vue3中全局属性配置方法
main.ts

```ts
app.config.globalProperties.$message = message
```

页面中使用

```ts
const instance = getCurrentInstance()
const { $message } = instance.appContext.config.globalProperties
```

自定义指令配置方法 具体生命周期变更请查看官网

```js
const app = Vue.createApp({})

app.directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    // binding.value 是我们传递给指令的值——在这里是 200
    el.style.top = binding.value + 'px'
  }
})
```

本项目使用插件的模式把指令统一封装处理了
具体为main.ts中的以下代码中

```ts
import btnDirective from './directive/btnDirective'

app.use(btnDirective)
```

其他主要升级请查看官网的 响应式API 和 组合式API

包括 Vue-Router 、 Vuex 中组合式API, 您也可以通过项目案例代码来学习