路由 axios 移动端 vant 配置

移动端配置

首先新建脚手架 vue create +项目名称

然后我们需要在src里面新建一个文件夹 flexible下面写index.js需要复制https://github.com/amfe/lib-flexible页面的index.js里面的代码。
然后我们需要在main.js里面引入import “@/flexible”;
下载两个组件yarn add postcss postcss-pxtorem -D
然后我们需要在 postcss.config.js 的根目录文件里面复制以下代码，没有就新建
这里的75是你的设计稿的宽度的十分之一

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

然后我们需要在下载组件yarn add babel-plugin-import -D

我们在babel.config.js里面配置一下下面的代码，不是替换！！是新加进去

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

至此我们已经配置完成了

vant 组件

下载组件yarn add npm i vant@latest-v2 -S 这个是vue2的版本

src下创建vant/index.js的文件夹和文件夹下的js文件，然后在main.js中引入 import “@/vant”;

配置完成！

路由配置

下载组件 yarn add vue-router@3

在src下创建router文件夹和文件夹下面的index.js文件，引入组件

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
 
];

const router = new VueRouter({
  routes,
});

export default router;

我们需要创建路由在const routes里面写即可，建议这样写

const routes = [
 { 
 path: "/notfound", 
 /这里是路径 死的写法
component: () => import("@/views/NotFound") 
 },
];

还可以这样写
import notfound from "@/views/NotFound"

const routes = [
 { 
 //这里的路由可以自己取，不过建议和文件名一样，方便阅读
 path: "/notfound", 
component: notfound  
 },
];

二级路由写法

{
    path: "/usercenter",
    // 默认打开页面
    redirect: "/usercenter/welcome",
    component: () => import("@/views/UserCenter"),
    //配置这个路由的子路由（二级路由）
    children: [
      {
        //欢迎
        path: "welcome",
        component: () => import("@/views/UserCenter/child/welcome"),
        meta: {
          title: "欢迎页面",
        },
      },
      {
        //设置
        path: "setting",
        component: () => import("@/views/UserCenter/child/setting"),
        meta: {
          title: "设置页面",
        },
      },
    ],
  },

redirect这个是表示检测到如果浏览器是上面path的尾巴，那就直接跳转到redirect设置的路由

meta: {
title: “设置页面”,
},

上面的meta是切换页面的时候会有一个$routes这个被触发，可以自行打印一下$route 是什么，meta可以传一些值过去

我们还可以利用query传值，具体看笔记

最后我们需要在main.js引入

import Vue from 'vue'
import App from './App.vue'
// 6. 引入路由对象router///看这里
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  // 7. 挂载router路由对象看这里
  router, /
  render: h => h(App),
}).$mount('#app')

完成！！

module.exports = {
  lintOnSave: false,
};
/*const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
  transpileDependencies: true,
});

axios封装

新建一个文件夹utils 新建request.js

引入

import axios from "axios";

全局配置

const request = axios.create({
  baseURL: "http://localhost:3000",
});

export default request;

请求拦截和响应拦截

axios.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) 
    return Promise.reject(error);
  }
);


// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    return Promise.reject(error);
  }
);

然后新建api文件夹在每一个页面的配置的

//引入
import request from "@/utils/request";

//params上传的数据  recommendMusicApi是自己取的函数名
export const recommendMusicApi = (params) =>
  request({
    url: "/personalized",
    params,
  });

到时候我们需要请求数据

async xxxx() {
      const res = await recommendMusicApi({
        limit: 6,
      });
      console.log(res);
    },