vant-h5-template

1. 组件/样式按需引入
2. 路由懒加载
3. 定制主题
4. rem适配 
5. 国际化
6. Gzip压缩
7. 资源图片压缩
8. 样式使用Less
9. 集成 axios 请求

1. npm i babel-plugin-import
2. babel.config.js
   module.exports = {
    presets: [
     '@vue/cli-plugin-babel/preset'
    ],
    "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": name => `${name}/style/less`
      },
      'vant'
    ]
   ]
  }
  

1. npm install vue-router
2. ./router/index.js
   import Vue from 'vue';
   import Router from 'vue-router';
   Vue.use(Router);
   const Index = () => import('@/pages/index'); // 按需引入

    export default new Router({
        routes: [
            {
                path: '/',
                name: 'index',
                component: Index
            }
        ]
    })
3. main.js
   import router from './router';
   new Vue({
    router,
    render: h => h(App),
   }).$mount('#app');
4. App.vue
   <div id="app">
    <router-view></router-view>
   </div>

1.  vue.config.js
    const path = require("path");
    function resolve(dir) {
        console.log(dir)
        return path.join(__dirname, dir);
    }
    module.exports = {
      css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    'hack': `true; @import "${resolve('src/assets/css/default.less')}";` // vant主题less文件
                }
            }
        }
      }
    }

vant rem适配，需要安装两个插件：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem  
amfe-flexible 用于设置 rem 基准值

1.  npm install postcss-pxtorem --save-dev
2.  npm i -S amfe-flexible
3.  main.js
    import 'amfe-flexible/index.js'
4.  postcss.config.js(没有就在根目录创建一个)
    module.exports = {
    plugins: {
      'autoprefixer': {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'ff > 31',
          'ie >= 8'
        ]
      },
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }

1.  i18n，详情使用请看 lang目录、main.js文件

1.  npm install compression-webpack-plugin -D
2.  vue.config.js
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    const compress = new CompressionWebpackPlugin(
        {
            filename: info => {
                return `${info.path}.gz${info.query}`
            },
            algorithm: 'gzip',
            threshold: 10240, // 对超过10k的文件进行压缩
            test: new RegExp(
                '\\.(' +
                ['js'].join('|') +
                ')$'
            ),
            minRatio: 0.8,
            deleteOriginalAssets: false
        }
    )
    module.exports {
      configureWebpack: {
        plugins: [compress]
      }
    }

1. npm install image-webpack-loader --save-dev
2. vue.config.js
   chainWebpack: config => {
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    }

1. npm install less less-loader --save-dev
2. main.js
   import less from 'less'
   Vue.use(less)
4. 页面中使用 
<div class="app">
   <div class="app-div">app-div</div>
</div>
<style lang="less">
    @color:red;
    @w:100px;
    @h:100px;
    #app{
      width:@w;
      height:@h;
      background: @color;
      &-div {
        font-color: green;
      }
    }
</style>

1. npm install --save axios
2. axios promise 封装
   utils目录下 api.js、request.js
3. 使用 
   import { youApiName } from "../utils/api.js";
   youApiName(data).then(res => {console.log(res)})

npm install

npm run serve

npm run build

npm run lint