vue脚手架 vue-cli配置目录解构+组件插槽slot用法

首先npm下载好vue
进入要创建项目的路径下

vue init webpack 项目名称
项目名称不要包含中文和空格

初始化过程:

Project name (mydemo)  项目名称
Project description (A Vue.js project) 项目描述
Author (ming <fanmingjian@offcn.com>) 项目作者
Vue build (Use arrow keys) 项目运行方式
> Runtime + Compiler: recommended for most users
Install vue-router? (Y/n) 是否安装vue路由 n
Use ESLint to lint your code? (Y/n) n
Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM

进入项目根目录，执行命令

npm run dev

模块化slot用法

slot插槽语法：有两种用法 和我们动画一样分为匿名插槽和具名插槽

匿名插槽

第一步：在子组件中添加slot标签

<slot></slot>
子组件内容...

第二步：在父组件使用子组件时，在子组件的内部分发内容

<子组件名>
	要分发的内容1
</子组件名>

//父级组件 调用子级组件 直接在组件内写东西
<template>
  <div>
    <right>
        <h1>插槽</h1>
    </right>
  </div>
</template>
//子级组件
<template>
<div>
	<!-- slot占位父组件插入的标签代替这个slot -->
    <slot></slot>
    <div>子级自己的东西</div>
</div>
</template>

具名插槽

在设置插槽时，可以给插槽设置不同的name属性，来区分不同的插槽。

<slot name="插槽1"></slot>
组件内容。。。。
<slot name="插槽2"></slot>

在使用插槽时，通过slot属性来区分不同的插槽

<子组件名>
	<标签名 slot="插槽1"></标签名>
	<标签名 slot="插槽2"></标签名>
</子组件名>

```javascript
//父级组件 调用子级组件 直接在组件内写东西
<template>
  <div>
    <right>
        <h1 slot="s1">插槽1</h1>
        <h1 slot="s2">插槽2</h1>
    </right>
  </div>
</template>
//子级组件
<template>
<div>
	<!-- slot占位父组件插入的标签代替这个slot 一一对应 -->
    <slot name="s1"></slot>
    <div>子级自己的东西</div>
     <slot name="s2"></slot>
</div>
</template>