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