前端学习：vue3.0+tsx网易云移动端仿制版（部分遇到的问题以及解决办法）

概述

主要用于整理开发过程中遇到的问题，以及在我开发过程中，需要用到的模块的开发，我觉得重要的，我就记录一下！

---

使用到的技术

前端

• vue3.0+ts
• rem布局 更好适应不同移动端
• scss
• swiper.js 首页轮播+部分内容滑动+搜索页 tab

后端

node.js

思路

• 使用 vue3.0+ts 进行开发；cli 安装方式在模块第一条； 基础
• 选择 rem 布局，有利于各种移动端的适应； 基础
• 实现首页轮播，需要用到 swiper.js 目前可使用 npm 安装 完成
• 实现首页部分热门数据展示+对接接口； 完成
• 实现歌单界面数据的展示； 完成
• 实现全局播放器； 完成
• 实现播放页面光碟转动，歌词根据时间滚动； 完成
• 实现首页搜索页组件； 完成
• 实现具体搜索页内容（多内容切换）； 完成
• 实现首页左侧设置内容； 完成
• 实现个人中心样式； 完成
• 实现用户登录注册等； 完成
• 实现每日推荐； 完成
• 实现查看他人信息； 未开始
• 实现私人 FM； 未开始
• 实现歌单分类界面；完成
• 实现排行榜页面； 开发中
• 实现歌曲评论界面； 未开始
• 实现云贝相关界面； 未开始
• 待思考…

模块实现

此处主要展示某些模块或者组件的实现方式；

---

vue3.0 CLI 安装需要的配置；

• 安装 vue cli 最新版

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  

• 使用 cli 创建项目

  vue create appName
  

• 此时会有弹出 Please pick a preset，如果以前没有安装过，请选择 Manually select features 后回车；因为我们需要设置某系我们需要的配置！

• 现在提示：Check the features needed for your project ， 这里是上下键切换后 按空格进行选择或者取消，这里我们需要选择的比较多；

  • Choose Vue version 选择版本
  • Bable 将 ES6 编译成 ES5
  • TyperScript JS 超集，主要是类型检查
  • Router 路由
  • Vuex 状态管理
  • CSS Pre-processors css 预编译 (稍后会对这里进行配置)
  • Liner / Formatter 代码检查工具

  这里几个都有*号后回车 进入下一步

• 选择 3.x 后回车

• 进入 Use class-style component syntax? 这里输入 Y

  是否使用 Class 风格装饰器？
  即原本是：home = new Vue()创建 vue 实例
  使用装饰器后：class home extends Vue{}

• 进入 Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 这里输入 Y

• 进入 Use history mode for router 路由使用历史模式? （y/n 都可） 我输入 n

• 进入 Pick a CSS pre-processor 这里看你习惯选择 我们选择 Sass/SCSS (with node-sass)

• 进入 Pick a linter / formatter config 选择 ESLint with error prevention only

• 进入 Pick additional lint features 代码检查方式 选择 Lint on save

• 进入 Where do you prefer placing config for… 选择 In package.json

• 进入 Save this as a preset for future projects? 是否在以后的项目中使用以上配置？ 可以保存 可以不保存 此处是为了下次直接使用 跳过选择 （我选择否 n）

• 开始安装搭建 （如果是首次创建 会让你选择使用 npm 还是 yarn 进行安装）

• 安装完成后

  cd xxxx
  npm run serve #即可运行项目
  

配置 rem 布局配置

• 首先安装对应的依赖；

  npm install amfe-flexible --save
  npm install postcss-px2rem --save
  

• 在 main.ts 中引入

  import "amfe-flexible";
  

• 在 package.json 中配置 px2rem-loader

  "postcss": {
       
      "plugins": {
       
        "autoprefixer": {
       },
        "postcss-px2rem": {
       
          "remUnit": 37.5 //这里指的是设计稿的宽度 （370 / 10）
        }
      }
    },
  
  

• 配置完成后 重新启动项目就好啦， 使用过程中 px 会转换成 rem 如果没有 vscode 插件去改格式的话，可以使用大写的 px 保留不被转化；

• 如果使用的是vscode 且需要 rem 提示的话 需要安装一个插件 cssrem 这里不介绍此插件用法

实现全局组件的方式

很多时候，某个组件我们会在很多地方使用，每次都需要进行组件的引入，此时我们需要设置对应的全局组件，以供我们在需要时调用！

• 首先我们做好准备 在utils/types.ts中定义一种类型 withInstall

  type withInstall<T> = T & {
        install(app: App): void };
  export {
        withInstall };
  

• 写好组件后 需要在组件目录下创建一个 index.ts 文件对组件进行导出 比如我们的 input 组件

  input.jsx 组件文件,index.scss 样式文件，

  import {
        App } from "vue";
  import {
        withInstall } from "../utils/types";
  import MInput from "./input";
  
  MInput.install = (app: App)