深度掌握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
?