vue-cli3-h5移动端适配搭建

最新推荐文章于 2024-12-09 08:51:00 发布

weixin_42017624

最新推荐文章于 2024-12-09 08:51:00 发布

阅读量665

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42017624/article/details/114557162

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

记载vue-cli3 进行移动端h5 框架搭建

1.通过vue-ui 进行项目基本搭建，选择babel，less，vuex，router，eslint

2.安装postcss-pxtorem，yarn add postcss-pxtorem@5.1.1 -D 指定选择5.1.1版本是防止报错提示： postcss-pxtorem 需要 8

根目录下新建.postcssrc.js

补充代码

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*'],
        //selectorBlackList: ['van-']
      }
    }
  }

3.安装lib-flexible yarn add lib-flexible -S

4.安装vant yarn add vant -S

实现vant按需引入插件

# 安装插件
npm i babel-plugin-import -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

5.src下创建plugins/vant.js文件，按需引入vant组件，然后在main.js中引入

// 按需全局引入 vant组件
import Vue from "vue";
import { Button, List, Cell, Tabbar, TabbarItem, Tab, Tabs } from "vant";
Vue.use(Button);
Vue.use(Cell);
Vue.use(List);
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Tab);
Vue.use(Tabs);

6.安装Vconsole进行调试

yarn add Vconsole -S