一、rem实现适配

1.安装rem

yarn add lib-flexible postcss-pxtorem

2.postcss.config.js

module.exports = {
    plugins: {
        "postcss-pxtorem": {
            "rootValue": 75,
            "propList": ["*"]
        }
    }
}

3.新建utils文件夹 config.js文件导入

import Vue from 'vue'
import 'lib-flexible/flexible.js'
import '@/assets/css/reset.css'
export default Vue

4.rem是为移动端而生的要在pc和pad上跑动,一定要在App.vue文件中加

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<style>
 #app{
    width:10rem;
    margin-left:auto;
    margin-right:auto;
}
</style>

5.样式重置

在assets文件夹中新建css文件夹reset.css文件输入

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

然后再新建main.js文件中导入

import '@/assets/css/reset.css'

二、配置路由

2-1 配置路由

再routers文件夹下的Index.js文件中输入
安装 yarn add vue-router

import Vue from 'vue';
import Router from 'vue-router'; // 导入router
import Music from '@/views/Music.vue'
import Mv from '@/views/Mv.vue'
Vue.use(Router);
export default new Router({
    mode:"history",
    routes:[
        {
            path:'/music',
            name:"music",
            component:Music
        },
        {
            path:'/mv',
            name:"mv",
            component:Mv
        }
    ]
})

2-2 使用路由 App.vue

<template>
  <div id="app">
     <router-view></router-view>
  </div>
</template>

2-3 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routers'
import './utils/config.js'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2-4 router-link

<template>
  <div id="app">
    <div id="nav"> 
      <router-link to="/music">音乐</router-link>
      <router-link to="/mv">MV</router-link>
    </div>
     <router-view></router-view>
  </div>
</template>

三、全局过滤器

写在utils config.js文件中

Vue.filter("format",function(val){
  if(val.length>6){
    val = val.slice(0,6)+"..."
  }
  return val
})

四、全局组件

utils config.js

import BsBtn from '@/components/BsBtn.vue';
Vue.component('BsBtn',BsBtn)

五、http请求

安装axios
yarn add axios
utils config.js中导入axios

import Vue from 'vue'
import 'lib-flexible/flexible.js'
import '@/assets/css/reset.css'
import axios from 'axios'   // 
Vue.filter("format",function(val){
    if(val.length>8){
        val = val.slice(0,8)+"..."
    }
    return val;
})
axios.defaults.baseURL = 'http://192.168.14.49:5000';  // 
Vue.prototype.axios = axios  //
export default Vue

 mounted(){
        this.axios.get("/top/playlist").then(res=>{
            this.playlists = res.data.playlists;
        })
    }

前端三大框架

3-6路由

新建一个vue文件