2024年Vue3项目搭建规范(1)，网易严选面试有几轮

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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

“@vue/prettier/@typescript-eslint”,

‘plugin:prettier/recommended’

],

二、项目搭建规范-第三方库集成

---

2.1 vue.config.js配置（修改vue-cli封装好的内部webpack）

node接受commonJS模板规范

const path require(‘path’)

module.exports = {

// 1. 配置方式一：CLI提供的属性

outputDir: ‘./build’,

publicPath: ‘./’, // 打包后文件是相对路径

// 2. 配置方式二：和Webpack属性完全一致，最后会进行合并

configureWebpack: {

resolve: {

alias: {

components: ‘@/components’

}

}

},

// configure是函数形式：直接覆盖原Webpack配置

configureWebpack: (config) => {

config.resolve.alias = {

“@”: path.resolve(__dirname, ‘src’),

components: ‘@/components’

}

},

// 3. 配置方式三：chainWebpack链式形式

chainWebpack: (config) => {

config.resolve.alias.set(‘@’, path.resolve(__dirname, ‘src’).set(‘components’, ‘@/components’))

}

}

2.2 vue-router集成

1. 安装vue-router最新版本

npm install vue-router@next

defineComponent：定义组件，更好的支持ts

2. 创建router对象

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

import type { RouteRecordRaw } from ‘vue-router’; // 声明导入的是一个type，可不加

const routes: RouteRecordRaw[] = [

{

path: ‘/’,

redirect: ‘/login’

},

{

path: ‘/login’,

component: () => import(‘@/views/login/index.vue’)

},

{

path: ‘/main’,

component: () => import(‘@/views/main/index.vue’)

}

]

const router = createRouter({

routes,

history: createWebHashHistory()

})

export default router

2.3 element-plus集成

1. 全局引用：所有组件全部集成

优点：集成简单，方便使用

缺点：全部会打包

import ElementPlus from ‘element-plus’;

import ‘element-plus/theme-chalk/index.css’;

app.use(ElementPlus)

1. 按需引用

优点：包会小一些

缺点：引用麻烦

哈哈哈哈

import { ElButton } from ‘element-plus’

import ‘element-plus/theme-chalk/base.css’;

import ‘element-plus/theme-chalk/el-button.css’;

components: {

ElButton

}

以上方法太麻烦，可以添加babel-plugin-import工具进行按需引入，并进行配置

npm install babel-plugin-import -D

// babel.config.js

module.exports = {

plugins: [

[

‘import’,

{

libraryName: ‘element-plus’,

// 引入组件

customName: (name) => {

name = name.slice(3)

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

},

// 引入样式

customStyleName: (name) => {

name = name.slice(3)

// 如果你需要引入 [name].scss 文件，你需要用下面这行

// return element-plus/lib/components/${name}/style

// 引入 [name].css

return element-plus/lib/components/${name}/style/css

}

}

]

],

presets: [‘@vue/cli-plugin-babel/preset’]

}

• main.ts入口文件存放主要逻辑

• 把共性的逻辑进行抽取

// main.ts

import { createApp, App } from ‘vue’

import { globalRegister } from ‘./global’

import rootApp from ‘./App.vue’

const app: App = createApp(rootApp)

/** app.use()有传入函数的两种方式

app.use(function(app: App) {

})

app.use({

install: function(app: App) {

}

})

*/

// 方式一：

globalRegister(app)

// 方式二：更优雅

app.use(globalRegister)

// global/index.ts

import { App } from ‘vue’

import registerElement from ‘./regiserElement’

export function globalRegister(app: App): void {

registerElement(app)

}

// global/registerELement

import { App } from ‘vue’

import ‘element-plus/theme-chalk/base.css’;

import { ElButton, ElForm } from ‘element-plus’

const components = [

ElButton,

ElForm

]

export default function (app: App): void {

for (const component of components) {

app.component(component.name, component)

}

}

三、其他文件

---

1. .browserslistrc - 帮助我们做浏览器适配

• 帮助我们做浏览器适配

• css查询文件

• babel：ES6 TS -> JS

1% // 市场份额大于百分之一的浏览器

last 2 versions // 适配主流浏览器的最新的两个版本

not dead // 目前浏览器处于维护状态的

2. tsconfig.json - TS配置文件

{

“compilerOptions”: { // 编译选项

// 目标代码（ts -> js(es5/6/7)）

“target”: “esnext”,

// 目标代码需要使用的模块化方案(commonjs require/module.exports/es module import/export)，常写umd，代表支持多种模块化

“module”: “esnext”,

// 严格的检查(any)

“strict”: true,

// 对jsx进行怎样的处理，不转化preserve保留

“jsx”: “preserve”,

// 辅助导入功能

“importHelpers”: true,

// 按照node方式去解析模块 import “/index.node .json .js”

“moduleResolution”: “node”,

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

rve保留

“jsx”: “preserve”,

// 辅助导入功能

“importHelpers”: true,

// 按照node方式去解析模块 import “/index.node .json .js”

“moduleResolution”: “node”,

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

[外链图片转存中…(img-IHZSw43v-1715355197860)]

前端视频资料：
[外链图片转存中…(img-lz1s0kly-1715355197861)]