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