Download: Vue3.0 High level actual combat : Develop high quality music Web app

Deep Mastery 2021 Front end optimal technology stack

From project requirements analysis to component development , Experience the whole project development process , master Web App Development skills and solutions

Improve project quality and maintainability

Can develop component library independently , Apply the idea of modularization directly to practical work , The work efficiency has been greatly improved

master Vue3 High level skills and JS、CSS Animation development

Cool animation 、 Smooth interaction , Highly restore the original product experience ,Vue3 Comprehensive grasp of advanced knowledge points

Make a real online music Web App

Gain advanced project independent development ability , Advanced talents have become scarce talents recruited by large factories with high salaries

Global installation Vite

// Global installation vite-app

npm i -g vite-app

// Create project

npm init vite-app <project-name>

cd project-name

yarn || npm install

Js Copy

install Necessary third party plug-ins

install TypeScript

npm install -D typescript

Js Copy

root directory (src) Add below shim.vue.d.ts file

declare module '*.vue' {

import { Component } from 'vue'
const component: Component
export default component


// perhaps

declare module '*.vue' {

import Vue from 'vue'
// const component: defineComponent<{},{},any>
export default Vue


Js Copy

modify main.js by main.ts

And modify it index.html Citation of articles

install vue-router

vue3.0 It's best to install the latest version of vue-router, If the version is wrong, the route cannot be used to jump

npm install vue-router@4

Js Copy

And then in src New under the directory router Catalog , New in directory index.ts file

from vue-router introduce createRouter and createWebHashHistory( perhaps createWebHistory)

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

Js Copy

Then build One route object , Store routing configuration , Use createRouter Method establish router object , Finally through export default export

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(),


export default router

Js Copy

stay mian.ts In the object adopt import introduce , And use Vue Of use Method Sign up to Vue For instance

import router from './router'


Js Copy

Use Vue State management tools Vuex

// install

npm install vuex@next

// Use

// /src/store/index.ts

import Vuex from 'vuex'

const store = new Vuex.Store({

// ...
modules: {},
state: () => {
return {
name: 'lxx'
mutations: {},
actions: {},
getters: {}


export default store

// register

import store from './store'


Js Copy

Use sass grammar

// install sass

yarn add sass

// After installation take sass from dependencies Move to devDependencies

// When using stay style After add

Js Copy