一、安装软件包

  1. npm i amfe-flexible -S
  2. npm i postcss-pxtorem@5.1.1 -D
  3. npm i babel-plugin-import -D
  4. npm i lib-flexible -S

二、修改babel.config.js

  1. module.exports = {
  2.   presets: ['@vue/cli-plugin-babel/preset'],
  3.   plugins: [
  4.     [
  5.       'import',
  6.       {
  7.         libraryName: 'vant',
  8.         libraryDirectory: 'es',
  9.         style: true
  10.       },
  11.       'vant'
  12.     ]
  13.   ]
  14. };

三、修改vue.config.js

  1. const autoprefixer = require('autoprefixer');
  2. const pxtorem = require('postcss-pxtorem');
  3. module.exports = {
  4.   outputDir: 'dist',
  5.   publicPath: './',
  6.   css: {
  7.     loaderOptions: {
  8.       postcss: {
  9.         plugins: [
  10.           autoprefixer(),
  11.           pxtorem({
  12.             rootValue: 37.5,
  13.             propList: ['*']
  14.           })
  15.         ]
  16.       }
  17.     }
  18.   }
  19. };

四、修改main.js

  1. import 'amfe-flexible';
  2. import 'lib-flexible'
  3. import {createApp} from 'vue'
  4. import App from './App.vue'
  5. import router from './router'
  6. import store from './store'
  8. const app = createApp(App)
  9. app.use(store)
  10. app.use(router)
  11. app.mount('#app')

五、修改index.html

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <title><%= htmlWebpackPlugin.options.title %></title>
  9.   </head>
  10.   <body>
  11.     <div id="app"></div>
  12.   </body>
  13. </html>

六、限制最大宽度(src/assets/style/index.less)

  1. body {
  2.   max-width: 560px;
  3.   margin: 0 auto!important;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }