❤
npm
Sign UpSign In

vue-cli-plugin-octopus-cli

0.2.4 • Public • Published

vue-cli-plugin-octopus-cli是什么

基于vue-cli3 快速搭建移动端开发环境，目录结构同H5-vue-template

使用流程

// 新建一个空白的项目文件夹
mkdir projectName
cd projectName
yarn init --yes
 
// 安装vue-cli-plugin-octopus-cli
vue add octopus-cli
 
// 关于安装选择项
 ? Please choice rem or vw. (选择适配方案)
 ? are you want to import a mock server?(Y/n) (选择是否导入mock服务， 默认true)
 
// 安装依赖
yarn install

H5-vue-template介绍

技术方案

  1. 总体技术方案

    • vue-cli3 脚手架搭建
    • 适配方案：vw 或 rem 可选
    • jsbridge 与原生 APP 交互
    • 接入 sentry 错误上报
    • 接入性能监控
    • 多页面打包
    • 多页分模块打包
    • 多页面分模块一次性打包
    • 缓存方案：离线包+ 资源预缓存（app-config.json）

  2. 依赖包介绍

    • lodash
    • octopus-ui
    • octopus-util
    • @ued2345/laserbeak
    • @ued2345/eslint-config
    • @ued2345/stylelint-config

  3. 兼容性

    • Android 4.4+
    • iOS 8+

  4. 统一使用yarn安装依赖包。

目录结构介绍

├── _build                      // 缓存配置文件及获取版本号util
│   └── app-config.json         // 缓存配置清单默认配置项
│   └── build.js                // 生成缓存配置清单app_config.json文件
│   └── build-zip.js            // 生成静态资源zip包
│   └── builds.js               // 多项目分模块一次性打包
│   └── util.js                 // util方法，包含生成版本号方法
├── public                      // 打包时自动拷贝到打包后的文件夹内
│   └── staticPages             // 存静态.html文件(文件名可自定义)
├── htmlTemplate                // 放置html模板
│   ├── index.html              // index页面模板（rem适配）
│   └── helpCenter.html         // helpCenter页面模板 (vw适配)
├── vendor                      // DllPlugin抽取公用的第三方包，若无增减仅需生成一次（生成方法为npm run dll）
├── src
│   ├── api                     // ajax请求方法
│   │   └── index               // 同pages目录结构
│   │       └── index.js
│   ├── assets                  // 静态资源目录，会经过vue相关loaderPlugin编译
│   ├── components              // 公共业务组件
│   ├── filters                 // 过滤器目录
│   ├── mock                    // mock数据
│   │   ├── data
│   │   │   └──index-index.js   // index page -> index组件调用的json数据
│   │   ├── index               // index page
│   │   │   ├── index.js        // index view调用的接口数据
│   │   ├── jsBridgeData        // jsbridge调用数据
│   │   ├── index.js            // mock数据入口
│   │   └── jsBridgeMethods.js
│   └── pages                   // 多页应用（以下每个文件夹相当于一个单页应用）
│       ├── helpDetail          // 帮助与反馈模块
│       └── index               // 首页模块及每个模块相同的文件结构
│           ├── _components     // index模块内公用组件
│           ├── router          // 路由配置
│           ├── store           // vuex状态管理
│           ├── view            // 页面文件
│           │   └── index.vue
│           └── main.js         // 每个模块页，webpack入口必须统一命名为main.js
├── plugins                     // 公用Vue mixins、dirctive等插件
├── utils                       // 公用工具方法
│   ├── monitorHandler.js       // 接入sentry上报和性能监控
│   ├── global.js               // 全局方法jsCallNative
│   ├── request.js              // axios封装
│   └── requestUtil.js          // axios拦截加密和解码
├── APP.vue                     // 主组件，页面入口文件
├── .env                        // 在所有的环境中被载入的环境变量。为一个特定模式准备的环境文件的 (例如 .env.pro) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
├── .env.[mode]                 // 只在指定的模式中被载入，例如： vue-cli-service build --mode pro
├── .env.local                  // 在所有的环境中被载入，但会被 git 忽略
├── .stylelintrc.js             // @ued2345/stylelint-config 配置
├── babel.config.js             // 可在此文件中引入polyfill、ui库的样式配置
├── page.config.js              // 多页配置项
├── postcss.config.js           // 优先取vue.config.js里面的配置，若vue.config.js无配置，则取postcss.config.js 配置
├── README.md                   // 项目说明文档
├── title.config.js             // 单页面title配置
├── vue.config.js               // 项目配置文件，用来修改vue-cli3的默认配置
└── webpack.dll.conf.js         // dllplugin配置

env 环境配置项介绍

VUE_APP_APPNAME = "XQUA"; // 判断是否在APP内
VUE_APP_ISENCRYPT = false; // 是否开启加解密
VUE_APP_COOKIE ="I=i=500034266&u=500034266&n=%CA%D6%BB%FA%D3%C3%BB%A7_3b06c22276&m=300&t=1571627563.68461200&s=9acbabd12edf80f3e47f7727d8fb1a4a&v=1.1";
VUE_APP_TOKEN = "f9f05d8ef436e73ff30351c8a0476eff";
VUE_APP_ENCRYPTSTRTYPE = "1,"; // 加密类型
VUE_APP_CDNURL = "//imgwx1.2345.com/toutiaoimg/cdn/h5/"; // 配置CDN地址
VUE_APP_USECDN = index, helpCenter; // 用到cdn模板，用','分隔

适配方案选择

  1. rem 适配

  • 插件：postcss-plugin-px2rem

  • html 文件：如 index.html(html 标签： style="font-size: 10vw;", body 标签： style="font-size: 12px;")

    1. 由于 html 设置 font-size:10vw，在 androidv4.4.2 手机上存在 vw 兼容问题，如果项目需要兼容 4.4.2 机型，可以引入 viewport-units-buggyfill.js。
    2. 如helpCenter.html (引入 viewport-units-buggyfill.js 文件)

  • postcss.config.js: rootValue: 75, // 设计稿宽度（750）/10, 根据设计稿宽度设置

2、vw 适配

  • 插件：postcss-px-to-viewport
  • html 文件：如 helpCenter.html (引入 viewport-units-buggyfill.js 文件)
  • postcss.config.js: viewportWidth: 750 // 设计稿宽度

注意事项

  1. 主入口文件统一命名为 main.js
  2. template 模板放在 htmlTemplate 目录下，名字同 src/pages/{template}/
  3. 先要运行：yarn dll（生成 dll 文件）
  4. 多页面多模块单独打包运行:

    生成环境（pro）:

    • yarn build:prod {page}

    测试环境 (beta)

    • yarn build:test {page}
  5. 多页面多模块单独打包的快捷方式：一次性打多个模块：

    生成环境（pro）:

    • yarn builds:prod

    测试环境 (beta)

    • yarn builds:test
  6. 多页面打包

    生成环境（pro）:

    • yarn build:prod

    测试环境 (beta)

    • yarn build:test
  7. 生成缓存配置文件 app_config.json 和静态资源 zip 包
    • yarn cacheBuild

构建流程

  1. 开发环境运行

    yarn serve
     
    "serve": "vue-cli-service serve --mode dev"

  2. 规范检查

    // css lint检查
    yarn lint-css
     
    "lint-css": "stylelint src/**/*.scss src/**/*.vue"
     
    // eslint修复
    yarn lint
     
    "lint": "vue-cli-service lint --fix",

  3. 运行 dllplugin 生死 dll 文件

    yarn dll
     
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js",

  4. 测试环境 - 打包（不同项目打包命令不一样）

    // 生产环境打包： 多页面多模块单独打包(dist/index/index.html)
    yarn build:test index
     
    // 生成环境打包：多页面打包(dist/xx.html)
    yarn build:test
     
    "build:test": "vue-cli-service build --mode beta --page",
     
    // 生产环境打包： 多页面多模块单独打包的快捷方式：一次性打多个项目包：
    yarn builds:test
     
    "builds:test": "node ./_build/builds.js --mode beta"

  5. 生成环境 - 打包（不同项目打包命令不一样）

    // 生产环境打包： 多页面多模块单独打包(dist/index/index.html)
    yarn build:prod index
     
    // 生成环境打包：多页面打包(dist/xx.html)
    yarn build:prod
     
    "build:prod": "vue-cli-service build --mode prod --page",
     
    // 生产环境打包： 多页面多模块单独打包的快捷方式：一次性打多个项目包：
    yarn builds:prod
     
    "builds:prod": "node ./_build/builds.js --mode prod"

  6. 生成缓存配置文件和 zip 包

    yarn cacheBuild
     
    "cacheBuild": "node ./_build/build.js"

  7. 打包结果分析

    // 多页面打包(yarn build:test)构建结果分析
    yarn report
     
    "report": "vue-cli-service build --report --mode beta",
     
    // 单项目构建结果分析
    yarn reports index
     
    "reports": "vue-cli-service build --report --mode beta --page",

    注： 运行命令后，在打包的文件中有个 report.html 文件，访问该文件即可

生成缓存配置文件

  1. 运行命令：npm run cacheBuild
  2. _build 文件下新建 app-config.json 文件
    • baseUrl: String // 主域名
    • cdnUrls: Array // cdn 主域名, 必须带有 https:或 http:(供客户端 cdn 下载资源，)
    • charset：String // 写入缓存编码格式
    • orderHtml: Array // html 排序,优先缓存
    • outputDir：String // build 构建后生成的文件名
    • zipDir: String // 静态资源 zip 包名，和 APP 端约定
  3. _build 文件夹新增 build.js、build-zip.js
    • build.js: 生成 app-config.json 文件。
      • lastModified: 发布时间，便于检验是否是最新文件。
      • routes: html 写入缓存。
        • url: html 的 url
        • content: html 文本内容
        • regx: 正则，用于路由为 history 模式下是 url 正确指向 html
        • md5: html 内容生成 md5
      • resources：静态资源 css/js/image 写入缓存
        • url: 资源文件的 url(cdn资源或非cdn资源，都必须是相对路径)
        • md5: 资源 内容生成 md5
        • cdnIndex: 资源对应的 cdn地址(如无cdn资源，不配置该字段)
    • build-zip.js: 生成 zip 包
      • zip 包：config.js/dist.zip/md5 三个文件
        • config.json: app 解压文件后根据 config.json 文件 md5 为 key 存入缓存
        • dist.zip 包：build 后的 dist 文件
        • md5：dist.zip 的 md5

注意：

  1. FastH5SDKv1.1版本支持多cdn配置，新增cdnUrls数组，对应resources资源中的cdnIndex字段
  2. 如果要支持cdn资源，切记客户端FastH5SDK要升级到v1.1
  3. 无cdn资源，无cdnIndex字段
  4. cdnUrls中的cdn链接要带上https或http。
  5. resources各资源url均采用相对路径。

Readme

Keywords

Package Sidebar

Install

npm i vue-cli-plugin-octopus-cli

Weekly Downloads

9

Version

0.2.4

License

ISC

Unpacked Size

619 kB

Total Files

81

Last publish

Collaborators

  • yangbin0911
Try on RunKit
Report malware