2024年最新Vite+Vue3项目文件分析(1)，研发岗面试题

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

• Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：

///

main.ts中全局挂载两种写法

---

1. 第一种：

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

import ElementPlus from ‘element-plus’

import ‘./assets/theme/index.css’

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

2. 第二种：

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

import ElementPlus from ‘element-plus’

import ‘./assets/theme/index.css’

const app = createApp(App)

app.use(store)

app.use(router)

app.use(ElementPlus)

app.mount(‘#app’)

vite.config.ts

---

• vite配置文件，下面代码只配置了一个element-plus样式，详细请看 查看配置

import { defineConfig } from ‘vite’

import vue from ‘@vitejs/plugin-vue’

import styleImport from ‘vite-plugin-style-import’

export default defineConfig({

plugins: [vue(),

styleImport({

libs: [

{

libraryName: ‘element-plus’,

esModule: true,

ensureStyleFile: true,

resolveStyle: (name) => {

return element-plus/lib/theme-chalk/${name}.css;

},

resolveComponent: (name) => {

return element-plus/lib/${name};

},

}

]

})

]

})

tsconfig.json

---

• TS配置文件，参考脚手架

{

“compilerOptions”: {

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素