# apms

**Repository Path**: wang_hua_kun/apms

## Basic Information

- **Project Name**: apms
- **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
```

#### 项目保存自动格式化设置

```
安装插件  EditorConfig
设置 -> 文本点击器 -> 格式化 -> 勾选 Format on Save

保存自动格式化设置
```

### 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 图片
│   └── girl.jpg
├── components 公共组件
│   └── Avatar.vue 头像组件
├── env.d.ts 声明 ts 模块文件
├── hooks 自定义 hooks
├── net 自动化接口工具
├── permission.ts 权限管理
├── router 路由配置
│   └── index.ts
├── store 公共数据仓库
│   ├── getters.ts 所有 getters
│   ├── index.ts 加载所有模块
│   └── modules 所有模块
│   └── user.ts
├── style 公共样式
│   └── index.less
├── utils 工具包
│   ├── auth.ts token 存储管理
│   ├── get-page-title.ts 获取页面标题
│   └── setting.ts 配置文件
└── views views 所有页面页面
├── error
│   └── NotFound.vue
├── home
│   └── index.vue
├── login
└── index.vue
App.vue 入口页面
main.ts 入口文件 加载组件 初始化等

````

### 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, 您也可以通过项目案例代码来学习