基于vue的开发微信小程序h5界面+浏览器适配

前提：创建了vue项目（vue create proname）

主要为了记录浏览器适配，创建vue项目省略了，网上搜一搜，一大堆。

开发h5界面是为了通过<web-view :src="webUrl"></web-view>(其中webUrl是指vue项目的服务器地址)，将页面嵌入到微信小程序中，微信小程序的开发在另一篇博客中有说明：https://www.cnblogs.com/wq805/p/16229343.html

项目结构如下图所示：

 

 

 创建好项目开始浏览器适配

 

 

第一步：安装vant 2

vant是移动端的组件，目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，我的项目是基于Vue 2,所以安装了vant 2

npm i vant@latest-v2 -S

引入组件时，我选择按需引入，还有导入所有组件和手动按需引入，导入所有组件会增加项目体积，手动按需引入比较麻烦。下面说一下按需引入的步骤：

1.安装插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

npm i babel-plugin-import -D

打开目录中的babel.config.js文件，加入下面的代码

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true,
    }, 'vant'],
  ]

 

 

 2.在src目录下新建vant文件，在该文件下创建index.js文件

 

 

 按下图方式写到index.js文件中

 

 

3.在目录结构中的main.js里引入vant组件

import './vant'

第二步：安装lib-flexible和postcss-pxtorem

浏览器适配有Viewport布局、Rem布局适配、桌面端适配、底部安全区适配。

这里主要说Rem布局适配。

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

npm i lib-flexible@0.3.2 --save

npm install postcss-pxtorem@5.1.1 --save-dev

项目结构中的 .postcssrc.js 文件是我后期新建的，用来配置PostCSS，配置内容如下：

 

 最后在main.js中引入flexible

 

之后就可以直接使用vant组件啦~例如：

<van-button round block type="default" @click="regist">注册</van-button>