# vue-cli-plugin-tq-tpl

![banner](./fed-logo.png)

配合 `@vue/cli` 3.0 通过插件快速生成前端项目模版.

## 注意事项：
- 终端运行 `vue config` 查看 `useTaobaoRegistry`、`packageManager` 信息
  * 若 `useTaobaoRegistry` 为 `true`，则运行 `vue config -s useTaobaoRegistry false` 设置成 `false`
  * 查看 `packageManager` 值为 `yarn` 还是 `npm`，并分别执行下面两个步骤，切换镜像源
- 若用 `npm` 安装依赖，则需将 `npm` 的镜像源设置成 `http://223.4.69.11:4873/`
  * 可安装 `nrm` 设置、切换镜像源
- 若用 `yarn` 安装依赖，则需将 `yarn` 的镜像源设置成 `http://223.4.69.11:4873/`
  * 运行指令 `yarn config set registry http://223.4.69.11:4873/`
## 目录

- [使用](#使用)
- [分支](#分支说明)
- [指令](#指令)
- [其他](#其他)

## 使用

>安装插件

```shell
$ vue add tq-tpl
```

>安装依赖

```shell
$ npm install
```

__`vue add tq-tpl` 后会默认执行了 `npm install` 进行依赖安装__

## 分支说明
- `master` 主分支
- `dev` 开发分支
- `releate/addTemplate` 新增后端管理模板分支（可删）
- `dev-second-phase` v1.2.0升级分支
- `dev-mtpl` 新增云图模板分支

## 指令

### normal/screen

- `npm run serve` 启动本地服务
- `npm run build` 构建打包

### framework

- `npm run serve` 启动本地服务
- `npm run framework` 构建打包基座项目

__*本地开发模式下，可以访问`/dev`路由，进入子应用本地联调模式*__

### module

- `npm run serve` 启动本地服务
- `npm run module` 构建打包子应用项目
- `npm run dev:module` 启动本联调模式

__*本地开发模式下，可以访问`/dev`路由，进入子应用本地联调模式*__

### template-env

- `npm run serve` 启动本地服务
- `npm run preview` 构建打包模版项目

__*`template-env` 类型的项目推荐在push到仓库后带入构建好的资源，方便支持预览相关功能，因此该模式下的项目也不推荐做的厚重*__

## 其他

### 注入环境变量

```shell
 $ npm run [build/framework/module] -- --app_env='{"DNS_CODE": "test"}'
```

### 是否启用 external (默认为 true)
```
  $ npm run module -- --external=false
```
默认抽离配置项:
```js
conf.externals({
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'vuex-persistedstate': 'VuexPersistedstate',
  'vuex-router-sync': 'VuexRouterSync',
  '@ourea/fetch': 'vFetch',
  ...EXTERNAL_OPTIONS,cd 
})
```

### 根据`devServer`的`proxy`配置生成`nginx.conf`

```shell
 $ npm run build -- --port=8181 --root=/home/8181/mnt/dist
```
注意： v1.1.16 版本前的依赖， `devServer` 的 `proxy` 为 `必填项`。


### 指令对应的环境变量

```shell
 $ npm run build // NODE_ENV: production
 $ npm run framework // NODE_ENV: framework
 $ npm run module // NODE_ENV: module
```

### 调试方式：
[安装本地插件](https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#%E5%AE%89%E8%A3%85%E6%9C%AC%E5%9C%B0%E6%8F%92%E4%BB%B6)

## 版本更新说明
v1.1.16 
- dev:module指令新增`端口检测功能`，默认为`3000`，可同时启动多个子应用
- 子应用中 `baseUrl` 端口号 `3000` 改成 `控制台` 输出可用的端口号。
  ```js
  process.env.NODE_ENV === 'development' && http.setOption({
    conf: {
      baseUrl: 'http://localhost:3000/api',
    },
  })
  ```
v1.1.17
- framework 模版 `build` 指令走自定义 `build` 指令

v1.2.0
- 新增 `husky` `lint-staged` 在 `git commit` 前校验 `eslint`
- 修改 `dev:module` 的环境变量由 `development` 修改为 `dev-module`

[Husky hooks skipped](https://github.com/typicode/husky/issues/639)<br>
[mac上使用sourceTree提交代码不会走husky自定义的钩子](https://ask.csdn.net/questions/1058267)

v1.2.1
- 新增 `数据可视化大屏`、`基线子项目` 模版