vue 搭建H5项目及适配

1、创建项目

vue create test (项目名称)

vue2完整创建流程 

2.进行H5适配

        2.1 选择ui框架（以vantui 为例）

                 具体参考   

    安装依赖（vue2版本）

npm i vant@latest-v2 -S

   通过babel-plugin-import自动引入组件（推荐）

npm i babel-plugin-import -D
   在项目中配置
    // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
    module.exports = {
          plugins: [
            ['import', {
              libraryName: 'vant',
              libraryDirectory: 'es',
              style: true
                }, 'vant']
            ]
     };
在main.js中引入所需要的组件
    例如： 按钮组件
   import { Button } from 'vant';

安装H5适配所需插件 

1.安装amfe-flexible

        amfe-flexible用于设置 rem 基准值

npm i -S amfe-flexible
//在index.html中修改
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
//在main.js中引入
import 'amfe-flexible/index.js'

2.安装 postcss-pxtorem

        postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

npm install postcss-pxtorem -D
//最外层新建postcss.config.js，设计稿为375时添加如下配置
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};
//如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:
// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

！如果安装完postcss-pxtorem依赖后运行项目报错

 可以降低版本再次安转

npm i postcss-pxtorem@5.1.1

运行成功H5简单适配就算完成了