1.VUE组件插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<child-a>
<!-- 具名插槽 -->
<button slot="gy">我是底部bottom按钮</button>
<h1>我是标题内容</h1>
<child-a/>
</div>
<template id="childa">
<div>
<!-- 匿名插槽 -->
<slot></slot>
<h1>我是默认中间内容</h1>
<slot name="gy"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
/* 注册组件的命名是首字母大写 使用组件的时候中间要使用-分割 */
components:{
ChildA:{
template:"#childa"
}
}
})
/* 有一个模态框组件child 需要显示的是标题内容和底部的bottom */
/* 默认只有中间的内容 需要使用child的时候 插入标题和底部bottom */
</script>
</body>
</html>
效果图：
2.es6导入导出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 本地使用es6导入script必须添加上type="module"
必须使用live server 启动一个域名端口打开 -->
<script src="./vue.js"></script>
<script type="module">
/* 导入一个对象 */
import obj from './1.js'
console.log(obj);
</script>
</body>
</html>
JS文件：
/* 默认导出一个对象 */
export default{
name:"youyuxi"
}
3.脚手架安装：
新建文件夹取名webapp-vue，在文件夹内使用npm init -y 新建一个package.json文件
在你当前的文件夹内，按住shift，右击鼠标选择powershell命令窗口
使用npm i -g @vue/cli 全局（整个电脑）安装一个脚手架工具 名字叫做vuecli4
等待安装安装完之后
输入vue -V检查vuecli脚手架版本 发现报错
输入set-ExecutionPolicy RemoteSigned再根据提示输入大写的Y回车
