# hawthorn-vue-cli

**Repository Path**: xukaixing/hawthorn-vue-cli

## Basic Information

- **Project Name**: hawthorn-vue-cli
- **Description**: hawthorn-vue-cli前端工程脚手架
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://github.com/xukaixing/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-12
- **Last Updated**: 2022-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex, Element-UI

## README

# 说明

`hawthorn-web-vue` hawthorn 前端工程（vue）历史版本记录  
 作者:andy.ten@tom.com & xukaixing@hotmail.com

## 前序

1. 安装全局`nodejs` 请使用`v12.16.0`及以上版本，建议使用`nvm`管理 nodejs 多个版本
2. 建议使用`yarn`管理 npm 依赖
3. 前端开发 ide 建议使用`vscode:latest`, 必要的插件列表:
   - `Vetur` : 支持.vue、.ts、.sass 文件的语法高亮显示以及代码补全提示
   - `EditorConfig` : 代码格式化工具，无 lint 检查代码语法能力
   - `Prettier` : 代码格式化工具，无 lint 检查代码语法能力
   - `Eslint` : 校验脚本语言语法工具
   - `Stylelint` : 校验css语法工具
  
## 版本 - last >= 3

> v1.3.2 : 2022.05.12
>> 新增HtUpload附件管理组件
>> 附件上传预览、删除功能优化
>> 实现附件下载功能
>> 实现excel导入功能
>> 优化dialog、table组件，优化计算高度方法

---

> v1.3.1 : 2022.05.01
>> 实现表格操作列明细popover框功能
>> fetch增加通用获取数据
>> 新增HtCheckbox、新增HtCheckboxGroup自定义组件

---

> v1.3.0 : 2022.04.25
>> 实现表格操作列动态配置，并设置默认icon以及回调函数
>> 实现新增方法和新增插入列表第一行方法
>> 实现修改方法和修改列表中选中行方法
>> 按钮组件增加confirm参数，点击按钮是否带有confirm框
>> 重构表格导出方法

---

> v1.2.9 : 2022.04.22
>> 实现表格refer自定义列内容
>> 新增HtSwitch组件定义
>> userMng列表增加HtSwitch组件展示样例
>> 新增查询展开、收起按钮，以及自动控制按钮展示逻辑
>> 增加展开、收起快捷键
>> 增加列表导出按钮封装以及列定义，增加导出按钮loading和disabled控制

---

> v1.2.8 : 2022.04.20
>> 实现表格搜索功能
>> 新增popover插件封装
>> 实现表格表头下拉菜单筛选功能
>> 实现表格当前页排序功能

---

> v1.2.7 : 2022.04.15
>> 实现全局快捷键绑定
>> 去掉组件内定义的快捷键，使用全局定义方式
>> 实现查询、重置按钮定义组件
>> 实现重置按钮全局统一定义方法
>> 统一迁移公共方法至package，为后期统一升级做准备
>> 实现ht-table表格组件,实现组件自适应列宽、自适应高度
>> 实现表格分页组件集成
>> 实现表格后台排序功能

---

> v1.2.6 : 2022.04.14
>> 修改引入elementui为按需方式引入
>> 解决按需引入后覆盖scss问题

## 运行

### 使用 `yarn` 或 `npm` 命令

```bash
# 安装依赖
$ yarn install 或 npm install

# 启动开发服务
$ yarn dev 或 npm run dev

# 启动构建生产服务
$ yarn build 或 npm run build

# 本地预览打包后dist目录应用：
$ npm install serve -g 
$ serve -s ./dist
```

## 模块

```text
-
```

## 依赖

推荐使用 `vue ui` GUI 添加

- `husky` git hook 依赖 npm install husky --save-dev
- `lint-staged` 关联 git 操作依赖 npm install lint-staged --save-dev
- `eslint`
- `@vue/babel-plugin-transform-vue-jsx` babel.config.js 中配置的 jsx 转换依赖
- `babel-plugin-transform-remove-console` babel移除console语句插件
- `sass、sass-loader` sass、scss解析器
- `script-ext-html-webpack-plugin` html内嵌脚本插件
- `vuex` npm install vuex@3 --save vuex@3对应vue@2版本
- `vue-router`: npm install vue-router@3 --save vue-router@3对应vue@2版本
- `js-cookie`: js处理cookie组件
- `svg-sprite-loader`: svg雪碧图loader
- `nprogress`: 网页顶部进度条插件
- `qs`: qs.stringify处理json串为url参数格式

## 目录

```目录

```

### 常见问题

- `安装yarn`

  ```text
  使用npm安装：$ npm install -g yarn
  查看版本：$ yarn --version
  ```

- `全局安装eslint`

```text
  使用npm安装：$ npm install -g eslint babel-eslint
  注意： 如果使用nvm管理不同的nodejs版本，需要在当前使用版本上执行命令
```

- `配置镜像加速`

  ```text
  配置淘宝的镜像源： $ npm config set registry https://registry.npm.taobao.org
  还原npm镜像：$ npm config set registry https://registry.npmjs.org/
  清除缓存：$ npm cache clean --force
  ```

- `linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题`

  ```text
  1. 单独安装：$ npm install --unsafe-perm node-sass 
  2. 直接使用：$ npm install --unsafe-perm
  ```

- `切换nodejs版本`

  使用nvm命令： nvm alias default 版本号  </br>
  注意切换完后，重启vscode

- `运行打包后的dist`

  全局安装serve命令： `npm install -g serve` </br>
  运行：`serve -s dist`

## 主页

- 欢迎访问个人 [github-xukaixing](https://github.com/xukaixing) 主页.
- 欢迎访问个人 [gitee-xukaixing](https://gitee.com/xukaixing) 主页.