第四天：Vue组件的slot以及webpack

插槽

认识slot

在生活中，很多地方都有插槽，电脑的USB插槽，插板中的电源插槽等。
插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、鼠标、键盘、硬盘、手机、音响等等。

组件的插槽

组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示了什么。

封装组件

如果我们每一个单独去封装一个组件，显然不合适：比如每一个页面都返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，好像也不合理有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

最好的封装方式是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需要，决定插槽中插入什么内容，是搜索栏还是文字还是菜单，由调用者自己来决定。

插槽的基本使用：

<body>
<div id="app"><div><cpn></cpn><cpn><input type="text" placeholder="请输入内容"></cpn><cpn><i>嘿嘿</i></cpn></div>
</div><template id="cpn"><div><h2>我是组件</h2><p>我是组件，哈哈哈</p><slot><button>按钮</button></slot><!--默认为按钮--></div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},components: {cpn: {template: '#cpn'}}})
</script>
</body>

相似的内容要插入不同的元素，只要使用slot便可以获得效果，节省了代码量。
如果有多个值，同时放入到组件进行替换时，一起作为替换元素。

具名插槽的使用

当子组件的功能复杂时，子组件的插槽可能并非是一个。比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？这个时候，我们就需要给插槽起一个名字。

<body>
<div id="app"><cpn><button slot="left">按钮</button></cpn>
</div><template id="cpn"><div><slot name="left"><span>左边</span></slot><slot name="center"><span>中间</span></slot><slot name="right"><span>右边</span></slot></div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},components: {cpn: {template: '#cpn'}}})
</script>
</body>

结果：

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><cpn></cpn><cpn><template slot-scope="slot"><span v-for="item in slot.data">{{item}} -- </span><br><span>{{slot.data.join(' - ')}}</span></template></cpn>
</div><template id="cpn"><div><slot :data="pLanguages"><ul><li v-for="item in pLanguages">{{item}}</li></ul></slot></div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},components: {cpn: {template: '#cpn',data() {return {pLanguages: ['JavaScript','Python','Swift','Go','C++']}}}}})
</script>
</body>
</html>

结果：

webpack

webpack的介绍和安装

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。

安装
安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
1、查看自己的node版本（需要大于8.9）

2、全局安装webpack

webpack的使用

创建dist和src目录，分别放置打包后的文件和源码，编写main.js

const {add,mul} = require('./mathUtils.js')console.log(add(20,30))
console.log(mul(20,30))import {name,age,height} from "./info";console.log(name);
console.log(age);
console.log(height);

编写mathUtils.js

function add(num1,num2) {return num1+num2;
}
function mul(num1,num2) {return num1*num2
}
module.exports = {add,mul
}

编写info.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

将main.js进行打包
在index中导入打包后的文件
结果：

webpack中使用css文件的配置

loader

loader是webpack中一个非常核心的概念。
我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖，但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx.vue文件转成js文件等等。
loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置

使用loader打包css样式
编写css样式：

body {background-color: red;
}

将它放入入口文件中：
使用webpack命令
失败，因为未安装loader，下载loader：
npm install --save-dev css-loader
再进行配置：
页面也不会变红，原因是css-loader只负责将css文件进行加载，需要添加style-loader（更多loader请看官网），先下载style-loader，再添加配置

webpack图片文件处理

1、下载url-loader
2、配置

{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit:31000}}]}

3、webpack打包
4、打开网页

ES6语法转ES5

1、下载babel
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2、配置webpack.config.js文件

{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}}

3、再次打包

webpack使用vue配置

1、下载vue
npm install vue --save
2、入口函数中引入vue

import Vue from 'vue'
const app = new Vue({el: '#app',data: {message: 'Hello Webpack'}
})

3、在网页中配置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="./dist/bundle.js"></script>
</body>
</html>

4、取消runtime-only，设置为runtime-complier，在webpack.config.js中配置

resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}}