关于vue.js:史上最强vue总结面试开发全靠它了

vue 框架篇

vue 的长处

轻量级框架：只关注视图层，是一个构建数据的视图汇合，大小只有几十 kb；

简略易学：国人开发，中文文档，不存在语言障碍，易于了解和学习；

双向数据绑定：保留了 angular 的特点，在数据操作方面更为简略；

组件化：保留了 react 的长处，实现了 html 的封装和重用，在构建单页面利用方面有着独特的劣势；

视图，数据，构造拆散：使数据的更改更为简略，不须要进行逻辑代码的批改，只须要操作数据就能实现相干操作；

虚构 DOM：dom 操作是十分消耗性能的，不再应用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种形式；

运行速度更快: 相比拟与 react 而言，同样是操作虚构 dom，就性能而言，vue 存在很大的劣势。

请具体说下你对 vue 生命周期的了解？

总共分为 8 个阶段创立前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。

创立前 / 后：在 beforeCreated 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，vue 实例的数据对象 data 有了，el 和数据对象 data 都为 undefined，还未初始化。

载入前 / 后：在 beforeMount 阶段，vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚构的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载实现，data.message 胜利渲染。

更新前 / 后：当 data 变动时，会触发 beforeUpdate 和 updated 办法

销毁前 / 后：在执行 destroy 办法后，对 data 的扭转不会再触发周期函数，阐明此时 vue 实例曾经解除了事件监听以及和 dom 的绑定，然而 dom 构造仍然存在

为什么 vue 中 data 必须是一个函数？

对象为援用类型，当复用组件时，因为数据对象都指向同一个 data 对象，当在一个组件中批改 data 时，其余重用的组件中的 data 会同时被批改；而应用返回对象的函数，因为每次返回的都是一个新对象（Object 的实例），援用地址不同，则不会呈现这个问题。

vue 中 v -if 和 v -show 有什么区别？

v-if 和 v -show 看起来仿佛差不多，当条件不成立时，其所对应的标签元素都不可见，然而这两个选项是有区别的:

1、v-if 在条件切换时，会对标签进行适当的创立和销毁，而 v -show 则仅在初始化时加载一次，因而 v -if 的开销相对来说会比 v -show 大。

2、v-if 是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则 v -if 不会去渲染标签。v-show 则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简略的 CSS 切换。

computed 和 watch 的区别

计算属性 computed：

• 反对缓存，只有依赖数据产生扭转，才会从新进行计算
• 不反对异步，当 computed 内有异步操作时有效，无奈监听数据的变动
• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于 data 中申明过或者父组件传递的 props 中的数据通过计算失去的值
• 如果一个属性是由其余属性计算而来的，这个属性依赖其余属性，是一个多对一或者一对一，个别用 computed
• 如果 computed 属性属性值是函数，那么默认会走 get 办法；函数的返回值就是属性的属性值；在 computed 中的，属性都有一个 get 和一个 set 办法，当数据变动时，调用 set 办法。

侦听属性 watch：

• 不反对缓存，数据变，间接会触发相应的操作；
• watch 反对异步；
• 监听的函数接管两个参数，第一个参数是最新的值；第二个参数是输出之前的值；
• 当一个属性发生变化时，须要执行对应的操作；一对多；
• 监听数据必须是 data 中申明过或者父组件传递过去的 props 中的数据，当数据变动时，触发其余操作，函数有两个参数：

immediate：组件加载立刻触发回调函数执行

watch: {
  firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},
    // 代表在 wacth 里申明了 firstName 这个办法之后立刻执行 handler 办法
    immediate: true
  }
}

deep: deep 的意思就是深刻察看，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，然而这样性能开销就会十分大了，任何批改 obj 外面任何一个属性都会触发这个监听器里的 handler

watch: {
  obj: {handler(newName, oldName) {console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

优化：咱们能够应用字符串的模式监听

watch: {
  'obj.a': {handler(newName, oldName) {console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

这样 Vue.js 才会一层一层解析上来，直到遇到属性 a，而后才给 a 设置监听函数。

vue-loader 是什么？应用它的用处有哪些？

vue 文件的一个加载器，跟 template/js/style 转换成 js 模块。

$nextTick 是什么？

vue 实现响应式并不是数据发生变化后 dom 立刻变动，而是依照肯定的策略来进行 dom 更新。

nextTick 是在下次 DOM 更新循环完结之后执行提早回调，在批改数据之后应用 nextTick，则能够在回调中获取更新后的 DOM

v-for key 的作用

当 Vue 用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的程序被扭转，Vue 将不是挪动 DOM 元素来匹配数据项的扭转，而是简略复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提醒，以便它能跟踪每个节点的身份，从而重用和从新排序现有元素，你须要为每项提供一个惟一 key 属性。key 属性的类型只能为 string 或者 number 类型。

key 的非凡属性次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes。如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试修复 / 再利用雷同类型元素的算法。应用 key，它会基于 key 的变动重新排列元素程序，并且会移除 key 不存在的元素。

Vue 的双向数据绑定原理是什么？

vue.js 是采纳数据劫持联合发布者 - 订阅者模式的形式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。次要分为以下几个步骤：

1、须要 observe 的数据对象进行递归遍历，包含子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变动

2、compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，收到告诉，更新视图

3、Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，次要做的事件是:
①在本身实例化时往属性订阅器 (dep) 外面增加本人
②本身必须有一个 update() 办法
③待属性变动 dep.notice() 告诉时，能调用本身的 update()办法，并触发 Compile 中绑定的回调，则功成身退。

4、MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听本人的 model 数据变动，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变动 -> 视图更新；视图交互变动(input) -> 数据 model 变更的双向绑定成果。

组件传值

父传子

通过 props 传递

 父组件：<child value = '传递的数据' />

 子组件: props['value'], 接收数据, 承受之后应用和 data 中定义数据应用形式一样

子传父

在父组件中给子组件绑定一个自定义的事件，子组件通过 $emit()触发该事件并传值。

 父组件：<child @receive = 'receive' />

 子组件: this.$emit('receive','传递的数据')

兄弟组件传值

• 通过地方通信 let bus = new Vue()

A：methods :{函数{bus.$emit(‘自定义事件名’，数据)} 发送

B：created（）{bus.$on(‘A 发送过去的自定义事件名’，函数)} 进行数据接管

• 通过 vuex

prop 验证，和默认值

咱们在父组件给子组件传值的时候，能够指定该 props 的默认值及类型，当传递数据类型不正确的时候，vue 会收回正告

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},

请说下封装 vue 组件的过程

首先，组件能够晋升整个我的项目的开发效率。可能把页面形象成多个绝对独立的模块，解决了咱们传统我的项目开发：效率低、难保护、复用性等问题。

而后，应用 Vue.extend 办法创立一个组件，而后应用 Vue.component 办法注册组件。子组件须要数据，能够在 props 中承受定义。而子组件批改好数据后，想把数据传递给父组件。能够采纳 emit 办法。

Vue.js 的 template 编译

简而言之，就是先转化成 AST 树，再失去的 render 函数返回 VNode（Vue 的虚构 DOM 节点），具体步骤如下：

首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的形象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创立编译器的。另外 compile 还负责合并 option。

而后，AST 会通过 generate（将 AST 语法树转化成 render funtion 字符串的过程）失去 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚构 DOM 节点，外面有（标签名、子节点、文本等等）

scss 是什么？在 vue.cli 中的装置应用步骤是？有哪几大个性？

css 的预编译, 应用步骤如下：

第一步：用 npm 下三个 loader（sass-loader、css-loader、node-sass）

第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个 module 属性

第四步：而后在组件的 style 标签加上 lang 属性，例如：lang=”scss”

个性次要有:

• 能够用变量，例如（$ 变量名称 = 值）
• 能够用混合器，例如（）
• 能够嵌套

vue 如何监听对象或者数组某个属性的变动

当在我的项目中间接设置数组的某一项的值，或者间接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为 Object.defineprototy()限度，监听不到变动。

解决形式：

• this.$set(你要扭转的数组 / 对象，你要扭转的地位 /key，你要改成什么 value)

this.$set(this.arr, 0, "OBKoro1"); // 扭转数组
this.$set(this.obj, "c", "OBKoro1"); // 扭转对象

• 数组的上面这几个办法

splice()、push()、pop()、shift()、unshift()、sort()、reverse()

vue 源码中重写了这几个办法，意思是应用这些办法不必咱们再进行额定的操作，视图主动进行更新。举荐应用 splice 办法会比拟好自定义, 因为 splice 能够在数组的任何地位进行删除 / 增加操作

罕用的事件修饰符

• .stop: 阻止冒泡
• .prevent: 阻止默认行为
• .self: 仅绑定元素本身触发
• .once: 2.1.4 新增, 只触发一次
• passive: 2.3.0 新增, 滚动事件的默认行为 (即滚动行为) 将会立刻触发, 不能和.prevent 一起应用
• .sync 修饰符

从 2.3.0 起 vue 从新引入了.sync 修饰符，然而这次它只是作为一个编译时的语法糖存在。它会被扩大为一个自动更新父组件属性的 v-on 监听器。示例代码如下：

<comp :foo.sync="bar"></comp>

会被扩大为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件须要更新 foo 的值时，它须要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

vue 如何获取 dom

先给标签设置一个 ref 值，再通过 this.$refs.domName 获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

v-on 能够监听多个办法吗？

是能够的，来个例子：

<input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur,}">

assets 和 static 的区别

这两个都是用来寄存我的项目中所应用的动态资源文件。

两者的区别：

assets 中的文件在运行 npm run build 的时候会打包，简略来说就是会被压缩体积，代码格式化之类的。打包之后也会放到 static 中。

static 中的文件则不会被打包。

倡议：将图片等未解决的文件放在 assets 中，打包缩小体积。而对于第三方引入的一些资源文件如 iconfont.css 等能够放在 static 中，因为这些文件曾经通过解决了。

slot 插槽

很多时候，咱们封装了一个子组件之后，在父组件应用的时候，想增加一些 dom 元素，这个时候就能够应用 slot 插槽了，然而这些 dom 是否显示以及在哪里显示，则是看子组件中 slot 组件的地位了。

vue 初始化页面闪动问题

应用 vue 开发时，在 vue 初始化之前，因为 div 是不归 vue 管的，所以咱们写的代码在还没有解析的状况下会容易呈现花屏景象，看到相似于 {{message}} 的字样，尽管个别状况下这个工夫很短暂，然而咱们还是有必要让解决这个问题的。

首先：在 css 里加上以下代码

[v-cloak] {display: none;}

如果没有彻底解决问题，则在根元素加上 style=”display: none;” :style=”{display: ‘block’}”

vue 插件篇

状态治理（vuex）

vuex 是什么

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。Vuex 也集成到 Vue 的官网调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试性能。

怎么应用 vuex

第一步装置

npm install vuex -S

第二步创立 store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 不是在生产环境 debug 为 true
const debug = process.env.NODE_ENV !== 'production';
// 创立 Vuex 实例对象
const store = new Vuex.Store({
    strict:debug,// 在不是生产环境下都开启严格模式
    state:{ },
    getters:{ },
    mutations:{ },
    actions:{}})
export default store;

第三步注入 vuex

mport Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

vuex 中有几个外围属性，别离是什么？

一共有 5 个外围属性，别离是:

• state 惟一数据源,Vue 实例中的 data 遵循雷同的规定
• getters 能够认为是 store 的计算属性, 就像计算属性一样，getter 的返回值会依据它的依赖被缓存起来，且只有当它的依赖值产生了扭转才会被从新计算。Getter 会裸露为 store.getters 对象，你能够以属性的模式拜访这些值.

const store = new Vuex.Store({
  state: {
    todos: [{ id: 1, text: '...', done: true},
      {id: 2, text: '...', done: false}
    ]
  },
  getters: {
    doneTodos: state => {return state.todos.filter(todo => todo.done)
    }
  }
})

store.getters.doneTodos // -> [{id: 1, text: '...', done: true}]

• mutation 更改 Vuex 的 store 中的状态的惟一办法是提交 mutation, 十分相似于事件, 通过 store.commit 办法触发

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {increment (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment')

• action Action 相似于 mutation，不同在于 Action 提交的是 mutation，而不是间接变更状态，Action 能够蕴含任意异步操作

const store = new Vuex.Store({
  state: {count: 0},
  mutations: {increment (state) {state.count++}
  },
  actions: {increment (context) {context.commit('increment')
    }
  }
})

• module 因为应用繁多状态树，利用的所有状态会集中到一个比拟大的对象。当利用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 容许咱们将 store 宰割成模块（module）。

const moduleA = {state: () => ({...}),
  mutations: {...},
  actions: {...},
  getters: {...}
}

const moduleB = {state: () => ({...}),
  mutations: {...},
  actions: {...}
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

ajax 申请代码应该写在组件的 methods 中还是 vuex 的 actions 中

如果申请来的数据是不是要被其余组件专用，仅仅在申请的组件内应用，就不须要放入 vuex 的 state 里。

如果被其余中央复用，这个很大几率上是须要的，如果须要，请将申请放入 action 里，不便复用。

从 vuex 中获取的数据能间接更改吗？

从 vuex 中取的数据，不能间接更改，须要浅拷贝对象之后更改，否则报错；

vuex 中的数据在页面刷新后数据隐没

用 sessionstorage 或者 localstorage 存储数据

存储：sessionStorage.setItem('名', JSON.stringify(值) )
应用：sessionStorage.getItem('名') --- 失去的值为字符串类型，用 JSON.parse()去引号；

Vuex 的严格模式是什么, 有什么作用, 怎么开启？

在严格模式下，无论何时产生了状态变更且不是由 mutation 函数引起的，将会抛出谬误。这能保障所有的状态变更都能被调试工具跟踪到。

在 Vuex.Store 结构器选项中开启, 如下

const store = new Vuex.Store({strict:true,})

怎么在组件中批量应用 Vuex 的 getter 属性

应用 mapGetters 辅助函数, 利用对象开展运算符将 getter 混入 computed 对象中

import {mapGetters} from 'vuex'
export default{
    computed:{...mapGetters(['total','discountTotal'])
    }
}

组件中重复使用 mutation

应用 mapMutations 辅助函数, 在组件中这么应用

import {mapMutations} from 'vuex'
methods:{
    ...mapMutations({setNumber:'SET_NUMBER',})
}

而后调用 this.setNumber(10)相当调用 this.$store.commit(‘SET_NUMBER’,10)

mutation 和 action 有什么区别

• action 提交的是 mutation，而不是间接变更状态。mutation 能够间接变更状态
• action 能够蕴含任意异步操作。mutation 只能是同步操作
• 提交形式不同

action 是用 this.store.dispatch('ACTION_NAME',data)来提交。mutation 是用 this.$store.commit('SET_NUMBER',10)来提交

• 接管参数不同，mutation 第一个参数是 state，而 action 第一个参数是 context，其蕴含了

{
    state,      // 等同于 `store.state`，若在模块中则为部分状态
    rootState,  // 等同于 `store.state`，只存在于模块中
    commit,     // 等同于 `store.commit`
    dispatch,   // 等同于 `store.dispatch`
    getters,    // 等同于 `store.getters`
    rootGetters // 等同于 `store.getters`，只存在于模块中
}

在 v -model 上怎么用 Vuex 中 state 的值？

须要通过 computed 计算属性来转换。

<input v-model="message">
// ...
computed: {
    message: {get () {return this.$store.state.message},
        set (value) {this.$store.commit('updateMessage', value)
        }
    }
}

路由页面治理（vue-router）

什么是 vue-router

Vue Router 是 Vue.js 官网的路由管理器。它和 Vue.js 的外围深度集成，让构建单页面利用变得大海捞针。蕴含的性能有：

• 嵌套的路由 / 视图表
• 模块化的、基于组件的路由配置
• 路由参数、查问、通配符
• 基于 Vue.js 过渡零碎的视图过渡成果
• 细粒度的导航管制
• 带有主动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中主动降级
• 自定义的滚动条行为

怎么应用 vue-router

第一步装置

npm install vue-router -S

第二步在 main.js 中应用 Vue Router 组件

第三步配置路由

• 定义 (路由) 组件

路由组件能够是间接定义，也能够是导入曾经定义好的组件。这里导入曾经定义好的组件。如下

• 定义路由（路由对象数组）

定义路由对象数组。对象的 path 是自定义的门路（即应用这个门路能够找到对应的组件），component 是指该路由对应的组件。如下：

• 实例化 Vue Router 对象

调用 Vue Router 的构造方法创立一个 Vue Router 的实例对象，将上一步定义的路由对象数组作为参数对象的值传入。如下

• 挂载根实例

第四步在 App.vue 中应用路由

在 App.vue 中应用 <router-view> 标签来显示路由对应的组件，应用 <router-link> 标签指定当点击时显示的对应的组件，to 属性就是指定组件对应的路由。如下：

怎么定义 vue-router 的动静路由？怎么获取传过来的动静参数？

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。应用 router 对象的 params.id 获取动静参数

vue-router 的导航钩子

罕用的是 router.beforeEach(to,from,next)，在跳转前进行权限判断。一共有三种：

• 全局导航钩子：router.beforeEach(to,from,next)
• 组件内的钩子
• 独自路由独享组件

vue 路由传参

应用 query 办法传入的参数应用 this.$route.query 承受

应用 params 形式传入的参数应用 this.$route.params 承受

router 和 route 的区别

route 为以后 router 跳转对象外面能够获取 name、path、query、params 等

router 为 VueRouter 实例，想要导航到不同 URL，则应用 router.push 办法

路由 TypeError: Cannot read property ‘matched’ of undefined 的谬误问题

找到入口文件 main.js 里的 new Vue()，必须应用 router 名，不能把 router 改成 Router 或者其余的别名

// 引入路由
import router from './routers/router.js'

new Vue({
    el: '#app',
    router,    // 这个名字必须应用 router
    render: h => h(App)
});

路由按需加载

随着我的项目功能模块的减少，引入的文件数量剧增。如果不做任何解决，那么首屏加载会相当的迟缓，这个时候，路由按需加载就闪亮退场了。

webpack< 2.4 时
{ 
    path:'/', 
    name:'home',
    components:resolve=>require(['@/components/home'],resolve)
} 
webpack> 2.4 时
{ 
    path:'/', 
    name:'home', 
    components:()=>import('@/components/home')
}

import()办法是由 es6 提出的，动静加载返回一个 Promise 对象，then 办法的参数是加载到的模块。相似于 Node.js 的 require 办法，次要 import()办法是异步加载的。

Vue 外面 router-link 在电脑上有用，在安卓上没反馈怎么解决

Vue 路由在 Android 机上有问题，babel 问题，装置 babel polypill 插件解决

Vue2 中注册在 router-link 上事件有效解决办法

应用 @click.native。起因：router-link 会阻止 click 事件，.native 指间接监听一个原生事件

RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题

• 只用 a 标签，不应用 button 标签
• 应用 button 标签和 Router.navigate 办法

网络申请(axios)

这个模块请看我的另一篇文章，此处不再整顿（我太懒了）

学会了 axios 封装，世界都是你的

视频播放(video.js)

这个模块请看我的另一篇文章，此处不再整顿（我太懒了）

手把手从零开始 — 封装一个 vue 视频播放器组件

vue 罕用 ui 库

挪动端

• mint-ui（http://mint-ui.github.io/#!/z…）
• Vant（https://youzan.github.io/vant…）
• VUX (https://vux.li/)

pc 端

• element-ui（https://element.eleme.cn/2.13…）
• Ant Design of Vue（https://www.antdv.com/docs/vu…）
• Avue (https://avuejs.com/)

罕用 webpack 配置

vue-lic3 脚手架（vue.config.js）

publicPath

类型：String

默认：’/’

部署利用包时的根本 URL。默认状况下，Vue CLI 会假如你的利用是被部署在一个域名的根门路上，例如 https://www.my-app.com/。如果利用被部署在一个子门路上，你就须要用这个选项指定这个子门路。例如，如果你的利用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/

这个值也能够被设置为空字符串 (”) 或是相对路径 (‘./’)，这样所有的资源都会被链接为相对路径，这样打进去的包能够被部署在任意门路，也能够用在相似 Cordova hybrid 利用的文件系统中。

productionSourceMap

类型：boolean

moren：true

不容许打包时生成我的项目起源映射文件，在生产环境下能够显著的缩小包的体积

productionSourceMap

类型：boolean

moren：true

不容许打包时生成我的项目起源映射文件，在生产环境下能够显著的缩小包的体积

注 Source map 的作用：针对打包后的代码进行的解决，就是一个信息文件，外面贮存着地位信息。也就是说，转换后的代码的每一个地位，所对应的转换前的地位。有了它，出错的时候，除错工具将间接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大不便

assetsDir

搁置生成的动态资源 (js、css、img、fonts) 的 (绝对于 outputDir 的) 目录, 默认是 ”,

indexPath

指定生成的 index.html 的输入门路(绝对于 outputDir)。也能够是一个绝对路径。默认是 ’index.html’

lintOnSave

是否在每次保留时应用 eslint 查看，这个对语法的要求比拟严格，对本人有要求的同学能够应用

css

css: {
    // 是否启用 css 拆散插件，默认是 true，如果不启用 css 款式拆散插件，打包进去的 css 是通过内联款式的形式注入至 dom 中的，extract: true,
    sourceMap: false,// 成果同上
    modules: false,// 为所有的 CSS 及其预处理文件开启 CSS Modules。// 这个选项不会影响 `*.vue` 文件。},

devServer

本地开发服务器配置，此处间接贴上我罕用的配置，以正文的形式介绍

devServer: { 
    // 配置开发服务器
    host: "0.0.0.0",
    // 是否启用热加载，就是每次更新代码，是否须要从新刷新浏览器能力看到新代码成果
    hot: true,
    // 服务启动端口
    port: "8080",
    // 是否主动关上浏览器默认为 false
    open: false,
    // 配置 http 代理
    proxy: { 
      "/api": { // 如果 ajax 申请的地址是 http://192.168.0.118:9999/api1 那么你就能够在 jajx 中应用 /api/api1 门路, 其申请门路会解析
        // http://192.168.0.118:9999/api1，当然你在浏览器上开到的还是 http://localhost:8080/api/api1;
        target: "http://192.168.0.118:9999",
        // 是否容许跨域，这里是在开发环境会起作用，但在生产环境下，还是由后盾去解决，所以不用太在意
        changeOrigin: true,
        pathRewrite: {// 把多余的门路置为 ''"api": ""}
      },
      "/api2": {// 能够配置多个代理，匹配上那个就应用哪种解析形式
        target: "http://api2",
        // ...
      }
    }
},

pluginOptions

这是一个不进行任何 schema 验证的对象，因而它能够用来传递任何第三方插件选项，例如：

{
    // 定义一个全局的 less 文件，把公共款式变量放入其中，这样每次应用的时候就不必从新援用了
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: ['./src/assets/public.less']
    }
}

chainWebpack

是一个函数，会接管一个基于 webpack-chain 的 ChainableConfig 实例。容许对外部的 webpack 配置进行更细粒度的批改。例如：

chainWebpack(config) {// 增加一个门路别名 假如有在 assets/img/menu/ 目录下有十张图片，如果全门路 require("/assets/img/menu/img1.png")
// 去引入在不同的层级下切实是太不不便了，这时候向下方一样定义一个路劲别名就很实用了
    config.resolve.alias
      // 增加多个别名反对链式调用
      .set("assets", path.join(__dirname, "/src/assets"))
      .set("img", path.join(__dirname, "/src/assets/img/menu"))
      // 引入图片时只需 require("img/img1.png"); 即可
}

参考：

1、Vue 常见问题总结 https://blog.csdn.net/qq_2767…

2、vue 常见面试题 https://zhuanlan.zhihu.com/p/…

3、vuex 官网 https://vuex.vuejs.org/zh/

4、Vuex 面试题汇总 https://juejin.im/post/5dba91…

5、Vue CLI 官网 https://cli.vuejs.org/zh/