vue-cli-plugin-tq-tpl

vue-cli-plugin-tq-tpl

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

目录

• 使用
• 分支
• 指令
• 其他

使用

安装插件

$ vue add tq-tpl

安装依赖

$ 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到仓库后带入构建好的资源，方便支持预览相关功能，因此该模式下的项目也不推荐做的厚重

其他

注入环境变量

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

是否启用 external (默认为 true)

  $ npm run module -- --external=false

默认抽离配置项:

conf.externals({
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'vuex-persistedstate': 'VuexPersistedstate',
  'vuex-router-sync': 'VuexRouterSync',
  '@ourea/fetch': 'vFetch',
  ...EXTERNAL_OPTIONS,
})

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

 $ npm run build -- --port=8181 --root=/home/8181/mnt/dist

注意： v1.1.16 版本前的依赖， devServer 的 proxy 为 必填项。

指令对应的环境变量

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

调试方式：

安装本地插件

版本更新说明

v1.1.16

• dev:module指令新增端口检测功能，默认为3000，可同时启动多个子应用
• 子应用中 baseUrl 端口号 3000 改成 控制台 输出可用的端口号。

  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
mac上使用sourceTree提交代码不会走husky自定义的钩子