2024年最新移动端vue-cli4开发环境搭建(1)，大厂面试是什么意思

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

// 对于使用 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

},

children: [

{

path: ‘/home’,

name: ‘Home’,

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

meta: { title: ‘首页’, keepAlive: false }

},

{

path: ‘/about’,

name: ‘About’,

component: () => import(‘@/views/home/about’),

meta: { title: ‘关于我’, keepAlive: false }

}

]

}

]

const router = new VueRouter({

mode:‘hash’,

routes

})

export default router

Vuex 状态管理

目录结构

├── store

│ ├── modules

│ │ └── app.js

│ ├── index.js

│ ├── getters.js

main.js 引入

import Vue from ‘vue’

import App from ‘./App.vue’

import store from ‘./store’

new Vue({

el: ‘#app’,

router,

store,

render: h => h(App)

})

使用

最后main.js代码为：

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

// 移动端适配

import ‘lib-flexible/flexible’;

// import Vant from ‘vant’;

import ‘vant/lib/index.css’;

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

import ‘@/plugins/vant’

//动画库

// import animate from ‘animate.css’

// 引入全局样式

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

import axios from ‘axios’

Vue.prototype.axios=axios

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

Vue.config.productionTip = false

new Vue({

router,

store,

最后

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

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

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

lugins/vant’

//动画库

// import animate from ‘animate.css’

// 引入全局样式

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

import axios from ‘axios’

Vue.prototype.axios=axios

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

Vue.config.productionTip = false

new Vue({

router,

store,

最后

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

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

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

[外链图片转存中…(img-pcsOtTFN-1715755881433)]

[外链图片转存中…(img-IVs0MVDV-1715755881433)]

[外链图片转存中…(img-2dX3qX68-1715755881434)]