1. 在文件路径 输入 cmd
2. vue-init webpack 文件纯英文小写名称 回车
3. 4个回车 y n n n v
4. cd 文件名（输入文件首字“v母按teb键，自动切换以”v"开头的）
5. npm install 下载以依赖，自动检索目录package.json，
6. npm run dev 启动一个项目
   

构建项目的文件夹 里面的文件都是配置当前项目构建的一些信息 ；例如：热更新，项目实时更新

做项目配置的文件夹 比如 启动的地址 不要localhost 端口8080改成其他，都可以在这里面改

就是我们cnpm/npm install 下载的所有模块

这个就是我们今后写代码主要的文件夹
src文件夹里面的东西:

静态资源文件夹:音频 视频 图片等一些静态资源，和打包有关。

存放所有 组件 .vue 文件的文件夹

存放路由配置的文件夹

是默认自带的 入口欢迎页的组件

vue程序的入口文件 vue项目从这里开始加载

一个存放静态文件资源的文件夹 (打包时 并不会一起打包的文件夹)
比如: html css js文件（不算静态文件） 都可以存放到这

单页面应用 一个唯一的html， 欢迎页的文件；
main.js是程序入口，由main.js去加载index.html,index.html是辅助。

所有依赖的记录的配置文件

默认从main.js开始加载，然后把当前的组件都承载到index.html里，index.html里只有一个div#app(一片html代码)，从main.js程序进入，el挂载到"#app"上面，router,路由，components:{App}组件，App是当前vue的局部组件，App局部组件不是在main.js文件的components{}中 new的， App是一个对象，是通过 import 对象 from component文件路径 引入的。

1. import语句
   import语句时es6推出的 可以让一个js文件去直接引入另一个js文件;
   我们以前要想两个js相互关联 就必须在html中 通过 script:src同时引入两个js 这样关联;
   现在 在我们vue中 直接通过 import 对象 from "js文件路径";
   就可以引入其他的js文件 但是 前提 是 那个js文件 必须 export default {}对象 这样导出对外暴露;

import Vue form 'vue' 引入当前vue模块，引入进来的是一个构造函数，对应的Vue模块肯定有这么一句话 export default function (){}，那么"vue’这个路径在哪？ import Vue form 'vue' 没有./开头的就是默认去 node_modulnoes文件夹 里面找对应模块。如果 node_modulnoes文件夹 里面没找到就报错
import route form './router' ./默认打开当前文件夹下面的文件夹，没有文件后缀名默认打开文件夹中的index.js文件

2. import 引入的路径是一个文件没有后缀名
   默认找.js 或者 .vue 文件 例如： import Vue form './App'
3. 如果引入的是个文件夹，默认去找这个文件的index.js 或者index.vue;

如果Vue没有定义template属性 那么按照el挂载的目标样式去加载
如果Vue定义了template属性 那么会把挂载目标本身全部替换成template模板页面

如果不是欢迎页的组件那么就要创建到components文件夹里面(潜规则)
.vue组件文件的文件名最好是大驼峰(潜规则)

template标签 负责定义当前组件的 页面模板
script标签 负责定义当前组件的事件和数据 export default { data(){}, methods:{}}
style标签 负责定义当前组件的样式

new Vue({
  el: '#app',
  /*template:"<h1>我是vue自己的template属性</h1>"
  data:{msg:"我是vue数据"}
  components:{
    App:{
      template:"<h1>我是aaa局部组件</h1>"
    }
  },
  template:"<App/>"*/
//  原来渲染组件的方式
  components:{
    /*Hello:{} 这个大括号就是组件对象
     但是现在我们的组件是在vue文件里面定义的
     而且这个组件对象通过 import语句引入进来了
     所以只需要把Hello:{} 后面的这个大括号换成 import引入进来的那个组件对象即可
     Hello:{}*/
     
   /*键表示组件标签名  值是组件对象 原来是大括号新创建的
    现在是 通过 import语句引入的
    Hello:Hello*/
    
    //es6新写法 如果括号对象的属性名和属性值一模一样 则写一份即可
    Hello,Demo
  }
})

组件的.vue文件编写成功后需要在其他地方通过 import语句引入进行加载
import 组件对象名 from "组件的路径/文件名.vue"
后缀名.vue可以省略不写 如果是./开头 当前文件所在的文件夹出发

组件的template标签里面 最外层必须是一个单独的标签 不能是直接的两个或者两个以上标签，也就是说 至少有一个标签是作为父元素的。

什么是子组件? 就是在当前组件下面再定义引入其他组件
那么当前引入的组件就是子组件 当前组件就是父组件

在当前父组件的script标签第一行 通过 import语句引入子组件对象
在当前 组件 的 export default{}里面定义 components属性
然后在 components属性里面注册子组件

子组件还可以继续引入子组件，一个父组件可以有多个子组件
当前组件如果是被另一个组件引入 并使用了 那么当前组件就是那个组件子组件

就是组件可以进行动态的切换更改,需要使用 component标签

<component is="组件的标签名"></component>

标签名是哪个组件 最后就渲染哪个组件

// main.js
import Vue from 'vue'
import Hello from "./Hello"

new Vue({
  el: '#app',
  components: {Hello},
  template:"<Hello/>"
})

// Hello.vue
<template>
  <div>
  <ul class="nav">
      <li @click="show('Home')">首页</li><li @click="show('Detail')">详情页</li><li @click="show('User')">个人中心</li>
    </ul>

    <div id="content">
      <component :is="componentName"></component>
    </div>
    
  </div>
</template>

<script>
  import Detail from "./components/Detail";
  import Home from "./components/Home";
  import User from "./components/User";
    export default {
      components:{Detail,Home,User},
      data(){
        return {componentName:"Home"}
      },
      methods:{
        show(item){this.componentName=item;}
      }
    }
</script>

<style>
  ul.nav{list-style: none;width: 600px;margin: 50px auto;height: 50px;}
  ul.nav>li{float: left;width: 150px;text-align: center;height: 50px;line-height: 50px;background-color: hotpink;cursor: pointer;color: white;margin:0 20px;}
  #content{width: 600px;margin: 0 auto;}
</style>

//Detail.vue
<template>
  <div id="detail">
    <h1>我是详情页的内容</h1>
    <ul>
      <li>详情页内容1</li><li>详情页内容2</li><li>详情页内容3</li>
    </ul>
  </div>
</template>

<script>
    export default {name: "Detail"}
</script>
<style scoped></style>

// Home.vue
<template>
  <div id="home">
      <h1>我是首页的内容</h1>
    <ul>
      <li>首页内容1</li><li>首页内容2</li><li>首页内容3</li>
    </ul>
  </div>
</template>

<script>
    export default {name: "Home"}
</script>
<style scoped></style>

// User.vue
<template>
  <div id="user">
    <h1>我是个人中心页的内容</h1>
    <ul>
      <li>个人中心页内容1</li><li>个人中心页内容2</li><li>个人中心页内容3</li>
    </ul>
  </div>
</template>

<script>
    export default {name: "User"}
</script><style scoped>
</style>

我们使用组件标签时 如果组件标签里面写了其他内容
最后渲染出来以后 该内容并不存在
也就是组件在渲染时 默认会把 组件标签里面的内容覆盖掉 无法渲染
那么如果我们要是想保留这个内容呢?

需要用到slot插槽标签
在当前组件的template里面 定义 slot标签
那么以后有人使用当前组件标签时 如果标签内部写了内容
渲染完以后 自动把这个内容放到我们定义slot标签的那个位置
这就是slot插槽

slot还可以保留指定内容
slot标签定义name属性 指定一个名字
外部传入内容时 在标签上面定义 slto=“这个名字”
那么定义 slot="这个名字" 的标签就会被保留下来
其他内容就不会被保留

//Hello.vue
<template>
  <div id="hello">
    <h1>我是Hello组件</h1>
    <Child>
 <!--   <span slot="myleft">哈哈</span>
    <span slot="myright">嘿嘿</span> -->
      <span slot="title">我是对话框标题</span>
      <div slot="myleft">左边</div>
      <div id="box" slot="myright"></div>
    </Child>
  </div>
</template>

<script>
  import Child from "./components/Child";
    export default {
      name: "Hello",
      components:{Child,}
    }
</script>
<style scoped>
  #box{width: 100px;height: 100px;background-color: hotpink;}
</style>

//Child.vue
<template>
  <div id="child">
    <p>
      <slot name="title"></slot>
    </p>
    <h2>我是child组件</h2>
<!--<slot></slot>-->
    <div class="left">
      <slot name="myleft"></slot>
    </div>
    <div class="right">
      <slot name="myright"></slot>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Child"
    }
</script>

<style >
  #child{
    height: 200px;width: 400px;border: 1px solid #e4393c;background-color: #fff;
  }
  .left{float: left;}
  .right{float: right;}
</style>

1. 在父组件的模板里面找到子组件标签
2. 在子组件标签上面通过v-bind指令随便绑定一个属性名
3. 属性值就是当前要传给子组件的数据的那个变量
4. 子组件有两种接收方式:

子组件有接收方式 第一种:
在子组件的 export default {}里面通过pros属性来接收

格式:
props:["子组件标签绑定的那个自定义属性名","如果父组件传入多个就写多个元素"]
这个props数组里面接收的字符串元素 就是父组件传过来的变量数据
直接当做当前子组件data的一个变量使用即可

子组件有接收方式 第二种:
在子组件的 export default {}里面通过pros属性来接收

格式:
props:{
  那个绑定的属性名: 这个属性值的类型名(类型名必须是大写的 并且类型不能乱写)
  那个绑定的属性名1: 这个属性值的类型名(类型名必须是大写的 并且类型不能乱写)
}

父组件给子组件传参是单向数据绑定还是双向数据绑定?
单向数据绑定， 父组件数据发生改变时 会再次传给子组件，
子组件也能接受到新数据响应，但是子组件把传过来的数据更改时 直接报错。父组件也不会响应!!!

//Parent.vue 相当于父组件
<template>
 <div id="parent">
   <h1>我是父组件的标题-----{{parent_msg}}----{{parent_num}}</h1>
   <ul>
     <li>父组件列表1</li><li>父组件列表2</li><li>父组件列表3</li>
   </ul>
   <input type="text" v-model="parent_msg">
   <Child :parentData="parent_msg" :parentData1="parent_num"></Child>
 </div>
</template>

<script>
  import Child from "./Child";
    export default {
        components:{Child,},
        data(){
          return {
            parent_msg:"我是父组件数据",
            parent_num:15
          }
        }
    }
</script>

<style scoped>
  #parent{border: 1px solid #e4393c;}
</style>

//Child.vue 相当于子组件
<template>
  <div id="child">
    <h2>我是子组件标题----{{child_msg}}</h2>
    <h2>我来渲染父组件数据-----{{parentData}}---{{parentData1}}</h2>
    <ol>
      <li>我是子组件列表1</li><li>我是子组件列表2</li><li>我是子组件列表3</li>
    </ol>
    <input type="text" v-model="parentData">
  </div>

</template>

<script>
  export default {
    // props:["parentData","parentData1"],
    props:{
      parentData:String,
      parentData1:Number
    },
     data(){
       return{child_msg:"我是子组件数据"}
     },
    mounted(){}
  }
</script>

<style scoped>
  #child{border: 1px solid blue;}
</style>

//main.js
import Vue from 'vue'
import Hello from "./Hello";
new Vue({
  el: '#app',
  components:{
    Hello,
  },
  template:"<Hello/>"
})

//Hellow.vue
<template>
  <div id="hello">
    <h1>我是默认首页</h1>
    <parent></parent>
  </div>
</template>
<script>
  import Parent from "./components/Parent";
  export default {
    components:{Parent,}
  }
</script>
<style scoped></style>

• 在父组件模板中找到子组件标签，通过v-bind指令（:属性名(自定义)=“属性值(要传给子组件的变量名)”）；
  
• 把属性名(自定义)在子组件里通过props注册一下，props：数组，里边写双引号，必须是字符串，注册完之后这个属性名(自定义)就是当前子组件的变量；data中的变量咋用，这个变量就咋用。
  

子组件给父组件传参必须借助一个js事件

1. 在子组件的函数里面调用this.$emit()方法
2. this.$emit("自己随便写一个(自定义)事件名",给父组件传的参数1,参数2...)
3. 在父组件模板中找到子组件标签
4. 在子组件标签上面通过 v-on/@ 绑定这个**$emit第一个参数**的自定义事件名称
5. 父组件中这个自定义事件等于一个驱动函数(名字自己随便取)
6. 该驱动函数在父组件的methods里面定义
7. 父组件这个 函数的参数 就是 $emit方法的第二个参数开始的值，
   $emit()从第二个参数开始传了几个参数 那么这个父组件的驱动函数就定义几个形参接收。

//Child.vue
<template>
  <div id="child">
    <h2 @click="show">我是子组件标题----{{child_msg}}</h2>
    <ol>
      <li>我是子组件列表1</li>