Vue初级前端面试整理
1.vue全家桶
Vue两大核心思想:组件化和数据驱动。
- 组件化:把整体拆分为各个可以复用的个体
- 数据驱动:通过数据变化直接影响bom展示,避免dom操作。
vue全家桶
- 构建工具:vue-cli,sass样式
- 路由:vue-router(http://router.vuejs.org)
- 状态管理:vuex(http://vuex.vuejs.org)
- http请求:vue-resource(https://github.com/pagekit/vue-resource)
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。
2.vue-cli脚手架搭建
确保电脑中安装node.js(版本至少6以上,否则可能会报错):
https://nodejs.org/zh-cn/
如果是window7,安装低版本
nodev12版本
找到倒数第五个64位操作系统.msi文件进行安装,直接解压可能不好用
打开cmd命令行,安装cnpm(也可直接使用npm)
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装全局vue
cnpm install -g vue-cli
通过cd命令进入文件夹,创建vue-cli工程
vue init webpack +项目名
创建成功后,安装依赖
cnpm install
启动项目
npm run dev
也可使用vue ui 进入可视化脚手架
3.vue-router路由懒加载
为什么要使用vue路由懒加载
vue这种单页面应用,如果我们不去做路由懒加载,打包之后的文件将会异常的大,就会造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,不利于用户体验,运用懒加载就可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
如何实现路由懒加载
方法一(ES中的import 推荐使用):
import Vue from 'vue'
import Router from 'vue-router'
const home = ()=>import("@/components/page/home/home")
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
//或者
routes: [
{
path: '/',
name: '首页',
meta: {
title: "ElvenShop",
requireAuth: false,
backgroundColor: "#fff",
footer: true,
},
component: () => import( '../views/Home.vue')
},
方法二(使用resolve方法)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: resolve=>(require(["@/components/page/home/home"],resolve))
},
4.vuex
安装
npm install vuex --save
创建store对象:vuex 中最关键的是store对象,这是vuex的核心。可以说,vuex这个插件其实就是一个store对象,每个vue应用仅且仅有一个store对象
const store = new Vuex.Store({...});
1.state – 存放状态
2.getters – state的计算属性
3.mutations – 更改状态的逻辑,同步操作
4.actions – 提交mutation,异步操作
5.mudules – 将store模块化
5.vue脚手架aixos安装使用
1.安装:
npm install axios
2.在src新建api文件夹,新建api/index.js文件,以配置aixos
3.在需要的页面是使用import引入
import axios from 'axios'
4.跨域请求
在项目根目录中创建js文件,命名为vue.config.js,然后添加一下代码
module.exports = {
// baseUrl: "./", //配置打包时的相对路径
devServer: {
open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
proxy: {
'/': { //代理api
target: "https://vapi.frayun.com",//服务器api地址
changeOrigin: true,//是否跨域
ws: false, // proxy websockets
pathRewrite: {//重写路径
"^/": '/'
}
}
}
},
}
在api/index.js中增加配置
import axios from 'axios'
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
})
}
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
6.vue-loader是什么?使用它的途径有哪些?
一、vue-loader作用:
解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理
二、用途
js可以写es6,style样式可以写scss或less、template可以加jade等
三、
css-loader:加载由vue-loader提取出的CSS代码
vue-template-compiler:把vue-loader提取出的HTML模板编译成可执行的jacascript代码