vant-ui实现适配,小项目步骤

1.安装依赖

yarn add postcss-pxtorem amfe-flexible    //实现适配
yarn add vant

2.main.js中导入依赖

import "amfe-flexible/index.js"
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

3.修改postcss.config.js文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,   //如果样稿是1080px,这个地方要改
      propList: ['*']
    }
  }
}

tip: 在public/index.html下一定要加上视口，之前注销现在要加上

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4.样式重置

找到reset.css官网 将样式复制到assets/css/reset.css中
import '@/assets/css/reset.css'    //@是指src的根目录

5.异步路由

export default new Router({
    mode:"hash",
    routes:[
        ...
        {
            path:"/detail",
            name:"detail",
            /* 异步路由 */
            component:()=>import('@/pages/Detail')
        }
    ]
})

6.拆分配置路由

1.src/utils/config.js

import Vue from 'vue'
import 'lib-flexible/flexible.js'
import '@/assets/css/reset.css'
import BsBtn from '@/components/BsBtn.vue';
Vue.filter("format",function(val){
    if(val.length>6){
      val=val.slice(0,6)+"..."
    }
    return val
  })
  Vue.component('BsBtn',BsBtn)
  export default Vue;

2.src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routers'
import './utils/config.js'    //在main.js中导入路由页面utils/config.js
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

7.跨域和请求数据

1.安装依赖

yarn add axios

2.config.js中导入依赖

import axios from 'axios'    //导入
axios.defaules.baseURL='http://192.168.14.49:5000'   //主地址
Vue.prototype.axios=axios;

3.对应.vue中发送请求

import ItemIndex from '@/components/ItemIndex'  //导入组件
export default {
   name:"Music",
   data(){
       return{
           playlists:[]
       }
   },
    //注册组件
   components:{
       ItemIndex
   },
   mounted(){
       this.axios.get("/top/playlist?cat=华语&limit=12").then(res=>{
           this.playlists=res.data.playlists
       })
   }
}
//4.渲染数据
<template>
  <div class="container">
      <item-index :data="item" v-for="item of playlists" :key="item.id">
         <div slot="icon" class="icon">
            <img src="../../assets/images/p0.png" alt="">
            {{item.playCount}}
         </div>
      </item-index>
  </div>
</template>