readme add vw and update npm

sunnie1992
Showing 5 changed files with 354 additions and 113 deletions
.eslintrc.js
README.md
package-lock.json
package.json
vue.config.js
--- a/.eslintrc.js
View file @5f3bc05
+++ b/.eslintrc.js
View file @5f3bc05
@@ -3,66 +3,98 @@ module.exports = {
  env: {
    node: true
  },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
-    "vue/max-attributes-per-line": [2, {
+    'vue/max-attributes-per-line': [
-      "singleline": 10,
+      2,
-      "multiline": {
+      {
-        "max": 1,
+        singleline: 10,
-        "allowFirstLine": false
+        multiline: {
-      }
+          max: 1,
-    }],
+          allowFirstLine: false
-    "vue/singleline-html-element-content-newline": "off",
+        }
-    "vue/multiline-html-element-content-newline":"off",
+      }
-    "vue/name-property-casing": ["error", "PascalCase"],
+    ],
-    "vue/no-v-html": "off",
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/name-property-casing': ['error', 'PascalCase'],
+    'vue/no-v-html': 'off',
    'accessor-pairs': 2,
-    'arrow-spacing': [2, {
+    'arrow-spacing': [
-      'before': true,
+      2,
-      'after': true
+      {
-    }],
+        before: true,
+        after: true
+      }
+    ],
    'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
+    'brace-style': [
-      'allowSingleLine': true
+      2,
-    }],
+      '1tbs',
-    'camelcase': [0, {
+      {
-      'properties': 'always'
+        allowSingleLine: true
-    }],
+      }
+    ],
+    camelcase: [
+      0,
+      {
+        properties: 'always'
+      }
+    ],
    'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
+    'comma-spacing': [
-      'before': false,
+      2,
-      'after': true
+      {
-    }],
+        before: false,
+        after: true
+      }
+    ],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
-    'curly': [2, 'multi-line'],
+    curly: [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
-    'generator-star-spacing': [2, {
+    'generator-star-spacing': [
-      'before': true,
+      2,
-      'after': true
+      {
-    }],
+        before: true,
+        after: true
+      }
+    ],
    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
+    indent: [
-      'SwitchCase': 1
+      2,
-    }],
+      2,
+      {
+        SwitchCase: 1
+      }
+    ],
    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
+    'key-spacing': [
-      'beforeColon': false,
+      2,
-      'afterColon': true
+      {
-    }],
+        beforeColon: false,
-    'keyword-spacing': [2, {
+        afterColon: true
-      'before': true,
+      }
-      'after': true
+    ],
-    }],
+    'keyword-spacing': [
-    'new-cap': [2, {
+      2,
-      'newIsCap': true,
+      {
-      'capIsNew': false
+        before: true,
-    }],
+        after: true
+      }
+    ],
+    'new-cap': [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false
+      }
+    ],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
@@ -93,17 +125,23 @@ module.exports = {
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
-    'no-labels': [2, {
+    'no-labels': [
-      'allowLoop': false,
+      2,
-      'allowSwitch': false
+      {
-    }],
+        allowLoop: false,
+        allowSwitch: false
+      }
+    ],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
+    'no-multiple-empty-lines': [
-      'max': 1
+      2,
-    }],
+      {
+        max: 1
+      }
+    ],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
@@ -131,62 +169,93 @@ module.exports = {
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
+    'no-unneeded-ternary': [
-      'defaultAssignment': false
+      2,
-    }],
+      {
+        defaultAssignment: false
+      }
+    ],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
+    'no-unused-vars': [
-      'vars': 'all',
+      2,
-      'args': 'none'
+      {
-    }],
+        vars: 'all',
+        args: 'none'
+      }
+    ],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
-    'one-var': [2, {
+    'one-var': [
-      'initialized': 'never'
+      2,
-    }],
+      {
-    'operator-linebreak': [2, 'after', {
+        initialized: 'never'
-      'overrides': {
+      }
+    ],
+    'operator-linebreak': [
+      2,
+      'after',
+      {
+        overrides: {
          '?': 'before',
          ':': 'before'
        }
-    }],
+      }
+    ],
    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
+    quotes: [
-      'avoidEscape': true,
+      2,
-      'allowTemplateLiterals': true
+      'single',
-    }],
+      {
-    'semi': [2, 'never'],
+        avoidEscape: true,
-    'semi-spacing': [2, {
+        allowTemplateLiterals: true
-      'before': false,
+      }
-      'after': true
+    ],
-    }],
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
+    'space-unary-ops': [
-      'words': true,
+      2,
-      'nonwords': false
+      {
-    }],
+        words: true,
-    'spaced-comment': [2, 'always', {
+        nonwords: false
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
-    }],
+    ],
+    'spaced-comment': [
+      2,
+      'always',
+      {
+        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
+    ],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
+    yoda: [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
+    'object-curly-spacing': [
+      2,
+      'always',
+      {
        objectsInObjects: false
-    }],
+      }
+    ],
    'array-bracket-spacing': [2, 'never']
  }
 }
--- a/README.md
View file @5f3bc05
+++ b/README.md
View file @5f3bc05
@@ -168,7 +168,8 @@ module.exports = {
 **新手必看，老鸟跳过**
-很多小伙伴会问我，适配的问题。
+很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上
+传到蓝湖，我们就可以需要的尺寸了。下面就大搞普及一下 rem。
 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下
 看到 （`1rem 等于 37.5px`）：
@@ -210,6 +211,62 @@ module.exports = {
 [▲ 回顶部](#top)
+### <span id="vw">✅ vm 适配方案 </span>
+本项目使用的是 rem 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做
+。如果你想用 vw，你可以按照下面的方式切换。
+#### 1.安装依赖
+```bash
+npm install postcss-px-to-viewport -D
+```
+#### 2.修改 .postcssrc.js
+将根目录下 .postcssrc.js 文件修改如下
+```javascript
+// https://github.com/michael-ciniawsky/postcss-load-config
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
+    },
+    'postcss-px-to-viewport': {
+      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false // 允许在媒体查询中转换`px`
+    }
+  }
+}
+```
+#### 3.删除原来的 rem 相关代码
+src/main.js 删除如下代码
+```javascript
+// 移动端适配
+import 'lib-flexible/flexible.js'
+```
+package.json 删除如下代码
+```javascript
+"lib-flexible": "^0.3.2",
+"postcss-pxtorem": "^5.1.1",
+```
+运行起来，F12 元素 css 就是 vw 单位了
+[▲ 回顶部](#top)
 ### <span id="vant">✅ VantUI 组件按需加载 </span>
 项目采
@@ -365,7 +422,7 @@ Vue.prototype.$cdn = $cdn
  .logo {
    width: 120px;
    height: 120px;
-    background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
+    background: url($cdn + '/weapp/logo.png') center / contain no-repeat;
  }
 </style>
 ```
@@ -900,7 +957,8 @@ module.exports = {
 ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span>
-VScode 安装 `eslint` `prettier` `vetur` 插件
+VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`,后面会
+专门写个如何使用配合使用这三个玩意
 在文件 `.prettierrc` 里写 属于你的 pettier 规则
@@ -930,23 +988,137 @@ VScode 安装 `eslint` `prettier` `vetur` 插件
 Vscode setting.json 设置
 ```bash
-    "[vue]": {
+    {
+  // 将设置放入此文件中以覆盖默认设置
+  "files.autoSave": "off",
+  // 控制字体系列。
+  "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
+  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
+  // 以像素为单位控制字号。
+  "editor.fontSize": 16,
+  // 控制选取范围是否有圆角
+  "editor.roundedSelection": false,
+  // 建议小组件的字号
+  "editor.suggestFontSize": 16,
+  // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
+  "explorer.openEditors.visible": 0,
+  // 是否已启用自动刷新
+  "git.autorefresh": true,
+  // 以像素为单位控制终端的字号，这是 editor.fontSize 的默认值。
+  "terminal.integrated.fontSize": 14,
+  // 控制终端游标是否闪烁。
+  "terminal.integrated.cursorBlinking": true,
+  // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
+  // Tab Size
+  "editor.tabSize": 2,
+  // By default, common template. Do not modify it!!!!!
+  "editor.formatOnType": true,
+  "window.zoomLevel": 0,
+  "editor.detectIndentation": false,
+  "css.fileExtensions": ["css", "scss"],
+  "files.associations": {
+    "*.string": "html",
+    "*.vue": "vue",
+    "*.wxss": "css",
+    "*.wxml": "wxml",
+    "*.wxs": "javascript",
+    "*.cjson": "jsonc",
+    "*.js": "javascript"
+  },
+  // 为指定的语法定义配置文件或使用带有特定规则的配置文件。
+  "emmet.syntaxProfiles": {
+    "vue-html": "html",
+    "vue": "html"
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true
+  },
+  //保存时eslint自动修复错误
+  "editor.formatOnSave": true,
+  // Enable per-language
+  //配置 ESLint 检查的文件类型
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  // 添加 vue 支持
+  // 这里是针对vue文件的格式化设置，vue的规则在这里生效
+  "vetur.format.options.tabSize": 2,
+  "vetur.format.options.useTabs": false,
+  "vetur.format.defaultFormatter.html": "js-beautify-html",
+  "vetur.format.defaultFormatter.css": "prettier",
+  "vetur.format.defaultFormatter.scss": "prettier",
+  "vetur.format.defaultFormatter.postcss": "prettier",
+  "vetur.format.defaultFormatter.less": "prettier",
+  "vetur.format.defaultFormatter.js": "vscode-typescript",
+  "vetur.format.defaultFormatter.sass": "sass-formatter",
+  "vetur.format.defaultFormatter.ts": "prettier",
+  "vetur.format.defaultFormatterOptions": {
+    "js-beautify-html": {
+      "wrap_attributes": "aligned-multiple", // 超过150折行
+      "wrap-line-length": 150
+    },
+    // #vue组件中html代码格式化样式
+    "prettier": {
+      "printWidth": 120,
+      "tabWidth": 2,
+      "singleQuote": false,
+      "trailingComma": "none",
+      "semi": false,
+      "wrap_line_length": 120,
+      "wrap_attributes": "aligned-multiple", // 超过150折行
+      "proseWrap": "always",
+      "arrowParens": "avoid",
+      "bracketSpacing": true,
+      "jsxBracketSameLine": true,
+      "useTabs": false,
+      "overrides": [
+        {
+          "files": ".prettierrc",
+          "options": {
+            "parser": "json"
+          }
+        }
+      ]
+    }
+  },
+  // Enable per-language
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "vetur.validation.template": false,
+  "html.format.enable": false,
+  "json.format.enable": false,
+  "javascript.format.enable": false,
+  "typescript.format.enable": false,
+  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
+  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
-     // 保存时用eslint格式化
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "octref.vetur"
+  },
+  "emmet.includeLanguages": {
+    "wxml": "html"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // 开启eslint自动修复js/ts功能
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
-    // 两者会在格式化js时冲突，所以需要关闭默认js格式化程序
+  "minapp-vscode.disableAutoConfig": true,
-    "javascript.format.enable": false,
+  "javascript.implicitProjectConfig.experimentalDecorators": true,
-    "typescript.format.enable": false,
+  "editor.maxTokenizationLineLength": 200000
-    "vetur.format.defaultFormatter.html": "none",
+}
-    // js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
-    "vetur.format.defaultFormatter.js": "none",
-    "vetur.format.defaultFormatter.ts": "none",
 ```
 [▲ 回顶部](#top)
--- a/package-lock.json
View file @5f3bc05
+++ b/package-lock.json
View file @5f3bc05
--- a/package.json
View file @5f3bc05
+++ b/package.json
View file @5f3bc05
 {
  "name": "vue-h5-template",
-  "version": "2.0.0",
+  "version": "2.1.0",
  "description": "A vue h5 template with Vant UI",
  "author": "Sunnie <sunniejs@163.com>",
  "private": true,
@@ -16,28 +16,27 @@
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.15",
    "regenerator-runtime": "^0.13.5",
-    "vant": "^2.4.7",
+    "vant": "^2.10.2",
    "vue": "^2.6.11",
-    "vue-router": "^3.1.5",
+    "vue-router": "^3.2.0",
-    "vuex": "^3.1.2"
+    "vuex": "^3.4.0"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.3.0",
+    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
-    "babel-eslint": "^10.0.3",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
-    "postcss-pxtorem": "^4.0.1",
+    "postcss-pxtorem": "^5.1.1",
-    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "script-ext-html-webpack-plugin": "^2.1.4",
    "vue-template-compiler": "^2.6.11",
-    "webpack-bundle-analyzer": "^3.7.0"
+    "webpack-bundle-analyzer": "^3.8.0"
  }
 }
--- a/vue.config.js
View file @5f3bc05
+++ b/vue.config.js
View file @5f3bc05
@@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const resolve = dir => path.join(__dirname, dir)
 // page title
 const name = defaultSettings.title || 'vue mobile template'
+// 生产环境，测试和正式
 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
 // externals
@@ -64,7 +65,7 @@ module.exports = {
    // }
  },
  css: {
-    extract: IS_PROD, //是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
+    extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
    sourceMap: false,
    loaderOptions: {
      scss: {