一 . 启动并运行项目

a. 通过cmd命令
 cd /myvue进入项目目录
 npm run serve
b. 通过VScode/HB等
 Ctrl+" ` "
 npm run serve

二 . 组件创建和使用

创建组件 3要素：

1. <template>有且只能有一个根div </template>
2. <script></script>
3. <style></style>

使用组件 3步骤

1. 导入组件
   import Header from './components/Header.vue' (.vue可省略)
2. 注册组件
   components:{Header}
3. 使用组件
   <header></header>

<template>
  <div id="app">  
      <!-- 03 使用组件 -->
      <Header></Header>  
  </div>  
</template>
<script>
// 01 导入组件
import Header from './components/Header.vue'
export default {
// 02 注册组件
  components:{Header,Nav,Swiper},
</script>
<style>
</style>

四、组件的参数传递

1. App.vue属性传参 <Nav :navList="navList">
2. Nav.vue props:["navList"]

<template>
  <div id="app">  
      <!-- 03 使用组件 -->
      <Header></Header>
      <Nav :navList="navList"></Nav>      
  </div>
</template>
<script>
// 01 导入组件
import Nav from './components/Nav.vue'
export default {
// 02 注册组件
  components:{Nav},
  data(){
    return {
      navList:[
        {name:"推荐"},
        {name:"手机"},
        {name:"智能"},
        {name:"电视"},
        {name:"笔记本"},
        {name:"家电"},
        {name:"生活周边"},
      ]   
   }}
}
</script>

<template> 
    <div class="btn" v-for="(item,index) in navList" :key="index">
         {{item.name}}
    </div>
</template>
<script>
export default {
    props:["navList"],
}
</script>

五、 样式隔离

<style scoped>

六、vue中获取dom元素

   templte 定义ref  <div ref="scroll">
   script    this.$refs.scroll 

七、 vue 内置参数

    data(）{return {}} 数据
    methos（） 方法
    props:[]  属性（父传递过来参数）

八 . 生命周期钩子函数

生命周期钩子函数作用
比如我进入组件要发起ajax？
组件渲染好了我要调用dom操作？
进入组件要加入定时器？
离开组件要销毁定时器？
要知道组件视图发生改变？

创建 渲染 更新 销毁 前后8个
beforeCreate 创建前
created 创建完成（可以使用this）
beforeMount 渲染前
mounted 渲染后（可以操作dom）
beforeUpdate 更新前（执行多次）
updated 更新后（执行多次）
beforeDestroy 销毁前
destroyed 销毁后

9. nav选项卡组件

<template>
    <div class="nav-wrap">
        <div class="nav" ref="scroll">
            <div 
            :class="{'active':index==current}"
            @click="selected($event,index)"
            v-for="(item,index) in navList"
            :key="index"
            class="nav-item">
                {{item.name}}
            </div>
        </div>
        <div class="nav-toggle"
        :class="{'up':showLay==true}"
         @click="showLay=!showLay">
            >
        </div>
        <div class="nav-lay" v-if="showLay">
            <div class="nav-title">标题</div>
            <div class="nav-buttons">
                <div class="btn" 
                @click="btnclick(index)"
                :class="{'active':index==current}"
                v-for="(item,index) in navList"
                :key="index"
                >{{item.name}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:["navList"],
    methods:{
        btnclick(index){
           this.showLay=false;
        //  隐藏弹出菜单按钮
           this.current=index;
        //  设置当前选中current
           let items = document.querySelectorAll(".nav-item");
        // 获取到所有的.nav-item
           this.selected({target:items[index]},index);
        // 执行selected 方法({target:和index对应的nav-item},index);
        //  执行selected函数传两个参数 
        // 第一个参数是个对象 对象里面有个target属性 属性值是一个dom节点(.nav-item 对应current的dom节点) 
        // 比如我单击的是btns里面的第2个元素 让后我选择到nav-item里面的第2个元素作为target属性值传递过去
        // 第二个参数是index
        },
        selected(e,index){
            this.current = index;
            let ew = e.target.offsetWidth; // 获取当前单击元素宽
            let el = e.target.offsetLeft;// 元素左侧偏移值
            let elem = this.$refs.scroll; // 获取滚动元素； $refs是vue内置的获取元素对象
            let vw = elem.offsetWidth;// 滚动元素整体的宽;
            // console.log(ew,el,vw);
            elem.scrollLeft = el-vw/2+ew/2;
            // 设置滚动元素的左侧滚动距离为=调整单击元素到画面的中心。
            // 单击的元素滚动到最左侧
            // 最左侧-总宽度一半+当前元素宽度一半
        }
    },
    data(){return {
        current:0,// 当前选中的导航
        showLay:false,//是否显示导航弹出内容
    }}
}
</script>
<style  scoped>
/* scoped 让样式只在当前组件中管用 */
.nav-buttons .btn.active{
    background-color:#ffe8d5;
    color:#f30;
}
.nav-buttons .btn{
    width: 20%; height: 30px; line-height: 30px; margin-bottom: 15px; margin-right: 15px; border-radius: 6px; background-color:#fff; border:1px solid #eee; display: inline-block; text-align: center; color:#777; font-size:14px;
}
.nav-lay{
    position: absolute; left:0; top:44px; width: 100%;
}
.nav-title{
    margin-right: 44px; height: 44px; background-color: #f0f0f0; line-height: 44px; padding-left: 15px; margin-top: -44px; }
.nav-buttons{
    padding: 0 15px;
  
    background-color: #f0f0f0;
}
 
.nav-toggle{
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color:#777;
    background-color: #f0f0f0;
    transform: rotate(90deg);
    /* transition:all ease .4s; */
}
.up{
     transform: rotate(-90deg);
}
.nav-wrap{
    width: 100%;
    height: 44px;
    display: flex;
    position: relative;
    z-index: 10000;
    background-color: #f0f0f0;
}
.nav{
    flex:1;
    line-height: 44px;
    background-color: #f0f0f0;
    overflow-x:auto;
    /* 水平滚动自动 */
    white-space: nowrap;
    /* 行内元素不换行 */
    scroll-behavior: smooth; 
      /* 滚动平滑 */
  -webkit-overflow-scrolling: touch;
 
  
}
.nav-item{
    display: inline-block;
    /* 转换位行内块 */
    vertical-align: middle;
    /* 垂直居中对齐 */
    padding: 0 15px;
    /* 设置间距 */
    color:#484848;
    /* 设置颜色 */
}
::-webkit-scrollbar{
    display: none;
}
/* 隐藏滚动条 */

.active{color:#f30;}
</style>

引入外部插件组件的一般方法

swiper为例子

1. 工作目录 cmd安装

myvue> npm install swiper -S

2. 使用的组件里面 导入

import Swiper from 'swiper'
import "swiper/css/swiper.css"

如果引入的目录没有./ ../等相对目录，那么就会从 node_module查找需要引用的内容

3. 样式

import ‘xxx/swiper.js’

4. dom 结构
   .swiper-contianer
   --- .swiper.wrappr
   --- --- .swiper-slide
   5. 初始化swiper
      new Swiper(‘.swiper-container’)

swiper组件是要操作dom的，我就应该在组件生命周期
mounted 完毕 取执行 初始化 swiper

10. swiper组件

<template>
    <div class="swiper-container" v-if="gallery.length">
        <!-- 只有gallery有长度时候才显示swiper -->
        <div class="swiper-wrapper">
            <div class="swiper-slide" 
            v-for="(item,index) in gallery"
            :key="index">
                <img :src="item.url" alt="" width="100%">
            </div>
            
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css"
// 导入node_modules里面的 swiper文件夹 Swiper类
// 导入node_modules里面的 swiper/css/文件夹里面的swiper.css
export default {
    props:["gallery"],
    mounted(){
        // 当页面初始渲染完毕执行
        this.swiper = new Swiper(".swiper-container",{
            loop:true,//自动让最后一张的下一张是第一张
            pagination:{
                el:'.swiper-pagination'//小点指示器
            }
        });
    }
}
</script>
<style>
    .swiper-container{
        height: 200px;
        width: 100%;
    }
    /* 设置幻灯片高与宽 */
    /* 修改小点高亮颜色 */
    .swiper-pagination-bullet-active{
        background-color: #f30;
    }
</style>