移动端配置
首先新建脚手架 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是切换页面的时候会有一个 r o u t e s 这个被触发,可以自行打印一下 routes这个被触发,可以自行打印一下 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);
},