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

最新推荐文章于 2022-12-01 10:10:59 发布

khazix__

最新推荐文章于 2022-12-01 10:10:59 发布

阅读量146

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/silence_ox/article/details/113869241

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

插槽

认识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'
    }
  }

khazix__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第四天：Vue组件的slot以及webpack

插槽认识slot在生活中，很多地方都有插槽，电脑的USB插槽，插板中的电源插槽等。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、鼠标、键盘、硬盘、手机、音响等等。组件的插槽组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示了什么。封装组件如果我们每一个单独去封装一个组件，显然不合适：比如每一个页面都返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，好像也不合理有些左侧是菜单，有些是返回，有些中间是搜索，有些
复制链接

扫一扫