# vant-h5-template

**Repository Path**: salad2017/vant-h5-template

## Basic Information

- **Project Name**: vant-h5-template
- **Description**: vue-vant h5模板 : 基于vue-cli4 构建，组件/样式按需引入、路由懒加载、定制主题、rem适配 、国际化、Gzip压缩、axios/promise 封装等，可在此模板进行二次开发！
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 6
- **Created**: 2020-01-12
- **Last Updated**: 2025-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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文件
                }
            }
        }
      }
    }
```

### rem适配 
```

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文件

```
### Gzip压缩
```

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()
    }

```
### 使用Less
```
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>
```
## 集成 axios 请求
```
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
```

### Lints
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).