vue3学习-网易云音乐移动端（第一集）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前言 （Vue3）

注：本项目仅供学习vue3新知识点而做，大多都是简单的知识点，顺便整理一下用vue做一个移动端项目的小思路。

vue3在vue2基础上，更改了自我感觉不算多也不算少，其中setup我感觉很棒，但是以前用vue2用惯了，用起来就比较不太顺手，本项目在script模块上还是一如既往用data(){return{ //... }}之类的编写代码。

技术栈：Vue3 + ES6 + Vue-Router + Vuex + Axios + (postcss-px-to-viewport适配) + Vant + Scss

网易云音乐" title="网易云音乐">网易云音乐-nodejs-版-api">API: https://binaryify.github.io/NeteaseCloudMusicApi/#/ -> 网易云音乐 NodeJS 版 API

.

.

.

.

.

一. 项目初始化（2021.10.10）

1. 新建项目

vue create myProject

2. 使用UI组件库 Vant（下面是全局引入，按需引入看文档）

npm i vant@next -S
// main.js
import Vant from "vant"; 
import "vant/lib/index.css";
// 这个不能忘
createApp(App).use(store).use(router).use(Vant).mount("#app");

3. postcss-px-to-viewport 进行浏览器适配

npm install postcss-px-to-viewport --save-dev

4. 配置 postcss-px-to-viewport，在项目根目录新建 postcss.config.js 文件（属性自行配置，配置完重启项目，这时候就可以看到浏览器中px被转换成vw）

module.exports = {
    plugins: {
        "postcss-px-to-viewport": {
           unitToConvert: "px",        // 要转化的单位
           viewportWidth: 750,         // UI设计稿的宽度
           unitPrecision: 5,           // 转换后的精度，即小数点位数
           propList: ["*"],            // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
           viewportUnit: "vw",         // 指定需要转换成的视窗单位，默认vw
           fontViewportUnit: "vw",     // 指定字体需要转换成的视窗单位，默认vw
           selectorBlackList: ["van"], // 指定不转换为视窗单位的类名，
           minPixelValue: 1,           // 默认值1，小于或等于1px则不进行转换
           mediaQuery: true,           // 是否在媒体查询的css代码中也进行转换，默认false
           replace: true,              // 是否转换后直接更换属性值
           exclude: [/node_modules/],  // 设置忽略文件，用正则做目录名匹配
           landscape: false,           // 是否处理横屏情况
        },
    },
};

  • 未完待续...

二. 项目简单整体布局（2021.10.12）

1. tabbar (直接使用vant的tabbar组件 APP.vue)

<div class="container">
	<router-view />
</div>
<view class="zml-tabbar" v-if="$route.meta.showTabbar">
// route：开启路由模式  placeholder: 生成一个tabbar占位元素，避免有tabbar的页面内容过多，导致遮挡内容（很yin性化）
	<van-tabbar v-model="active" route placeholder active-color="#EE0A24" inactive-color="#999">
		<van-tabbar-item
		replace
		:to="item.path"
		:name="item.name" 
		:icon="active == item.name ? item.active : item.inactive"
		:key="index"
		v-for="(item, index) in tabbar" >
			<span>{{item.title}}</span>
		</van-tabbar-item>
	</van-tabbar>
</view>
// 定义数组存放tabbar数据
tabbar:[
	{path: \'/home\',name: \'home\',active: \'music\',inactive: \'music-o\',title: \'发现\'},
	{path: \'/village\',name: \'village\',active: \'shop-collect\',inactive: \'shop-collect-o\',title: \'云村\'},
	{path: \'/follow\',name: \'follow\',active: \'like\',inactive: \'like-o\',title: \'关注\'},
	{path: \'/my\',name: \'my\',active: \'friends\',inactive: \'friends-o\',title: \'我的\'}
]

2. 路由管理 router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
  {
    path: "/",
    name: "index",
    component: () => import("../pages/home/Home.vue"),
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../pages/home/Home.vue"),
    meta: {
      showTabbar: true,
    },
  },
  {
    path: "/village",
    name: "village",
    component: () => import("../pages/village/Village.vue"),
    meta: {
      showTabbar: true,
    },
  },
  {
    path: "/follow",
    name: "follow",
    component: () => import("../pages/follow/Follow.vue"),
    meta: {
      showTabbar: true,
    },
  },
  {
    path: "/my",
    name: "my",
    component: () => import("../pages/my/My.vue"),
    meta: {
      showTabbar: true,
    },
  },
  {
    path: "/search",
    name: "search",
    component: () => import("../pages/search/Search.vue"),
  },
];
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes,
});
export default router;
// 说明
// meta对象存放控制路由时需要用到的参数（参数名自定义），
// 其中showTabbar参数： 路由跳转是否显示tabbar组件（因为跳转子路由时tabbar需要隐藏）
// 代码如下：APP.vue中
<div class="zml-tabbar" v-if="$route.meta.showTabbar">
...
</div>

3. 这时候底部tabbar可以跳转，并且跳转到子路由时，tabbar相应会隐藏


。

。

。

三. 未完待续...（2021.10.12)

  • 哪里有不足的地方请指教，我就一个小白,谢谢...

  • 欲知后事如何，请看下集...《九子夺嫡》

以上是 vue3学习-网易云音乐移动端（第一集） 的全部内容， 来源链接： utcz.com/z/378407.html

回到顶部