# diy-vue-cli

**Repository Path**: lintingdui/diy-vue-cli

## Basic Information

- **Project Name**: diy-vue-cli
- **Description**: 基于vue自带的脚手架，二次开发封装，平时作为学习测试vue框架用。作为实际开发vue项目使用，使用下载zip的方式，在工作项目下副本使用即可
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-28
- **Last Updated**: 2026-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vueDiyCli

#### 介绍

自制工作用 Vue 脚手架

#### 软件架构

软件架构说明

#### 安装历史记录

1. yarn add vuex
2. yarn add -D glob less less-loader@4.1.0
3. yarn add axios vue-axios mockjs mockjs-async
4. yarn add moment lodash element-ui font-awesome
5. yarn add md5
6. yarn add echarts
7. yarn add qiniu-js

#### 安装教程

1.  npm install 或 yarn install
2.  xxxx
3.  xxxx

#### 使用说明

1.  npm run dev 或 npm run build
2.  备忘 UI 设计稿的地址(s):[]
3.  备忘接口文档的地址(s):[]
4.  备忘 FTP 地址与路径
5.  备忘项目名，在 dist 目录下和 FTP 路径下中文同步标识，用于查对

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

### 修改记录（倒序）

#### 2026-07-07:

1. 尝试安装 cross-env 工具，在 package.json 里定义统一的脚本

#### 2025-3-24:

1. 修改 dist/server_config.js 使其可以同时使用 CommonJS 的 require 引入，和 ES6 的 import
2. 在 src 下增加 mergeConfig.js，并在其中定义 defaultConfig；该功能用于合并配置文件，
   1. 开发/测试/生产中， all_server_config 都可以 ES6 引入
   2. 开发中传入的参数 server_config 一般为 null，配合 defaultConfig 可使用指定的配置
   3. 测试/生产中，server_config 由 dist/server_config.js -> window.server_config 传入
   4. 在开发阶段配合自带的自检功能，检查选中的环境配置中是否完整
   5. 测试/生产中，可在服务器上使用相对固定的配置，非必要可以不用更新
3. 在 src/main.js 中增加并使用 mergeConfig 方法，合并配置给全局调用
4. 在 src/Axios/index.js 中增加并使用 mergeConfig 方法，合并配置返回 host 或其他配置给接口调用

#### 2024-9-29：

1. 为 router 添加导航守卫的功能，并简单测试

#### 2023-8-28：

1. 重新测试 Git

#### 2023-7-31:

1. 重新思考 mixins 的用法，首先考虑对常见的 form->table+page 页面的重新抽象
2. 未完待续

#### 2023-7-20:

1. 从多个项目中总结了 filter 的最佳使用方法是在 main.js 注册使用。
2. 但已知 Vue3 将无法使用 filter 及其方法，
3. 现对 Vue3 保持观望态度，并期望 Vue4 今早出现，并跨代学习升级，
4. 根据现有项目经验，收录 filter 到 main.js 中，哪怕后期需要重新学习 Vue3

#### 2023-7-19:

1. 项目中遇上 table 需要计算高度的时候较多，思考尝试试利用 el-containe 做布局（app.vue，测试）

#### 2023-6-16：

1. 有不少项目需要判断当前的协议，比方有的项目是 http 协议，有的是 https 协议，同时导致 websocket 需要对应的 ws 协议或 wss 协议。所以在 axios_config 里增加相应的逻辑，但暂时没改完后面写入协议的部分；
2. 将 { axios , api } 中的 api 做进一步的分组，利用分组中 this 的指向给各组起名标记，也许后期有其他用途……请求不同的 host？？……
3. 同时项目中出现请求中带 MD5 token 验证的需求，虽然不是必须的，但值得备忘收录在 axios/index.js 的添加请求拦截器中
4. 同时请记住，在 axios 的拦截配置 config 中很容易出现无效路径，用 lodash 的 set 会保险一点

#### 2023-6-6：

1. 使用 mixins 分离部分通用组件的常用逻辑，现有 tableData 和 pagination 两个组件可用逻辑分离出来
2. 以上是其他项目中测试可用的，先暂存，后期找时间重整 components 和 mixin 以用于其他项目中

#### 2023-5-15:

1. 增加总线订阅模式 在 main.js 中增加 bus 作为总线

#### 2023-5-4:

1. 移除 prettier.config.js 再改回使用 .prettierrc ，将思路记录于笔记中
2. 测试 mapState mapGetters mapMutations mapActions 的映射使用方法，重新整理成笔记，不再组件中测试了

#### 2023-5-3:

1. 查阅 prettier 官网并逐项配置测试，后选择使用 prettier.config.js 进行配置，并注释之
2. 重新调整 main.js ，添加于开发时引入库的提示.
3. 在 components\HelloWorld\dataStore.vue 中全面测试 store 的各种调用方法（初步）

#### 2023-4-13：

1. 重新调整并测试了组件内使用 src 分离，同时测试了 JSON 引入和使用

#### 2023-4-11：

1. 安装 **mockjs-async** 模块，在 **axios/index.js** 中设置测试和模拟用的请求数据；
2. 在 axios/mockjs 中设置 Mock 的拦截规则和 mock 数据；
3. 在 axios/index.js 中按环境引入拦截规则；
4. 在各组件中按规则发起模拟请求，以获得模拟数据；
5. 试用 **table** 和 **pagination** 组件组成一个数据表以测试 mock 数据，通过；
6. 试用 **select** 组件组成一个数据表以测试 mock 数据，通过；

#### 2022-8-26

1. 安装 **md5** 模块，给 **assets/websocker.js** 模块备用
2.

#### 2022-8-25

1. 反思 **axios** 的请求拦截器和响应拦截器，
2. 响应拦截器增加 _response.status_ == 200，直接脱壳返回 data

#### 2022-8-24

1. <del>思考 webpack 的/config/可配置选项与环境的关联，准备对【2022-1-26】配置的 server_config.js 相关环境检测机制做一些调整</del>
2. <del>原用来做配置文件的\src\Axios\config.js 删除，将相关逻辑重整到\config\dev.env.js 及\config\prod.env.js 下面</del>
3. 上面的思考后放弃，具体思路记录于 src\Axios\readme.md 中

#### 2022-8-23

1. 测试 vue-router，并尝试改变部分写法，用于区别环境下不暴露自测页面
2. 接 1，发现 **\$route.params** 和 **\$route.query** 两个可用的属性，并对自制的 getUrlArgs 进行对比
3. 收录 **BrowserType.js** 这个自制的客户端版本查询工具
4. 收录 **websocker.js** 这个自制的 **websocker** 的模块

#### 2022-1-28

1. <del>在 **main.js** 中通过对 **package.json** 读取 **name** 属性，对 **title** 进行标记</del>
2. <del>接 1，并计划再后续开发中对 title 做+=操作以识别一部分参数</del>
3. 现已经无效

#### 2022-1-26

1. gitLab 上的该项目在 gitee 上镜像，手动同步之前测试的可用功能
2. 重装部分依赖 moment lodash element-ui font-awesome
3. webpack.dev.conf.js 中增加 getIPAdress 方法，用于本地测试用
4. 修改打包用的入口 index.html，增加部分必要的 meta 和一些 script
5. 对应上一条的修改，根目录下增加 server_config.js 文件，该文件给对应 FTP 做标记，打包后文件访问该文件了解当前环境，本地开发无法访问则返回 undefined