![](https://img-blog.csdnimg.cn/86c8e68ca6b74702a8eb8093b772fa7e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue项目
文章平均质量分 60
本专栏主要收集了本人在学习Vue过程中几个项目的练习笔记,及报错信息的处理
执手天涯@
生命之旅,不能用双眸在别人的故事里捕捉生活的点滴。要以自己的双手,创造属于自己的梦。
展开
-
06、Vue简易版网易云——首页数据渲染
1、前置准备为了方便网络请求的统一管理,我们先会封装一个网络请求。步骤如下:1、在src下新建如下目录和文件2、在request.js中封装一个网络请求import axios from "axios";// 设置请求的根路径axios.defaults.baseURL = "http://localhost:9000"export default axios;2、推荐音乐数据请求和渲染1、页面铺设...原创 2022-03-27 16:17:02 · 1752 阅读 · 1 评论 -
05、Vue简易版网易云——顶部信息展示和底部标签点击切换
1、目标效果2、实现步骤1、导入Vant组件库Vant2官方文档注意我们使用的是vue2,所以必须使用vant21、在main.js中按需导入import { Tabbar, TabbarItem, NavBar} from 'vant';Vue.use(Tabbar);Vue.use(TabbarItem);Vue.use(NavBar);2、编辑Layout/index.vue页面<template> <div> <!--原创 2022-03-25 16:10:04 · 1412 阅读 · 0 评论 -
04、Vue简易版网易云——路由准备
1、目标效果2、实现步骤1、用vscode打开我们的前台项目想必大家都会啦!,我就不写怎么打开项目了,此时我们不需要启动我们的后台项目,因为目前不需要请求数据2、在src目录先新建route的路由文件夹3、在route文件夹下新建index.js文件4、开始编辑index.js路由文件这里的步骤不在进行详细说明,每一步都写在了代码的注释中// 导入vue实例对象import Vue from "vue";// 导入vue-routerimport VueRouter from原创 2022-03-25 09:42:27 · 593 阅读 · 0 评论 -
03、Vue简易版网易云——页面准备
1、在src目录下新建views文件夹此文件夹用于存放我们的页面文件完整的文件如图所示:2、页面详细解释及前提样式准备1、views/Layout/index.vue - 负责布局(上下导航 - 中间二级路由切换首页和搜索页面)后期会用到的样式文件:/* 中间内容区域 - 容器样式 */.main { padding-top: 46px; padding-bottom: 50px;}2、views/Home/index.vue - 用于展示推荐音乐和最新音乐标题原创 2022-03-24 16:53:13 · 1769 阅读 · 1 评论 -
02、Vue网易云简易版——环境搭建
1、创建并初始化项目进入到需要创建项目的目录下,进入到命令行界面使用vue create 项目名称 创建项目选择配置项项目创建完成启动项目(可以按照上图中的蓝色命令启动,也可以在vscode中利用第三方包管理器启动)...原创 2022-03-24 15:57:33 · 703 阅读 · 2 评论 -
01、Vue简易版网易云——项目简介
1、项目介绍在经过一段时间Vue的学习之后,本人决定用一个简易版的网易云项目,对Vue的知识进行进一步的巩固。项目完整github地址2、项目技术1、后台技术本次后台使用的是,别人写好的网络接口。如果需要可以直接点击下方链接进行下载,本地启动即可,如有问题可以私信询问。后台接口地址: 网易云Node.js后台接口2、前端技术vuevue-routerbootstrap 框架less less-loader css处理器vant 组件库axios 网络请求3、项目截图原创 2022-03-23 20:54:42 · 3074 阅读 · 7 评论