使用 vue-cli 构建的 vue 项目，webpack 的配置文件是分散在很多地方的，而我们需要修改的是build/webpack.base.conf.js，修改两处的代码

参考

• Webpack——令人困惑的地方

webpack 官方提供了一个 definePlugin，专门用来定义一些变量，通常我们把用于类似开发和生产环境的切换上。
https://webpack.github.io/docs/list-of-plugins.html#defineplugin

参考

• 使用 Vuex + Vue.js 构建单页应用

• 使用 Vue.js 和 Vuex 实现购物车场景
  vue-demo-collection

配置 Vuex

在src下创建一个文件夹叫做vuex。里面定义三个文件。

mutation-types.js 定义类型的

1
2

// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = 'SET_HEADER_TITLE'

问题：vuex-router-sync，干嘛用的？

https://github.com/vuejs/vuex-router-sync
Effortlessly keep vue-router and vuex store in sync.

在 尤大写的 hacknews-2.0 中
https://github.com/vuejs/vue-hackernews-2.0

JSFiddle Hello World 例子

独立构建 vs 运行时构建

• 独立构建:包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
• 运行时构建:不包括模板编译，不支持 template 选项。运行时构建，可以用 render 选项，但它只在单文件组件中起作用，因为单文件组件的模板是在构建时预编译到 render 函数中，运行时构建只有独立构建大小的 30%，只有 16Kb min+gzip 大小。

修改的 webpack 配置文件

全局配置

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口

1
2
3
4
5

entry: {
    app: './src/main.js',
    app2: './src/main2.js',
    app3: './src/main3.js',
},

运行、编译的时候每一个入口都会对应一个Chunk

如何理解 Vue.js 的组件中的 slot?

slot 有点类似面向对象思想中的「多态」。