2024年Web前端最全Vue3+TypeScript + vite 创建项目步骤，网易前端面试社招_typescript、vue搭建前端web页面

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

import { createApp } from ‘vue’

import App from ‘./App.vue’

import ‘./index.css’

createApp(App).mount(‘#app’)

发现创建Vue的方式变了，原来是new Vue来初始化Vue，但在Vue3.0中，修改为了通过createApp的方式；

Vue3中文文档

配置项目

配置typescript

1、安装typescript

yarn add typescript -D

2、初始化 tsconfig.json

//执行命令 初始化 tsconfig.json

npx tsc --init

3、将main.js修改为main.ts

其他的引用也修改为main.ts,也需要将其他页面的 <script> 修改为 <script lang="ts">

4、配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件

添加以下内容

declare module “*.vue” {

import { Component } from “vue”;

const component: Component;

export default component;

}

配置Vue Router

Vue Router 4.0 ，变化请查看 Github 中完整的细节，

目前版本beta: v4.0.12, yarn 进行安装需要带上版本号

1、安装vuex

yarn add vue-router@4.0.12

// or

yarn add vue-router@next

2、安装完后配置vue-router

在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容

// import VueRouter from ‘vue-router’

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

const routes:any = []

// Vue-router新版本中，需要使用createRouter来创建路由

export default createRouter({

// 指定路由的模式,此处使用的是hash模式

history: createWebHashHistory(),

routes // short for routes: routes

})

// const routes :any = []

// // 3. Create the router instance and pass the routes option

// // You can pass in additional options here, but let’s

// // keep it simple for now.

// const router = VueRouter.createRouter({

// // 4. Provide the history implementation to use. We are using the hash history for simplicity here.

// history: VueRouter.createWebHashHistory(),

// routes, // short for routes: routes

// })

3、将router引入到main.ts中,修改main.ts文件

import { createApp } from ‘vue’

import App from ‘./App.vue’

import ‘./index.css’

import router from ‘./router/index’

// import router 后创建并挂载根实例。

const app = createApp(App)

// 确保 t_use_ 实例来创建router, 将路由插件安装到 app 中

app.use(router)

app.mount(‘#app’)

// createApp(App).mount(‘#app’)

配置Vuex

Vuex 4.0 ，变化请查看Github

目前版本beta: v4.0.2

1、安装vuex

yarn add vuex@4

//或者

yarn add vuex@next

2、安装完后配置vuex

在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

import { createStore } from ‘vuex’

interface State {

userName: string

}

export default createStore({

state(): State {

return {

userName: “vuex”,

};

},

});

配置Ant Design Vue

具体使用方式请参考：官方文档

1、引入ant-design-vue

yarn add ant-design-vue@next

2、在main.ts中引入

iimport { createApp } from ‘vue’

import App from ‘./App.vue’

import ‘./index.css’

import AntDesignVue from ‘ant-design-vue’;

import ‘ant-design-vue/dist/antd.css’;

import router from ‘./router/index’

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

[外链图片转存中…(img-h30bXJqL-1715379756948)]

[外链图片转存中…(img-MS1BYQih-1715379756949)]

[外链图片转存中…(img-S4VW4gOH-1715379756950)]