最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
// 对于使用 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)]