Web前端最新3分钟教你创建一个vite+ts+vue3的脚手架2024年。，2024年最新前端常见面试题

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

创建成功 cd 到根文件夹(vite-project)里面

创建vuex

在src里面新建 store文件夹创建 index.ts 文件

import { createStore } from “vuex”;

export default createStore({

state: {}, // 数据源存放地

getters: {}, // vuex 的计算属性

mutations: {}, // 操作state数据的方法

actions: {}, // 用来做异步操作发送请球

modules: {}, // 模块化vuex

plugins: [], // 使用插件的地方

// 开启严格模式

strict:true

})

main.ts 文件

import { createApp } from ‘vue’

import App from ‘./App.vue’

import store from ‘./store’// 引入

createApp(App).use(store).mount(‘#app’) // 使用

配置路由

在src下面创建一个 view 文件 在里面创建一个 index.vue home.vue 文件 文件里面要写如内容

index.vue文件 的内容 还有一个 home.vue （自己创建）

首页

在src里面新建 router文件夹创建 index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from ‘vue-router’

import HomeView from ‘…/view/index.vue’

const routes: Array = [

{

path: ‘/’,

name: ‘index’,

component: HomeView,

},

{

path: ‘/home’,

name: ‘home’,

component: () => import(‘…/view/home.vue’)

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

在main.js文件里面引入

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

createApp(App).use(store).use(router).mount(‘#app’)

清除vite自带的文件

找到 App.vue 写入

components 清除 HelloWorld.vue 文件 （如果没有引入HelloWorld.vue 文件 还是显示引入了重新启动）

tsconfig.json 文件夹写入

{

“compilerOptions”: {

“target”: “esnext”,

“useDefineForClassFields”: true,

“module”: “esnext”,

“moduleResolution”: “node”,

“strict”: true,

“jsx”: “preserve”,

“sourceMap”: true,

“resolveJsonModule”: true,

“esModuleInterop”: true,

“lib”: [“esnext”, “dom”] ,

“baseUrl”: “.”,

“paths”: {

“@/": ["src/”]

}

},

“include”: [“src//*.ts", "src//.d.ts", "src/**/.tsx”, “src/**/*.vue”],

“references”: [{ “path”: “./tsconfig.node.json” }]

}

vite.config.ts 文件夹

import { defineConfig } from ‘vite’

import vue from ‘@vitejs/plugin-vue’

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】