第四天：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'}}
總結
以上是生活随笔為你收集整理的第四天：Vue组件的slot以及webpack的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初学MyBatis-Plus
- 下一篇： Redis概述和基础