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为trueconst 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/