初始化一个vant H5项目

1.首先初始化一个 cli的项目：
https://blog.csdn.net/weixin_39854011/article/details/109364695
2、npm i vant
3、自动按需引入组件：npm i babel-plugin-import -D
在babel.config.js 中新增配置：

 module.exports = {
    
    
  plugins: [
    ['import', {
    
    
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import {
    
     Button } from 'vant';

//转换为：
import Button from 'vant/lib/button';
import 'vant/lib/button/style';

4、样式初始化
npm i normalize.css

5、Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

$ npm install postcss-pxtorem --save-dev
$ npm i -S  amfe-flexible

在main.js中引入amfe-flexible

$ import 'amfe-flexible'
$ import 'amfe-flexible/index.js'

在vue.config.js中配置

module.exports = {
    
    
  css: {
    
    
    loaderOptions: {
    
    
      postcss: {
    
    
        plugins: [
          require('postcss-pxtorem')({
    
     // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}

或者

"postcss-pxtorem": {
    
    
   "rootValue": 75,
   "propList": ['*','!font','!font-size']
}

此时vue.config.js中

const path = require("path");

function resolve(dir) {
    
    
  return path.join(__dirname, dir);
}
module.exports = {
    
    
  lintOnSave: "error",
  assetsDir: "staic",
  devServer: {
    
    },
  css: {
    
    
    // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
    extract: true,
    // 开启cssSourceMap
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
    
    
      postcss: {
    
    
        plugins: [
          require("postcss-pxtorem")({
    
    
            // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ["vant", "mu"], // 忽略转换正则匹配项
            propList: ["*"]
          })
        ]
      }
    },
    // 启用CSS modules for all css / pre-processor files.
    modules: false,
  },

  chainWebpack: config => {
    
    
    // 移除 prefetch 插件
    // config.plugins.delete("prefetch");
    // eslint自动修复
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .loader("eslint-loader")
      .options({
    
    
        fix: true
      });
    // 别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("common", resolve("src/common"))
      .set("components", resolve("src/components"));
  }
};

main.js中

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "amfe-flexible/index.js";

Vue.config.productionTip = false;

new Vue({
    
    
  router,
  store,
  render: h => h(App)
}).$mount("#app");

接下来我们可以进行开发了：

初始化一个vant H5项目

猜你喜欢