2.0.0

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.env.development

@@ -1,8 +1,4 @@
 NODE_ENV='development'
 # must start with VUE_APP_ 
 VUE_APP_ENV = 'development'
-#base url
+ 
-BASE_URL = 'https://www.xxx.com/'
-# base api
-VUE_APP_BASE_API = '/dev-api'
-VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -1,8 +1,4 @@
 NODE_ENV='production'
 # must start with VUE_APP_
 VUE_APP_ENV = 'production'
-#base url
+ 
-BASE_URL = 'https://www.xxx.com/'
-# base api
-VUE_APP_BASE_API = '/prod-api'
-

.env.staging

@@ -1,8 +1,4 @@
 NODE_ENV='production'
 # must start with VUE_APP_
 VUE_APP_ENV = 'staging'
-#base url
+ 
-BASE_URL = 'https://www.xxx.com/'
-# base api
-VUE_APP_BASE_API = '/stage-api'
-

.eslintrc.js

@@ -1,278 +1,15 @@
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
   env: {
-    browser: true,
+    node: true
-    node: true,
+  },
-    es6: true
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint"
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
-  // add your custom rules here
-  //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    'vue/max-attributes-per-line': [
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-      2,
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-      {
+    
-        singleline: 10,
-        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',
-    'accessor-pairs': 2,
-    'arrow-spacing': [
-      2,
-      {
-        before: true,
-        after: true
-      }
-    ],
-    'block-spacing': [2, 'always'],
-    'brace-style': [
-      2,
-      '1tbs',
-      {
-        allowSingleLine: true
-      }
-    ],
-    camelcase: [
-      0,
-      {
-        properties: 'always'
-      }
-    ],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [
-      2,
-      {
-        before: false,
-        after: true
-      }
-    ],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    curly: [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    eqeqeq: ['error', 'always', { null: 'ignore' }],
-    'generator-star-spacing': [
-      2,
-      {
-        before: true,
-        after: true
-      }
-    ],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': ['off', 2],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [
-      2,
-      {
-        beforeColon: false,
-        afterColon: true
-      }
-    ],
-    'keyword-spacing': [
-      2,
-      {
-        before: true,
-        after: true
-      }
-    ],
-    'new-cap': [
-      2,
-      {
-        newIsCap: true,
-        capIsNew: false
-      }
-    ],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [
-      2,
-      {
-        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,
-      {
-        max: 1
-      }
-    ],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [
-      2,
-      {
-        defaultAssignment: false
-      }
-    ],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [
-      2,
-      {
-        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,
-      {
-        initialized: 'never'
-      }
-    ],
-    'operator-linebreak': [
-      2,
-      'after',
-      {
-        overrides: {
-          '?': 'before',
-          ':': 'before'
-        }
-      }
-    ],
-    'padded-blocks': [2, 'never'],
-    quotes: [
-      2,
-      'single',
-      {
-        avoidEscape: true,
-        allowTemplateLiterals: 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,
-      {
-        words: true,
-        nonwords: false
-      }
-    ],
-    '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'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [
-      2,
-      'always',
-      {
-        objectsInObjects: false
-      }
-    ],
-    'array-bracket-spacing': [2, 'never'],
-    'vue/html-self-closing': ["error",{
-      "html": {
-        "void": "never",
-        "normal": "any",
-        "component": "any"
-      },
-      "svg": "always",
-      "math": "always"
-    }]
   }
-}
+};

.gitignore

@@ -1,11 +1,15 @@
 .DS_Store
-node_modules/
+node_modules
-dist/
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-package-lock.json
-tests/**/coverage/
 
 # Editor directories and files
 .idea
@@ -14,3 +18,4 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
+*.sw?

.prettierrc

@@ -0,0 +1,20 @@
+{
+    "printWidth": 120,
+    "tabWidth": 2,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "semi": false,
+    "wrap_line_length": 120,
+    "wrap_attributes": "auto",
+    "proseWrap": "always",
+    "arrowParens": "avoid",
+    "bracketSpacing": false,
+    "jsxBracketSameLine": true,
+    "useTabs": false,
+    "overrides": [{
+        "files": ".prettierrc",
+        "options": {
+            "parser": "json"
+        }
+    }]
+}

.travis.yml

@@ -1,5 +0,0 @@
-language: node_js
-node_js: 10
-script: npm run test
-notifications:
-  email: false

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2017-present PanJiaChen
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,18 +1,23 @@
 # vue-h5-template
 
 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
+[demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
 
 #### 介绍
 [关于项目介绍](https://segmentfault.com/a/1190000019275330)
 
- 1. vuecli3.0      
+- Vue-cli4    
- 2. 多环境开发       
+- VantUI组件按需加载       
- 3. axios封装         
+- Sass         
- 4. rem适配方案        
+- Webpack 4        
- 5. 生产环境cdn优化首屏加速
+- Vuex
- 6. babel低版本浏览器兼容
+- Axios封装
- 7. 环境发布脚本
+- rem适配方案
-
+- 多环境配置
+- 生产环境cdn优化首屏加速
+- babel低版本浏览器兼容
+- Eslint+Pettier统一开发规范
+ 
 #### 多环境
 
 

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: [['@vue/app', { useBuiltIns: 'entry' }]],
+  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
   plugins: [
     [
       'import',

build/index.js

@@ -1,35 +0,0 @@
-const { run } = require('runjs')
-const chalk = require('chalk')
-// const config = require('../vue.config.js')
-const rawArgv = process.argv.slice(2)
-const args = rawArgv.join(' ')
-
-if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
-  const report = rawArgv.includes('--report')
-
-  run(`vue-cli-service build ${args}`)
-
-  const port = 9018
-  const publicPath = '/'
-
-  var connect = require('connect')
-  var serveStatic = require('serve-static')
-  const app = connect()
-
-  app.use(
-    publicPath,
-    serveStatic('./dist', {
-      index: ['index.html', '/']
-    })
-  )
-
-  app.listen(port, function () {
-    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
-    if (report) {
-      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
-    }
-
-  })
-} else {
-  run(`vue-cli-service build ${args}`)
-}

jest.config.js

@@ -1,24 +0,0 @@
-module.exports = {
-  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
-  },
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
-  },
-  snapshotSerializers: ['jest-serializer-vue'],
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-  ],
-  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
-  coverageDirectory: '<rootDir>/tests/unit/coverage',
-  // 'collectCoverage': true,
-  'coverageReporters': [
-    'lcov',
-    'text-summary'
-  ],
-  testURL: 'http://localhost/'
-}

package.json

@@ -1,63 +1,41 @@
 {
-    "name": "vue-h5-template",
+  "name": "vue-h5-template",
-    "version": "1.0.0",
+  "version": "2.0.0",
-    "description": "A vue h5 template with Vant UI",
+  "description": "A vue h5 template with Vant UI",
-    "author": "Sunnie <s406803045@163.com>",
+  "author": "Sunnie <s406803045@163.com>",
-    "license": "MIT",
+  "private": true,
-    "scripts": {
+  "scripts": {
-        "dev": "vue-cli-service serve --open",
+    "serve": "vue-cli-service serve --open",
-        "build:prod": "vue-cli-service build",
+    "build:prod": "vue-cli-service build",
-        "build:stage": "vue-cli-service build --mode staging",
+    "build:stage": "vue-cli-service build --mode staging",
-        "preview": "node build/index.js --preview",
+    "lint": "vue-cli-service lint"
-        "lint": "eslint --ext .js,.vue src",
+  },
-        "test:unit": "jest --clearCache && vue-cli-service test:unit",
+  "dependencies": {
-        "test:ci": "npm run lint && npm run test:unit",
+    "axios": "^0.19.2",
-        "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+    "core-js": "^3.6.4",
-    },
+    "lib-flexible": "^0.3.2",
-    "dependencies": {
+    "vant": "^2.4.7",
-        "axios": "0.19.0",
+    "vue": "^2.6.11",
-        "fastclick": "^1.0.6",
+    "vue-router": "^3.1.5",
-        "lib-flexible": "^0.3.2",
+    "vuex": "^3.1.2"
-        "normalize.css": "7.0.0",
+  },
-        "vant": "^2.2.14",
+  "devDependencies": {
-        "vue": "2.6.10",
+    "@babel/polyfill": "^7.8.3",
-        "vue-router": "3.0.6",
+    "@vue/cli-plugin-babel": "~4.2.0",
-        "vuex": "3.1.0"
+    "@vue/cli-plugin-eslint": "~4.2.0",
-    },
+    "@vue/cli-service": "~4.2.0",
-    "devDependencies": {
+    "@vue/eslint-config-prettier": "^6.0.0",
-        "@babel/core": "7.0.0",
+    "babel-eslint": "^10.0.3",
-        "@babel/register": "7.0.0",
+    "babel-plugin-import": "^1.13.0",
-        "@vue/cli-plugin-babel": "3.6.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
-        "@vue/cli-plugin-eslint": "3.6.0",
+    "eslint": "^6.7.2",
-        "@vue/cli-plugin-unit-jest": "3.6.3",
+    "eslint-plugin-prettier": "^3.1.1",
-        "@vue/cli-service": "3.6.0",
+    "eslint-plugin-vue": "^6.1.2",
-        "@vue/test-utils": "1.0.0-beta.29",
+    "node-sass": "^4.13.1",
-        "babel-core": "7.0.0-bridge.0",
+    "postcss-pxtorem": "^4.0.1",
-        "babel-eslint": "10.0.1",
+    "prettier": "^1.19.1",
-        "babel-jest": "23.6.0",
+    "sass-loader": "^8.0.2",
-        "babel-plugin-import": "^1.11.2",
+    "script-ext-html-webpack-plugin": "^2.1.4",
-        "chalk": "2.4.2",
+    "vue-template-compiler": "^2.6.11"
-        "connect": "3.6.6",
+  }
-        "eslint": "5.15.3",
-        "eslint-plugin-vue": "5.2.2",
-        "html-webpack-plugin": "3.2.0",
-        "node-sass": "^4.9.0",
-        "postcss-pxtorem": "^4.0.1",
-        "runjs": "^4.3.2",
-        "sass-loader": "^7.1.0",
-        "script-ext-html-webpack-plugin": "2.1.3",
-        "script-loader": "0.7.2",
-        "serve-static": "^1.13.2",
-        "svgo": "1.2.2",
-        "vue-template-compiler": "2.6.10"
-    },
-    "engines": {
-        "node": ">=8.9",
-        "npm": ">= 3.0.0"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not ie <= 8"
-    ]
 }

src/App.vue

@@ -7,8 +7,7 @@
   </div>
 </template>
 <script>
-  export default {
+export default {
-    name: 'App'
+  name: 'App'
-  }
+}
-
 </script>

src/api/user.js

@@ -1,14 +1,20 @@
 import qs from 'qs'
 import request from '@/utils/request'
-import { api } from '@/config'
 // api
-const { common_api } = api
 
 // 登录
 export function login(params) {
   return request({
-    url: common_api + '/ruleCommon/queryrule',
+    url: '/user/login',
     method: 'post',
     data: qs.stringify(params)
   })
 }
+// 用户信息
+export function getUserInfo(params) {
+  return request({
+    url: '/user/userinfo',
+    method: 'get',
+    data: qs.stringify(params)
+  })
+}

src/assets/css/index.scss

@@ -1,62 +1,3 @@
-@import './variables.scss';
+.app-container{
-@import './mixin.scss';
+  padding-bottom:50px
-
+}
-body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
-
-label {
-  font-weight: 700;
-}
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
-#app {
-  height: 100%;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
-div:focus {
-  outline: none;
-}
-
-.clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-
-// main-container global css
-.app-container {
-  padding: 20px;
-}

src/assets/css/mixin.scss

@@ -1,28 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin scrollBar {
-  &::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #99a9bf;
-    border-radius: 20px;
-  }
-}
-
-@mixin relative {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}

src/assets/css/variables.scss

@@ -1,25 +0,0 @@
-// sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-
-$menuBg:#304156;
-$menuHover:#263445;
-
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
-
-$sideBarWidth: 210px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}

src/components/HelloWorld.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
+      </li>
+      <li>
+        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/config/env.development.js

@@ -1,6 +1,8 @@
 // 本地
 module.exports = {
   title: 'vue-h5-template',
+  baseUrl: 'https://test.xxx.com', // 项目地址
+  baseApi: 'https://test.xxx.com', // 本地api请求地址
   api: {
     base_api: 'https://xxx.xxx.com/admin',
     common_api: 'https://xxx.xxx.com/common'

src/config/env.production.js

@@ -1,6 +1,8 @@
 // 正式
 module.exports = {
   title: 'vue-h5-template',
+  baseUrl: 'https://www.xxx.com/', // 正式项目地址
+  baseApi: 'https://test.xxx.com', // 正式api请求地址
   api: {
     base_api: 'https://xxx.xxx.com/admin',
     common_api: 'https://xxx.xxx.com/common'

src/config/env.staging.js

@@ -1,5 +1,7 @@
 module.exports = {
   title: 'vue-h5-template',
+  baseUrl: 'https://test.xxx.com', // 测试项目地址
+  baseApi: 'https://test.xxx.com', // 测试api请求地址
   api: {
     base_api: 'https://xxx.xxx.com/admin',
     common_api: 'https://xxx.xxx.com/common'

src/config/index.js

@@ -1,3 +1,3 @@
-// 根据环境引入不同配置 process.env.NODE_ENV 
+// 根据环境引入不同配置 process.env.NODE_ENV
 const config = require('./env.' + process.env.VUE_APP_ENV)
- module.exports = config
+module.exports = config

src/main.js

@@ -1,25 +1,21 @@
 import Vue from 'vue'
-import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import App from './App.vue'
-import '@/assets/css/index.scss' // global css
+import router from './router'
+import store from './store'
+// 引入全局样式
+import '@/assets/css/index.scss'
+
+// 全局引入按需引入UI库 vant
+import '@/plugins/vant'
+//  IE 兼容
+import '@babel/polyfill'
 // 移动端适配
 import 'lib-flexible/flexible.js'
-import App from './App'
+
-import store from './store'
+// filters
-import router from './router'
+import './filters'
-import '@/filters' // filters
-import '@/permission' // permission 权限
-// 解决移动端click事件300毫秒延迟方法
-import FastClick from 'fastclick'
-if ('addEventListener' in document) {
-  document.addEventListener(
-    'DOMContentLoaded',
-    function() {
-      FastClick.attach(document.body)
-    },
-    false
-  )
-}
 Vue.config.productionTip = false
+
 new Vue({
   el: '#app',
   router,

src/permission.js

@@ -1,6 +0,0 @@
-import router from './router'
-
-router.beforeEach(async(to, from, next) => {
-  next()
-})
-router.afterEach(() => {})

src/plugins/vant.js

@@ -0,0 +1,7 @@
+// 按需全局引入 vant组件
+import Vue from 'vue'
+import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'
+Vue.use(Button)
+Vue.use(Cell)
+Vue.use(List)
+Vue.use(Tabbar).use(TabbarItem)

src/router/index.js

@@ -2,9 +2,10 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 Vue.use(Router)
-export const constantRoutes = [
+export const router = [
   {
     path: '/',
+    name: 'index',
     component: () => import('@/views/home/index'),
     meta: {
       keepAlive: false
@@ -14,10 +15,10 @@ export const constantRoutes = [
 
 const createRouter = () =>
   new Router({
-    mode: 'history', // require service support
+    // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
-    base:  '/app/',
+    // base: '/app/',
-    scrollBehavior: () => ({ y: 0 }),
+    scrollBehavior: () => ({y: 0}),
-    routes: constantRoutes
+    routes: router
   })
 
 export default createRouter()

src/store/getters.js

@@ -1,3 +1,4 @@
 const getters = {
+  userName: state => state.app.userName
 }
 export default getters

src/store/modules/app.js

@@ -1,15 +1,17 @@
 const state = {
-  
+  userName: ''
 }
-
 const mutations = {
-  
+  SET_USER_NAME(state, name) {
+    state.userName = name
+  }
 }
-
 const actions = {
-   
+  // 设置name
+  setUserName({commit}, name) {
+    commit('SET_USER_NAME', name)
+  }
 }
-
 export default {
   namespaced: true,
   state,

src/utils/request.js

@@ -1,10 +1,11 @@
 import axios from 'axios'
 import store from '@/store'
-import { Toast } from 'vant'
+import {Toast} from 'vant'
-import { api } from '@/config'
+// 根据环境不同引入不同api地址
+import {baseApi} from '@/config'
 // create an axios instance
 const service = axios.create({
-  baseURL: api.base_api, // url = base url + request url
+  baseURL: baseApi, // url = base api url + request url
   withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })

src/views/home/index.vue

@@ -1,38 +1,91 @@
-<!-- home -->
+<!-- home -->
-<template>
+<template>
-  <div>
+  <div class="app-container">
-    <h1>home</h1>
+    <div class="warpper">
-    <van-button type="primary">主要按钮</van-button>
+      <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
-  </div>
+      <h2 class="demo-home__desc">
-</template>
+        A vue h5 template with Vant UI
-
+      </h2>
-<script>
+    </div>
-// import { api } from '@/config'
+    <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
-import {
+    <van-tabbar fixed v-model="active" @change="onChange">
-  Button
+      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
-} from 'vant'
+      <van-tabbar-item icon="good-job-o">github</van-tabbar-item>
-export default {
+    </van-tabbar>
-  components: {
+  </div>
-    'van-button': Button
+</template>
-  },
+
-
+<script>
-  data () {
+// 请求接口
-    return {}
+import {getUserInfo} from '@/api/user.js'
-  },
+export default {
-
+  components: {},
-  computed: {},
+
-
+  data() {
-  mounted () {
+    return {
-    console.log(process.env)
+      active: 0,
-  },
+      list: [
-
+        'Vue-cli4',
-  methods: {}
+        'VantUI组件按需加载',
-}
+        'Sass',
-
+        'Webpack 4',
-</script>
+        'Vue-router',
-<style lang='scss' scoped>
+        'Vuex',
-h1 {
+        'Axios封装',
-  background: red;
+        'rem适配方案',
-  width: 375px;
+        '多环境配置',
-}
+        '生产环境cdn优化首屏加速',
-</style>
+        'babel低版本浏览器兼容',
+        'Eslint+Pettier统一开发规范'
+      ]
+    }
+  },
+
+  computed: {},
+
+  mounted() {
+    this.initData()
+  },
+
+  methods: {
+    // 请求数据案例
+    initData() {
+      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
+      getUserInfo()
+        .then(() => {})
+        .catch(() => {})
+    },
+    onChange(index) {
+      if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+  .warpper {
+    padding: 12px;
+    .demo-home__title {
+      margin: 0 0 6px;
+      font-size: 32px;
+      .demo-home__title img,
+      .demo-home__title span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      img {
+        width: 32px;
+      }
+      span {
+        margin-left: 16px;
+        font-weight: 500;
+      }
+    }
+    .demo-home__desc {
+      margin: 0 0 20px;
+      color: rgba(69, 90, 100, 0.6);
+      font-size: 14px;
+    }
+  }
+}
+</style>

vue.config.js

@@ -4,7 +4,6 @@ const defaultSettings = require('./src/config/index.js')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
-
 const name = defaultSettings.title || 'vue mobile template' // page title
 const port = 9018 // dev port
 const externals = {
@@ -19,13 +18,12 @@ const cdn = {
   // 开发环境
   dev: {
     css: [],
-    js: ['https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js']
+    js: []
   },
   // 生产环境
   build: {
     css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
     js: [
-      'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js',
       'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
       'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
       'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
@@ -36,7 +34,8 @@ const cdn = {
   }
 }
 module.exports = {
-  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', // 需要区分生产环境和开发环境，不然build会报错
+  publicPath: './', // router hash 模式使用
+  // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境，不然build会报错
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
@@ -60,8 +59,8 @@ module.exports = {
       })
     }
     // 为开发环境修改配置...
-    if (process.env.NODE_ENV === 'development') {
+    // if (process.env.NODE_ENV === 'development') {
-    }
+    // }
   },
   chainWebpack(config) {
     config.plugins.delete('preload') // TODO: need test
@@ -70,8 +69,10 @@ module.exports = {
     config.resolve.alias
       .set('@', resolve('src'))
       .set('assets', resolve('src/assets'))
+      .set('api', resolve('src/api'))
       .set('views', resolve('src/views'))
       .set('components', resolve('src/components'))
+
     /**
      * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
      */
@@ -114,23 +115,18 @@ module.exports = {
       config.optimization.splitChunks({
         chunks: 'all',
         cacheGroups: {
-          libs: {
-            name: 'chunk-libs',
-            test: /[\\/]node_modules[\\/]/,
-            priority: 10,
-            chunks: 'initial' // only package third parties that are initially dependent
-          },
-          // elementUI: {
-          //   name: 'chunk-elementUI', // split elementUI into a single package
-          //   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-          //   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-          // },
           commons: {
             name: 'chunk-commons',
             test: resolve('src/components'), // can customize your rules
             minChunks: 3, //  minimum common number
             priority: 5,
             reuseExistingChunk: true
+          },
+          libs: {
+            name: 'chunk-libs',
+            chunks: 'initial', // only package third parties that are initially dependent
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10
           }
         }
       })