2024年最新移动端vue-cli4开发环境搭建(2)，2024年最新我的面试经历作文

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

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

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

前端面试题汇总

postcss-plugin-px2rem是一款 postcss 插件，用于将单位转化为 rem

lib-flexible用于设置 rem 基准值

其中px自动转rem的插件网上有许多，比如postcss-pxtorem，postcss-px2rem，postcss-pxtorem-exclude（exclude属性不好用，有可能是我配置有问题，至今没找到原因）等，通过多次实践对比，我还是推荐使用postcss-plugin-px2rem，这个插件配置选项上有exclude属性，它可以配置是否对某个文件夹下的所有css文件不进行从px到rem的转换，所以我们可以利用这个特性，把项目中的node_module文件夹排除掉。这样如果我们项目中是用了，前端UI框架的话，就不会吧UI框架（如：Element等）中的

px单位转换成rem了，也可以自行通过正则进行匹配。

安装命令如下：

cnpm install postcss-plugin-px2rem lib-flexible --save-dev

在main.js中添加如下代码：

import 'lib-flexible/flexible';

安装好了之后，我们需要进行插件的配置，有别于cli2的配置目录结构，cli4的配置需要在项目根目录中创建vue.config.js文件，然后在里面进行项目的各种配置，下面是我配置好的postcss-plugin-px2rem，接口代理，eslint配置项，如下：

// vue.config.js

module.exports = {

// 输出文件目录

outputDir: ‘dist’,

// eslint-loader 是否在保存的时候检查

lintOnSave: false,

css: {

loaderOptions: {

postcss: {

plugins: [

require(‘postcss-plugin-px2rem’)({

rootValue: 70, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。

// unitPrecision: 5, //允许REM单位增长到的十进制数字。

//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。

// propBlackList: [], //黑名单

exclude: /node_modules/i, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值

// selectorBlackList: [], //要忽略并保留为px的选择器

// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。

// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。

mediaQuery: false, //（布尔值）允许在媒体查询中转换px。

minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0

}),

]

}

}

},

// 基本路径

publicPath: process.env.NODE_ENV === ‘production’

? ‘./’

‘/smile-client/’,

devServer: {

host: ‘localhost’,

port: 8080,

open: true,

hotOnly: true, // 热更新

proxy: {

‘/smile-client’: { // 本地mock服务器

target: ‘http://192.168.1.17:8888’,

changeOrigin: true,

ws: false,

pathRewrite:{

‘^/smile-client’:‘’ //这里理解成用‘/smile-client’代替target里面的地址，后面组件中我们调接口时直接用api代替 比如我要调用’http://codetpx.lncwkj.com/xxx/duty?age=30’，可在axios的url中直接写‘smile-client/xxx/duty?age=30’即可

}

}

} // 设置代理

},

}

3. 依赖包的安装

在控制台中安装css-loader，style-loader（用于解析阿里iconfont图标），vant，animation，axios

安装css-loader和style-loader：

cnpm install css-loader --save-dev

cnpm install style-loader --save-dev

安装vant：

cnpm install vant --save

在main.js中引入vant，添加如下代码：

import Vant from ‘vant’;

import ‘vant/lib/index.css’;

Vue.use(Vant);

VantUI 组件按需加载

项目采 用Vant 自动按需引入组件 (推荐)下 面安装插件介绍：

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

安装插件:

npm i babel-plugin-import -D

在 babel.config.js 设置

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置

const plugins = [

[

‘import’,

{

libraryName: ‘vant’,

libraryDirectory: ‘es’,

style: true

},

‘vant’

]

]

module.exports = {

presets: [[‘@vue/cli-plugin-babel/preset’, {useBuiltIns: ‘usage’, corejs: 3}]],

plugins

}

但是每次页面使用的时候还是要引入，很麻烦，项目在 src/plugins/vant.js 下统一管理组件，需要哪个引入哪个，不用重复引入，这样就可以在页面直接使用了，方便~

// 按需全局引入 vant组件

import Vue from ‘vue’

import {Button, List, Cell, Tabbar, TabbarItem} from ‘vant’

Vue.use(Button)

Vue.use(Cell)

Vue.use(List)

Vue.use(Tabbar).use(TabbarItem)

maim.js内容改为：

import ‘vant/lib/index.css’;

// 全局引入按需引入UI库 vant

import ‘@/plugins/vant’

Sass 全局样式:

目录结构，在 src/assets/css/文件夹下包含了三个文件

├── assets

│ ├── css

│ │ ├── index.scss # 全局通用样式

│ │ ├── mixin.scss # 全局mixin

│ │ └── variables.scss # 全局变量

最后在main.js中导入index.scss

// 引入全局样式

import ‘@/assets/css/index.scss’

也可以通过vue.config.js 配置注入 sass 的 mixin variables 到全局，不需要手动引入

module.exports = {

css: {

extract: true,

sourceMap: false,

loaderOptions: {

scss: {

// 注入 sass 的 mixin variables 到全局

prependData: `

@import “assets/css/mixin.scss”;

@import “assets/css/variables.scss”`

}

}

}

}

每个页面自己对应的样式都写在自己的 .vue 文件之中

安装animation (不用动画暂时可以不安装)

cnpm install animate.css --save

在main.js中添加如下代码：

import animate from ‘animate.css’

安装axios

cnpm install axios --save

在main.js中添加如下代码：

import axios from ‘axios’

Vue.prototype.axios=axios

iconfont矢量图引入：

在阿里矢量图标官网上选择需要用到的图标，然后下载到本地，解压缩之后将如下文件进行复制，并在assets文件夹中创建iconfont文件夹，把这些文件粘贴到里面

在main.js中添加如下代码

import ‘./assets/iconfont/iconfont.css’;

具体使用https://www.jianshu.com/p/b6e88141a698

4. 项目开发

以上这些环境搭建好了之后，我们就可以开发项目了，如果pc和移动同时开发，首先我们要判断浏览器是pc端还是移动端环境，然后跳转不同的路由来实现加载不同的页面，项目src目录结构如下：

api 接口封装

filters 工具(方法)库

plugins vant按需引入

views页面级组件

router里用于配置路由

tools文件用于存放自己的工具类

store用于存放vuex

untils axios拦截

components用于存放公共组件

assets用于存放自己的项目静态资源（非第三方引入）

App.vue代码如下（写入判断pc端还是移动端，然后根据情况跳转路由）：

router/index.js路由配置如下：

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const routes = [

{

path: ‘/’,

component: () => import(‘@/views/layouts/index’),

redirect: ‘/home’,

meta: {

title: ‘首页’,

keepAlive: false

},

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

x;

}

router/index.js路由配置如下：

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const routes = [

{

path: ‘/’,

component: () => import(‘@/views/layouts/index’),

redirect: ‘/home’,

meta: {

title: ‘首页’,

keepAlive: false

},

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

[外链图片转存中…(img-iB0JL28g-1715755915894)]