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

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' createApp(App).use(router).mount('#app') 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' createApp(App).use(router).use(store).mount('#app') 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 lang="scss" Js Copy Vue.js