一、vant-ui实现视配

1-1 安装依赖

  1. yarn add postcss-pxtorem lib-flexible amfe-flexible

1-2 main.js引入依赖

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

1-3 postcss.config.js

  1. module.exports = {
  2.   plugins: {
  3.     'autoprefixer': {
  4.       browsers: ['Android >= 4.0', 'iOS >= 7']
  5.     },
  6.     'postcss-pxtorem': {
  7.       rootValue: 37.5,
  8.       propList: ['*']
  9.     }
  10.   }
  11. }

Tips：public/index.html 一定要加上视口

使用这个适配时，当有一些我们不想转换rem的属性，比如border,1px转换rem之后，可能在手机上就看不见了
我们可以在她的配置文件中加上一行属性
propList: [‘‘,’!border‘]

二、配置vant-ui

1-1全局配置

  1. yarn add vant
  1. import Vue from 'vue';
  2. import Vant from 'vant';
  3. import 'vant/lib/index.css';
  5. Vue.use(Vant);

1-2 自动按需引入组件

yarn add vant babel-plugin-import
babel 中添加配置

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

然后需要什么导入什么
**

三、vw的使用

1-1配置postcss.config.js

  1. module.exports = {
  2.   plugins: {
  3.     "postcss-import": {},
  4.     "postcss-url": {},
  5.     "postcss-aspect-ratio-mini": {},
  6.     "postcss-write-svg": {
  7.       utf8: false
  8.     },
  9.     "postcss-cssnext": {},
  10.     "postcss-px-to-viewport": {
  11.       viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
  12.       viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
  13.       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
  14.       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
  15.       selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
  16.       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
  17.       mediaQuery: false // 允许在媒体查询中转换`px` 
  18.     },
  19.     "postcss-viewport-units": {},
  20.     "cssnano": {
  21.       preset: "advanced",
  22.       autoprefixer: false,
  23.       "postcss-zindex": false
  24.     }
  25.   }
  26. }

1-2安装依赖

yarn add cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg
`yarn add cssnano-preset-advanced postcss-import postcss-url autoprefixer``

1-3在public/index.html配置

  1. <!DOCTYPE html>
  2. <html>
  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">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <title>vuecli3vw</title>
  9.   </head>
  10.   <body>
  11.     <noscript>
  12.       <strong>We're sorry but vuecli3vw doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  13.     </noscript>
  14.     <div id="app"></div>
  15.     <!-- built files will be auto injected -->
  17.    //配置下面的js
  18.     <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  19.     <script>
  20.       window.onload = function () {
  21.         window.viewportUnitsBuggyfill.init({
  22.           hacks: window.viewportUnitsBuggyfillHacks
  23.         });
  24.       }
  25.     </script>
  26.   </body>
  27. </html>

四、数据mock

1.在线接口管理平台mock yapi

2. vue-cli mock

参考：https://www.html.cn/archives/10066

  • 2-1 目录

image.png

  1. //index.json写上自己的接口
  3. //vue.config.js
  5. const mockIndexData = require("./mock/index.json");
  6. module.exports = {
  7.   //...  
  8.   devServer: {
  9.     port: 8080,
  10.     before(app) {
  11.       app.get("/api/index", (req, res) => {
  12.         res.json(mockIndexData);
  13.       });
  14.     }
  15.   }
  16. };
  18. //axios请求
  19. mounted(){
  20.     this.axios.get("/api/index").then(res=>{
  21.   })
  22. }