学习vue第六天

最新推荐文章于 2024-06-27 19:54:40 发布

再让我学一会吧！

最新推荐文章于 2024-06-27 19:54:40 发布

阅读量103

点赞数

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

本文链接：https://blog.csdn.net/ypxcan/article/details/118459152

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

为什么使用slot?

slot翻译为插槽

组件的插槽：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn><span>呵呵呵</span></cpn>
    <cpn></cpn>
    <cpn></cpn>
</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: 'hello world!'
        },
        components: {
            cpn: {
                template: '#cpn'
            }
        }
    })
</script>
</body>
</html>

webpack安装

安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm

查看自己的node版本：

node -v

全局安装webpack

npm install webpack@3.6.0 -g

局部安装webpack(后续才需要)

--save-dev是开发时依赖，项目打包后不需要继续使用的

cd 对应目录

npm install webpack@3.6.0 --save-dev

为什么全局安装后，还需要局部安装呢？

在终端直接执行webpack命令，使用的全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

什么是loader？

loader是webpack中一个非常核心的概念

webpack用来做什么？

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关依赖。
但是，在开发中我们不仅仅有基础的js代码处理，我们也需要加载css,图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss,less转成css,将.jsx, .vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的
那怎么办呢？给webpack扩展对应的loader就可以啦

loader使用过程：