Vue入门（三）——插槽和webpack使用

上次说了Vue的基本语法与组件，相比大家已经有所了解了，接下来我们继续来进行了解Vue吧。
下面就是插槽的使用了，插槽的使用相当简单的语法。具体如下：



对于上面的三张截图，我简单解释一下。插槽就相当于我们在前端页面留下的一个预留空间，TarBar.vue里面有一个插槽，里面插了一个TarBarItem组件，而TarBarItem组件中有两个插槽，里面放的是两个img标签。我们也可以给插槽起名字，这样就可以对应使用了，就像TarBarItem.vue里面的插槽就是具名插槽，就是起一个名字。

接下来就是webpack的使用了
首先是node环境的安装，然后才能安装webpack，node环境的安装，百度上可多，很好找，这里我就不说了。

js文件的打包：
打包完成之后，会在dist文件下，生成一个bundle.js文件。

package.json中定义启动。

使用下面这个进行启动。

关于less文件的处理，图片文件处理等等可以看官网，都有的 很简单，复制粘贴就好了。不过你就看看就好了 ，一般也不用。

下面是在webpack里面引入vue.js.我们想要使用vue,就必须有它的依赖，所以我们要进行安装：npm install vue --save。

我们之前都是在html里面写的，但是我们平常不会这样写的，我们都是写成一个.vue文件，但是大家肯定是第一次见，所以系统本身是不会识别这个后缀的文件的，所以我们要安装能解析这种类型的东西。就是下面的。

下面我们来了解一下plugin插件。




下面是搭建本地服务器

需要注意的一个点：el和template之间的关系，我们在写template和el同时存在的情况下，template将会将el给替换掉的。

webpcak了解即可，不用太在意，知道里面一些东西即可，平常我们都是利用脚手架自动配置的。这个后面将会说的。