1.0.71 • Published 6 years ago

vue-cli-plugin-ljx-test v1.0.71

Weekly downloads
103
License
ISC
Repository
-
Last release
6 years ago

H5前端项目模板

基于vue-cli3插件开发集成H5常见业务

常见功能

图片预加载

相关文件:

  • src/App.vue
  • src/components/ImgsPreload
  • src/assets/imgs.json

imgs.json:当有新图片加入,执行gulp getimgsnames(或者监听该文件夹亦可,自行修改),遍历images文件夹下所有有效图片名称,执行压缩并命名后追加-optimized,输出到imgs.json,供imgsPreload使用。。

说明:

有时候预加载除了图片因素之外,异步接口的返回也可能是因素之一。此时可以使用add-conditions-num追加一个因素,代码如下:

<imgs-preload ref="imgs-preload" :preload-visible="preloadVisible" :add-conditions-num="1" @imgsLoadedAll="preloadVisible = false">
  <template #default="{ imgsPercentage }">{{ imgsPercentage }}</template>
</imgs-preload>

// ...

created() {
  this.init();
},
methods: {
  init() {
    this.$request('/url')
      .then(() => {
        // ...
        this.$refs['imgs-preload'].imgsLoaded++;
      });
  }
}

css预处理器工具类

新建项目问答时可选择安装css预处理器,并通过自动化导入文件,导入路径是styles/imports文件,即可在任意样式或vue文件使用。

imports.less示例:

// 绝对定位水平居中
.absolute-align-center {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
// 背景图
.base-background(@bg, @bgheight) {
  background-image: url("@{bg}");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: @bgheight * .01rem;
  position: relative;
  overflow: hidden;
}
// 图片
.base-image(@bg, @imgwidth, @imgheight) {
  display: inline-block;
  background-image: url("@{bg}");
  background-size: 100%;
  background-repeat: no-repeat;
  width: @imgwidth * .01rem;
  height: @imgheight * .01rem;
}

自定义reset样式

reset css使用normalize.css

自定义的reset样式,index.less

p { .reset-mp; }
img, video { object-fit: cover; }
*:not(input, textarea) { .unselect; }
img[src=''], video[src=''] { display: none; }
button { border: none; background: none; padding: 0; }
input { border: none; background-color: transparent; box-sizing: border-box; }

适配方案

问答时选择设计图尺寸,然后继续选择提供的两种rem和vw两种适配方案,其中rem使用vw+rem方式,即设计图px / 100(rem)即可,vw使用postcss-px-to-viewport插件自动转换,配置好相关参数,直接使用设计图px,打包自动转为vw。

vw+rem方式下的750.css示例:

html { font-size: 13.333333333333334vw; }
html, body { margin: 0 auto; }

@media only screen and (max-width: 320px) {
  html { font-size: 42.66666667px; }
  html, body { min-width: 320px; }
}

@media only screen and (min-width: 540px) {
  html { font-size: 72px; }
  html, body { max-width: 540px; }
}

axios请求封装

相关文件:src/utils/request.js

封装了axios的get和post:

  • baseURL根据运行环境及环境变量变化
  • 拦截了所有retCode !== 0的请求及处理其它请求错误(如Error: timeout),并Toast出来
  • 使用post请求默认使用qs表单提交,相关字段isqs

export的对象:

export const aget = ({ url = '', params = {}, opts = {} } = {}) => service.get(url, Object.assign({}, { params }, opts));
export const apost = ({ url = '', data = {}, params = {}, opts = {}, isqs = true } = {}) => {

  if(isqs) Object.assign(opts, { transformRequest: [data => Qs.stringify(data)] });
  return service.post(url, data, Object.assign({}, { params }, opts));
}
export default service;

mockjs

相关文件:src/mockjs/index.js

问答选择项,目前mockjs的方式时本地拦截返回数据,在控制台看不到请求的发出。日后考虑mock-server方式。

weixin-js-sdk

相关文件:src/utils/wx-share.js

问答选择项,封装好了旧版和新版的api,获取签名凭证的url配置在.env的VUE_APP_TICKETURL,新旧版不能同时使用。

gulp脚本发版

依据部门发版方式封装的一个脚本发版,提供测试发版和生产发版命令。

参考:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:prod": "vue-cli-service build",
  "postbuild:prod": "gulp deployprodcdn",
  "build:sit": "vue-cli-service build --mode sit",
  "postbuild:sit": "gulp deploysit",
  "getimgsnames": "gulp getimgsnames"
}

修改的webpack配置

为了提高构建速度和减少构建后的文件体积。目前使用的方式时cdn优化打包。日后考虑加入dll问答选择项。

其它

静态页访问时,设置index.html的meta缓存头:

webpackConfig
  .plugin('html')
    .tap(args => {
      args[0].meta = {
        viewport: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no',
        'X-UA-Compatible': {
          'http-equiv': 'X-UA-Compatible',
          'content': 'IE=edge'
        },
        'Cache-Control': {
          'http-equiv': 'Cache-Control',
          'content': 'no-cache, no-store, must-revalidate'
        },
        'Pragma': {
          'http-equiv': 'Pragma',
          'content': 'no-cache'
        },
        'Expires': {
          'http-equiv': 'Expires',
          'content': '0'
        },
        'utf-8': {
          'charset': 'utf-8'
        }
      }
      return args;
    });

其它预装项

  • fastclick
  • Toast from vant
  • normalize.css
1.0.71

6 years ago

1.0.70

6 years ago

1.0.69

6 years ago

1.0.68

6 years ago

1.0.67

6 years ago

1.0.66

6 years ago

1.0.65

6 years ago

1.0.64

6 years ago

1.0.63

6 years ago

1.0.62

6 years ago

1.0.61

6 years ago

1.0.60

6 years ago

1.0.59

6 years ago

1.0.58

6 years ago

1.0.57

6 years ago

1.0.56

6 years ago

1.0.55

6 years ago

1.0.54

6 years ago

1.0.53

6 years ago

1.0.52

6 years ago

1.0.51

6 years ago

1.0.50

6 years ago

1.0.49

6 years ago

1.0.48

6 years ago

1.0.47

6 years ago

1.0.46

6 years ago

1.0.45

6 years ago

1.0.44

6 years ago

1.0.43

6 years ago

1.0.42

6 years ago

1.0.41

6 years ago

1.0.40

6 years ago

1.0.39

6 years ago

1.0.38

6 years ago

1.0.37

6 years ago

1.0.36

6 years ago

1.0.35

6 years ago

1.0.34

6 years ago

1.0.33

6 years ago

1.0.32

6 years ago

1.0.31

6 years ago

1.0.30

6 years ago

1.0.29

6 years ago

1.0.28

6 years ago

1.0.27

6 years ago

1.0.26

6 years ago

1.0.25

6 years ago

1.0.23

6 years ago

1.0.22

6 years ago

1.0.21

6 years ago

1.0.20

6 years ago

1.0.19

6 years ago

1.0.18

6 years ago

1.0.17

6 years ago

1.0.16

6 years ago

1.0.15

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago