!2 基础模板v1.1.0

* !1 提出模板v1.1.0
* docs: README.md
* feat(pinch): alloy finger实现图片的pinch放大缩小

.eslintcache

@@ -1 +1 @@
-[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js":"1","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js":"2"},{"size":335,"mtime":1624344979998,"results":"3","hashOfConfig":"4"},{"size":1742,"mtime":1624344980012,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js",[]]
+[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js":"1"},{"size":485,"mtime":1624427196289,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js",[]]

CHANGELOG.md

@@ -1,4 +1,11 @@
-# [0.1.0](https://gitee.com/mongos/uni-cli-template/compare/v1.0.1...v0.1.0) (2021-06-23)
+# [0.1.0](https://gitee.com/mongos/uni-cli-template/compare/v1.0.1...v0.1.0) (2021-06-24)
+
+### 🌟 新功能
+范围|描述|commitId
+--|--|--
+ pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://gitee.com/mongos/uni-cli-template/commits/de01343)
+ 富文本插件 | 富文本插件demo测试 | [ed3d644](https://gitee.com/mongos/uni-cli-template/commits/ed3d644)
+
 
 ### chore
 范围|描述|commitId

README.md

@@ -1,19 +1,73 @@
 # tall-mui-cli
 
-## Project setup
+## 项目运行
+
+### 安装依赖
+```
+yarn
+```
+
+### 本地环境运行
++ h5
+```
+yarn dev:h5
+```
+
++ 微信小程序
+```
+yarn dev:mp-weixin
+```
+
++ app
 ```
-yarn install
+yarn dev:app-plus
 ```
 
-### Compiles and hot-reloads for development
+### 生产环境构建
+
++ h5
 ```
-yarn serve
+yarn build:h5
 ```
 
-### Compiles and minifies for production
++ app
 ```
-yarn build
+yarn build:app-plus
+```
+
++ 微信小程序
+```
+yarn build:mp-weixin
 ```
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## 代码提交
+
++ 项目设置了commit lint, commit信息验证;运行`yarn cz` 命令依次填写commit信息即可
++ 以及pre-commit钩子执行eslint代码格式检测, 代码格式不符合规则无法提交
+
+```
+yarn cz
+```
+
+## 技术栈
+
+### UI及工具库
++ uni-app的cli构建版本
++ vuex vue官方状态管理库
++ tailwindcss 公共样式库(注意这个版本不是最新版本, 最新版本安装后报错)
++ uview-ui uni-app组件库
++ alloyfinger 移动端手势库
++ dayjs 时间处理库
++ pwa 处理缓存, 构建离线应用
+
+
+### 构建相关
++ sass node-sass
++ prettier 自动格式化代码
++ eslint 代码可是校验
++ commitlint git commit信息校验
++ husky lint-staged git钩子处理commit校验及eslint代码检测
++ vue-cli-plugin-mock mock数据

package.json

@@ -62,14 +62,13 @@
     "@dcloudio/uni-stat": "^2.0.0-31920210609001",
     "@tailwindcss/postcss7-compat": "^2.2.0",
     "@vue/shared": "^3.0.0",
+    "alloyfinger": "^0.1.16",
     "autoprefixer": "^9",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.5",
-    "flyio": "^0.6.2",
     "postcss": "^7",
     "regenerator-runtime": "^0.12.1",
     "register-service-worker": "^1.7.1",
-    "right-pad": "^1.0.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "uview-ui": "^1.8.4",
     "vue": "^2.6.11",
@@ -92,7 +91,6 @@
     "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "vue-cli-plugin-mock": "^1.0.3",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.11.0",
@@ -114,6 +112,7 @@
     "sass": "^1.35.1",
     "sass-loader": "10",
     "vue-cli-plugin-commitlint": "~1.0.12",
+    "vue-cli-plugin-mock": "^1.0.3",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

public/index.html

@@ -23,7 +23,11 @@
         </noscript>
         <div id="app"></div>
         <!-- built files will be auto injected -->
-
+        <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
+        <script>
+  // VConsole 默认会挂载到 `window.VConsole` 上
+  var vConsole = new window.VConsole();
+</script>
     </body>
 
 </html>

src/main.js

@@ -3,9 +3,12 @@ import App from './App';
 import './registerServiceWorker';
 import uView from 'uview-ui';
 import './common/styles/index.css';
+import AlloyFinger from 'alloyfinger';
+import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue';
 
 Vue.config.productionTip = false;
 Vue.use(uView);
+Vue.use(AlloyFingerPlugin, { AlloyFinger });
 
 App.mpType = 'app';
 

src/pages.json

@@ -17,6 +17,12 @@
       "style": {
         "navigationBarTitleText": "rich-text 测试"
       }
+    },
+    {
+      "path": "pages/pinch/pinch",
+      "style": {
+        "navigationBarTitleText": "pinch 测试"
+      }
     }
   ],
   "globalStyle": {

src/pages/index/index.vue

@@ -3,6 +3,7 @@
     <view>
       <u-button type="primary" size="default" @tap="$u.route('/pages/plugin-test/plugin-test')">iframe 验证</u-button>
       <u-button type="error" size="default" class="my-3" @tap="$u.route('/pages/rich-text/rich-text')">rich-text 验证</u-button>
+      <u-button type="warning" size="default" class="my-3" @tap="$u.route('/pages/pinch/pinch')">pinch 事件验证</u-button>
     </view>
   </view>
 </template>

src/pages/pinch/pinch.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="container flex flex-row items-center justify-center">
+    <image
+      class="w-1/2"
+      mode="aspectFit"
+      src="https://lupic.cdn.bcebos.com/20200412/3026529107_14_800_566.jpg"
+      v-finger:pinch="handlePinch"
+      v-finger:multipoint-start="handlePinchStart"
+      :style="{ transform: `scale(${scale})` }"
+      id="image"
+    ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      initScale: 1,
+      scale: 1,
+      element: null,
+    };
+  },
+
+  mounted() {
+    this.element = document.getElementById('image');
+  },
+
+  methods: {
+    handlePinchStart() {
+      console.log(this.element.style.transform);
+      // eslint-disable-next-line no-useless-escape
+      const reg = /scale\(([0-9]*[\.]?[0-9]*)\)/gi;
+      const scale = this.element.style.transform;
+      if (reg.test(scale)) {
+        this.initScale = RegExp.$1;
+        console.log(this.initScale);
+      }
+      // this.scale = this.element.scaleX;
+    },
+
+    handlePinch(event) {
+      console.log(typeof event.zoom, typeof this.initScale, this.initScale);
+      this.scale = this.initScale * event.zoom;
+      console.log('this.scale:', this.scale);
+    },
+  },
+};
+</script>

vue.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin'); //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
+const CopyWebpackPlugin = require('copy-webpack-plugin'); // 最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
 
 module.exports = {
   lintOnSave: process.env.NODE_ENV !== 'production',

yarn.lock

@@ -2613,6 +2613,11 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+alloyfinger@^0.1.16:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/alloyfinger/-/alloyfinger-0.1.16.tgz#8d5d46073cf1fedba5f446e666bc4b3925b8b8b5"
+  integrity sha512-AfsLALs929WQsjSk1pbysoiVU3bgm/4k1wdZDtMQ7uI7b8XweqCCnUiBYqqdp8uPZ1fBq/+LCJhgUlhd90FssQ==
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/alphanum-sort/download/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"