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回车
然后在点击任务栏的输入框右击选择命令窗口，选择以管理员身份运行
找到你的项目路径，复制在命令行窗口中输入cd 加上你的路径
输入vue -V检查一下脚手夹版本发现以下图片 表示ok
输入vue create 项目名称，
可以按下键盘的上下按键进行选择
也可以按ctrl+c 结束命令
咱们选择vue2（默认vue2）直接按回车
出现以下内容表示安装成功：
启动项目
输入cd 项目名称 打开项目所在的文件夹
进来之后输入npm run serve 启动项目
在浏览器中输入以上的地址就可以操作成功
需要你在下面有package.json的目录下打开命令窗口输入npm run serve 启动项目，不能在别的目录下
npm run serve 就是通过上面的命令启动的
通过npm run build把写好的代码文件打包，会生成一个dist文件，dist文件的内容就是html 和 js 还有css，我们之前开发使用前端工程化，最后项目上线还是打包压缩成html js和css，
最后再把dist里面的文件放到服务器的根路径下，启动服务器，就可以在本地跑起来了，如果是线上的服务器，那么就代表前端发布成功了。
