# uni-vue-cli

**Repository Path**: ctrlc-git/uni-vue-cli

## Basic Information

- **Project Name**: uni-vue-cli
- **Description**: vue2 + uniapp 远程脚手架
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-04
- **Last Updated**: 2023-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, vue2, vue-cli

## README

# uni-vue-cli 开发文档

基于vue2 + vue-cli

## 实现方案

依赖`Vue Cli`远程`Preset`功能，保证各个项目文件系统一致。

目录说明

```Bash
├─generator.js # 一个可以注入或是修改项目中文件的 Generator
├─package.json # package.json
├─preset.json #  包含 preset 数据的主要文件（必需）
├─prompts.js # 一个可以通过命令行对话为 generator 收集选项的 prompts 文件
├─node_modules # 依赖包文件（不可忽略）
├─template # 模板文本
|  ├─cli-wx # 微信自动化
|  |   ├─config.json # 配置文件
|  |   ├─miniprogram.js # 执行脚本
|  |   └─utils.js # 工具函数
|  ├─common # 公共文件系统
|  ├─common-ts # 公共文件系统（ts模块）
|  ├─default # 默认模板文件系统
|  └─default-ts # 默认模板文件系统（ts模块）
```

* preset.json

一个`Vue CLI preset`是一个包含创建新项目所需预定义选项和插件的`JSON`对象，让用户无需在命令提示中选择它们。

在`vue create`过程中保存的`preset`会被放在你的`home`目录下的一个配置文件中`(~/.vuerc)`。你可以通过直接编辑这个文件来调整、添加、删除保存好的`preset`。

```JSON
{
    "useConfigFiles": true,
    "cssPreprocessor": "dart-sass",
    "plugins": {
        "@dcloudio/vue-cli-plugin-uni": {
            "version": "^2.0.0-31420210305001"
        },
        "@dcloudio/vue-cli-plugin-uni-optimize": {
            "version": "^2.0.0-31420210305001"
        },
        "@dcloudio/vue-cli-plugin-hbuilderx": {
            "version": "^2.0.0-31420210305001"
        },
      
        "@vue/cli-plugin-eslint": {
            "config": "prettier",
            "lintOn": [
                "save"
            ]
        },
        "@vue/cli-plugin-babel": {
            "presets": [
                [
                    "@vue/app",
                    {
                        "useBuiltIns": "entry"
                    }
                ]
            ]
        }
    }
}
```

* prompts.js

    人机交互配置文件

* generator.js

    重点了解的三个api

  * api.render('./template')
  * api.extendPackage({})
  * api.injectImports()

    > [Generator](https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#generator)

## 集成方案介绍

### 1. 代码检测方案

相关配置文件

文件名|描述
------|------
`.editorconfig`|编辑器风格配置
`.eslintrc.js`|代码语法检测
`.prettierrc.js`|代码格式化

### 2. **GIT提交检测方案**

相关配置文件

文件名|描述
------|------
`git.sh`|分支保护
`.commitlintrc.js`|提交检测

### 3. **API环境配置实现方案**

相关配置文件

文件名|描述
------|------
`vue.config.js`|环境变量参数设置文件
`.config.js`|环境参数配置文件

需要将node环境中命令参数暴露给客户端， 获取的参数通过`chainWebpack`传递。

```Bash
npm run cli --SPACE_ENV=trial  robot=1 v=1.0.0 desc=release
```

### 4. **微信自动化上传、预览实现方案**

相关配置文件

文件名|描述
------|------
`config.json`|参数配置文件
`miniprogram.js`|自动化脚本
`utils.js`|工具函数解析指令参数

## 创建项目

```Bash
vue create --preset direct:https://gitee.com/ctrlc-git/uni-vue-cli.git#develop --clone my-project
# vue create --preset direct:ssh://git@gitee.com:ctrlc-git/uni-vue-cli.git#develop --clone my-project gitee不支持
```

## 参考文档

> [插件和 Preset](https://cli.vuejs.org/zh/guide/plugins-and-presets.html#preset)  
> [微信小程序-miniprogram-ci](https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html)