Vue3.0高阶实战：开发高质量音乐Web app

Download: Vue3.0高阶实战：开发高质量音乐Web app深度掌握2021前端最优技术栈从项目需求分析到组件开发，体验完整项目开发流程，掌握Web App开发技巧与方案提高项目质量和可维护性能自主开发组件库，将模块化思...

Download: Vue3.0高阶实战：开发高质量音乐Web app

深度掌握2021前端最优技术栈

从项目需求分析到组件开发，体验完整项目开发流程，掌握Web App开发技巧与方案

提高项目质量和可维护性

能自主开发组件库，将模块化思想直接应用于工作实际，工作效率直线提高

掌握Vue3全家桶高阶技巧以及JS、CSS动画开发

酷炫动画、流畅交互，高度还原原生产品体验，Vue3 高级知识点全面掌握

完成一个真实的线上音乐Web App

收获高级项目独立开发能力，进阶成为大厂高薪招募的稀缺人才

全局安装 Vite

// 全局安装 vite-app

npm i -g vite-app

// 创建项目

npm init vite-app <project-name>

cd project-name

yarn || npm install

Js复制

安装 必要第三方插件

安装 TypeScript

npm install -D typescript

Js复制

根目录(src)下新增 shim.vue.d.ts 文件

declare module '*.vue' {

import { Component } from 'vue'

const component: Component

export default component

}

// 或者

declare module '*.vue' {

import Vue from 'vue'

// const component: defineComponent<{},{},any>

export default Vue

}

Js复制

修改 main.js 为 main.ts

并修改 index.html 文的引用

安装 vue-router

vue3.0 最好安装最新的版的 vue-router，版本错误的话无法使用路由进行跳转

npm install vue-router@4

Js复制

然后在 src 目录下新建 router 目录，在目录下新建 index.ts 文件

从 vue-router 引入 createRouter 和 createWebHashHistory(或者createWebHistory)

import {createRouter, createWebHashHistory} from 'vue-router'

Js复制

然后新建 一个 route对象，存放路由配置，使用 createRouter 方法 创建 router 对象，最后通过 export default 导出

const routes = [

{

  path: '/',

  component: () => import('../views/home/index.vue'),

  redirect: '/index',

  children: [

    {

      path: '/login',

      component: () => import('../views/login/index.vue')

    },

  ]

},

]

var router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

Js复制

在 mian.ts 对象中 通过 import 引入，并用 Vue 的 use 方法 注册到 Vue 实例上

import router from './router'

createApp(App).use(router).mount('#app')

Js复制

使用 Vue 状态管理工具 Vuex

// 安装

npm install vuex@next

// 使用

// /src/store/index.ts

import Vuex from 'vuex'

const store = new Vuex.Store({

// ...

modules: {},

state: () => {

  return {

    name: 'lxx'

  }

},

mutations: {},

actions: {},

getters: {}

})

export default store

// 注册

import store from './store'

createApp(App).use(router).use(store).mount('#app')

Js复制

使用 sass 语法

// 安装 sass

yarn add sass

// 安装完成之后 将 sass 从 dependencies 移动到 devDependencies

// 使用时 在 style 后加

Js复制

Vue.js