总结一下
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。
Vue.component(“todo-items”,{
props: [‘item’,‘index’],
//只能绑定当前组件的方法
template: '
- {{index}}--------{{item}} <button @click=“remove”>删除
- ',//v-on:的缩写 @
methods:{
remove:function (index){
//this.$emit（自定义事件名，参数） 自定义事件分发
this.$emit(‘remove1’,index);
}
}
});
var vm = new Vue({
el:“#app”,
data:{
title:“刘建宇”,
todoItems:[‘狂说Java’,‘狂说Java1’,‘狂说Java2’]
},
methods: {
removeItems:function (index){
console.log(“删除了”+this.todoItems[index]+“OK”)
this.todoItems.splice(index,1);//一次删除一个元素，删除当前index下的元素
}
}
});
当我们点击删除的时候，就会调用组件内部的方法remove，然后remove方法中采用事件分发给remove1，
而组件内部的v-on:remove1=“removeItems(index1)” 将我们的remove1绑定到组件外的removeItems方法，
从而实现组件内部调用组件外部的方法进行删除操作
vue-cli
安装环境
需要的环境
Node.js : http://nodejs.cn/download/
确认nodejs安装成功:
-
cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
-
cmd 下输入 npm -v,查看是否能够正确打印出版本号即可!
-
上面两个成功说明环境就OK了
这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
Npm命令解释
-
npm install moduleName： 安装模块到项目目录下
-
npm install -g moduleName： -g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置
-
npm install --save moduleName： --save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖， -S 为该命令的缩写
-
npm install --save-dev moduleName : --save-dev 的意思是将模块安装到项目目录下，并在package 文件的 devDependencies 节点写入依赖 ，-D为该命令的缩写
安装 Node.js 淘宝镜像加速器（cnpm）
-g 就是全局安装
npm install cnpm -g
若安装失败，则将源npm源换成淘宝镜像
因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org
然后再执行
npm install cnpm -g
安装vue-cli
#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list
第一个 vue-cli 应用程序
在我们项目路径下
这里的 myvue 是项目名称，可以根据自己的需求起名 注意在自己的项目路径下创建
vue init webpack myvue
-
我们初学这里一路都选择no即可，实际开发的时候这里一路yes就可以了会帮我们生成一些默认的东西;
-
初始化并运行
cd myvue
npm install
启动
//我们启动的文件路径一定是进入项目文件里面里面
npm run dev
// 如果启动失败，注意文件的路径
我们也可以在idea的Terminal里面运行，但是注意是管理员身份
Webpack
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
在任何路径下执行都可以
npm install webpack -g
npm install webpack-cli -g
测试安装成功: 输入以下命令有版本号输出即为安装成功
webpack -v
webpack-cli -v
使用Webpack
-
先创建一个包 交由idea打开 会生成一个.idea文件 那么就说明该文件就交由idea负责
-
在idea中创建modules包，用于放置JS模块等资源文件，再创建hello.js,hello.js 暴露接口 相当于Java中的类
//第一步 暴露一个方法:sayHi
exports.sayHi = function () {
document.write(“
狂神说ES6
>”) //方法体}
- 创建main.js 当作是js主入口 , main.js 请求hello.js 调用sayHi()方法
//第二步 引入方法
var hello1 = require(“./hello”);//请求此路径下的hello模块(其实就是hello.js)赋给hello1，相当于我们 hello1=new hello1
hello1.sayHi() //调用hello模块中的方法
- 在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件
enrty请求main.js的文件
output是输出的位置和名字
-
entry：入口文件，指定webpack用哪个文件作为项目的入口
-
output：输出，指定webpack把处理完成的文件放置到指定路径
-
module：模块，用于处理各种类型的文件
-
plugins：插件，如：热更新，代码重用等
-
resovle：设置路径指向
-
watch：监听，用于设置文件改动后直接打包
module.exports = { //导出这个模块
entry: ‘./modules/main.js’, //入口：当前目录下的modules下的main.js
output: { //输出：
filename: ‘./js/bundle.js’ //位置：当前目录下的js下的bundle.js
}
}
-
在idea命令台输入webpack命令（idea要设置管理员启动）（首先要进入我们的项目中）
-
注意：新版本要使用：webpack ./modoules/main.js -o ./dist/js/bundle.js 进行打包【我们这里采用这个】
-
./modoules/main.js 这里的main.js得是我们的引入模块的部分!!!
-
完成上述操作之后会在主目录生成一个dist文件 生成的js文件夹路径为/ dist/js/bundle.js
-
在主目录创建index.html 导入bundle.js
index.html
Title 
- 说明
x 参数 --watch用于监听 实时打包
webpack --watch
vue-router
1.项目路径下安装
npm install vue-router --save-dev
2.导入
import VueRouter from “vue-router”;
3.使用
Vue.use(VueRouter);
我们的axios操作也一样
vue-router
是一个我们标准的前端化工程
vue-router demo实例
1． 将之前案例由vue-cli生成的案例用idea打开
2． 清理不用的东西 assert下的logo图片 component定义的helloworld组件 我们用自己定义的组件
3． 清理代码 以下为清理之后的代码 src下的App.vue 和main.js以及根目录的index.html
这三个是默认代码
index.html
main.js
import Vue from ‘vue’
import App from ‘./App’
Vue.config.productionTip = false
new Vue({
el: ‘#app’,
components: {App},
template: ‘’
})
App.vue
4.在components目录下创建一个自己的组件Content,Test,Main(这两个和Content内容一样的就不放示例代码了)【我们组件中export导出，要使用的时候在其他组件中import即可！！】
Content.vue
内容页
5.安装路由,在src目录下,新建一个文件夹 : router,专门存放路由
index.js(默认配置文件都是这个名字)【这里在我们安装vue-cli的时候选择yes，则会自动帮我们生成】
import Vue from ‘vue’;
import VueRouter from “vue-router”; //导入我们安装的vue-router
import Content from “…/components/Content”; //导入我们自己写的vue组件
import Main from “…/components/Main”; //导入我们自己写的vue组件
import liu from “…/components/liu”; //导入我们自己写的vue组件
//安装路由 ，虽然我们导入了vue-router，但是要显示声明使用VueRouter
Vue.use(VueRouter);
//配置导出路由，为了让别人使用
export default new VueRouter({ //导出我们的对象
routes:[ //路由
{
path:‘/content’, //路由的路径 @RequestMapping
name:‘content’, //给我们的路由起名
component:Content //跳转的组件
},
{
path:‘/main’,
name:‘main’,
component:Main
},
{
path:‘/liu’,
name:‘liu’,
component:liu
}
]
});
6.在main.js中配置路由
main.js
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’ //自动扫描当前文件里面的路由配置
Vue.config.productionTip = false
new Vue({
router, //配置路由，才能使用
el: ‘#app’,
components: { App },
template: ‘’
})
7.在App.vue中使用路由
App.vue
Vue-Router
首页 //相当于我们原来的a标签 to就是herf
内容页
llll
//展示视图
总结
第一步 定义我们的组件
第二步 index.js 导入我们的路由（自己写的一些vue组件）,它相当于专注于路由的配置
第三步 main.js 配置使用我们的路由，它整个前端工程的一个入口
第四步 App.vue 使用路由
8.启动测试一下 ： npm run dev
9.效果图如下
vue+elementUI实战
elementUI官网 https://element.eleme.cn/#/zh-CN
根据之前创建vue-cli项目一样再来一遍 创建项目
1． 创建一个名为 hello-vue 的工程 vue init webpack hello-vue
2． 安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
进入工程目录
cd hello-vue
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -S
安装依赖
npm install
安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
启动测试
npm run dev
3． 创建成功后用idea打开，并删除净东西 创建views和router文件夹用来存放视图和路由
4． 在views创建Main.vue
Main.vue
首页
//定义内容5． 在views中创建Login.vue视图组件
Login.vue（用的饿了么UI中的代码）
欢迎登录
登录
<el-dialog
title=“温馨提示”
:visible.sync=“dialogVisible”
width=“30%”
:before-close=“handleClose”>
请输入账号和密码
<el-button type=“primary” @click=“dialogVisible = false”>确 定
6． 创建路由,在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件
index.js
//导入vue
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
//导入组件
import Main from “…/views/Main”;
import Login from “…/views/Login”;
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//登录页
path: ‘/main’,
component: Main
},
//首页
{
path: ‘/login’,
component: Login
},
]
})
7． 在main.js中配置相关
main.js main.js是index.html调用的 所以基本上所有东西都导出到这
一定不要忘记扫描路由配置并将其用到new Vue中
import Vue from ‘vue’
import App from ‘./App’
import VueRouter from “vue-router”;
//扫描路由配置
import router from “./router”
import ElementUI from “element-ui” //导入elementUI
import ‘element-ui/lib/theme-chalk/index.css’ //导入element css
//使用
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: ‘#app’,
router,
render: h => h(App), //ElementUI规定这样使用
})
8． 在App.vue中配置显示视图
App.vue
到这里我们可能会遇到错误： Module build failed: TypeError: this.getOptions is not a function
原因是我们的sass-loader版本过高 要去package.json改为低版本
然后重新执行npm install 即可！！！
或者直接卸载重新安装
npm uninstall node-sass 卸载
npm install node-sass@4.14.1 安装低版本
npm run dev 运行
9． 最后效果
路由嵌套
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。相当于局部变化
1、创建src/views/user/ Profile.vue
个人信息
2、创建src/views/user/ List.vue
用户列表
3、修改我们的Main.vue，这里采用了ElementUI
用户管理
//插入的地方
个人信息
//插入的地方
用户列表
内容管理
分类管理
内容列表
个人信息
退出登录
//在这里展示视图
4、index.js
//导入vue
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
//导入组件
import Main from “…/views/Main”;
import Login from “…/views/Login”;
import UserList from “…/views/user/List”; //导入子模块
import UserProfile from “…/views/user/Profile”; //导入子模块
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//首页
path: ‘/main’,
component: Main,
children: [ // 嵌套路由 写入子模块
{
path: ‘/user/profile’,
component: UserProfile,
}, {
path: ‘/user/list’,
component: UserList,
},
]
},
//登录页
{
path: ‘/login’,
component: Login
},
]
})
5、 路由嵌套实战效果图
参数传递
第一种
1、 修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
{
path: ‘/user/profile/:id’, //增加参数，类似于restful
name:‘UserProfile’,
component: UserProfile
}
2、传递参数Main.vue
name是组件的名字，这个组件名是index.js中的组件名，不是组件内部的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定
传递一个参数
个人信息
3、Profile.vue
个人信息
{{$route.params.id}} //取出参数，必须套在节点下 因为template只能有一个子标签
第二种 props 减少耦合
1、index.js
{
path: ‘/user/profile/:id’,
name:‘UserProfile’,
component: UserProfile,
props: true //添加一个props: true，使它支持传递参数的这种方式
}
2、Main.vue
这里不变
个人信息
3、目标组件增加 props 属性
Profile.vue
个人信息
{{ id }} //直接获取参数
传递用户名
1.Login.vue
this.$router.push(“/main/”+this.form.username); //登录的时候携带用户名
2.index.js
{
path: ‘/main/:name’, //参数传递
name: ‘main’,
component: Main,
props: true, //开启接收
}
3.Main.vue
export default {
props: [‘name’], //接收参数
name: “Main”
}
{{name}} //使用参数
组件重定向
定向的意思大家都明白，把一个页面跳到别外一个页面上去
1、index.js
{
path: ‘/main’,
name: ‘Main’,
component: Main
},
{
path: ‘/goHome’,
redirect: ‘/main’ //当我们请求/goHome的时候，会重定向到/main请求
}
2、Main.vue
回到首页
路由模式与 404
路由模式有两种
-
hash ：路径带 # 符号， 如 http://localhost/#/login
-
history：路径不带 # 符号，如 http://localhost/login
index.js
export default new Router({
mode: ‘history’, //去掉路径中的#
routes: [
]
});
404
1、创建src/views/NotFound.vue
404,你的页面走丢了
2、index.js
import NotFound from ‘…/views/NotFound’
{
path: ‘*’, //所有的请求，能匹配到的请求就走我们自己的请求
component: NotFound
}
3、效果图
路由钩子与异步请求
Profile.vue
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
export default {
name: “UserProfile”,
beforeRouteEnter: (to, from, next) => { //在进入路由前执行，这个就跟我们的过滤器一样，三个参数是固定的
console.log(“准备进入个人信息页”);
next(); //执行下一个，不然会卡住
},
beforeRouteLeave: (to, from, next) => { //在离开路由前执行，
console.log(“准备离开个人信息页”);
next();
}
对象篇
模块化编程-自研模块加载器
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
