Vue 03 脚手架项目

14 脚手架

1 npm  -v  如果有版本号说明安装成功
2 cnpm -v   

1  npm i @vue/cli -g
2  vue --version   查看版本号   
3  npm i yarn -g
4  vue craete 项目名称

ps 如果获取  vue-demo
1 解压
2 当前目录下  npm i  安装所有依赖 （插件）
3 npm run serve

15 脚手架安装碰见问题

1  This dependency was not found:  使用依赖 但是没有安装    安装依赖

2   This relative module was not found:    路径发生错误    引入的组件路径不对

3  npm ERR! missing script: serve   脚本启动命令不一样

4   error  in ./src/components/Home.vue   文件不存在

5 删除node_modules    再执行  npm i

16 package.json 文件

script : 执行脚本 自定义脚本命令

"scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "abc": "json-server ./data/db.json --port 8089  --watch"
  },

依赖

"dependencies": {
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "vue": "^2.6.11"
  },

17 组件 .vue构成

<template>
  <div class="box">{{n}}</div>
</template>

<script>
export default {
}
</script>
<style scoped>
div {
  background: red;
}
</style>

18 导出和导入

module.exports --------------> require("")

export default -------------- import from

export const user import {user} from ""

19 组件通信 （传参）

1 组件通信父传子

 <Content :list="music[idx].content" :name="值"  自定属性="值"></Content>
  
  Content.vue
  
  {
     props:["list","name",....]
  }

2 子传父

1 $emit("自定义事件",参数)

@自定义事件 = “函数”

函数（参数）

2 利用父传子 直接传递函数 通过函数参数

3 this.$parent 直接可以获取父组件方法和数据

this.$parent属性 子组件里面获取

4 this.$children 获取子组件的集合

父组件里面使用 this.$children 获取的集合与 组件先后顺序有关系

5 ref 给组件或者元素 添加ref属性 可以通过 this.$refs.属性 来获取 组件或者真实dom

  <Search :onAddList="addTodos" ref="search"></Search>
  <h1 ref="h1">我是标题</h1>
  <input type="text" ref="ipt" />
  
  使用的时候 
  this.$refs.属性

6 非父子非兄弟之间通信

eventBus 事件公交 事件总线 $emit()

需要用到一个实例 var eventBus = new Vue() 快递

eventBus.$emit(“事件”,参数) eventBus.$on("事件"，(data) => {})

7 插槽

1 普通插槽

1） 需要在组件间内部 通过<slot></slot> 占位

2 具名插槽

 <About>
      <ul slot="a">
        <li v-for="(item,i) in list" :key="i">{{item}}</li>
      </ul>
      <ol slot="b">
        <li>aaaaa</li>
        <li>bbbbbb</li>
      </ol>
    </About>
    
   组件内部
    <slot name="b"></slot>about
    <slot name="a"></slot>

3 作用域插槽 使用组件自己的数据

 <About>
     <template slot-scope="{str,list}">
         <div>
         <h1>{{str}}</h1>
         <ul>
         <li v-for="(item,i) in list" :key="i">{{item}}</li>
         </ul>
         </div>
     </template>
 </About>
    
  组件内部
   <slot :str="str" :list="list"></slot>

8 this.$root

​ 获取根实例 new Vue({data数据})

9 混入 mixin 把两个组件混入到一起

创建一个  组件  混入到另个一个组件里面
const user = {
  methods: {
    abc() {
      alert(123)
    }
  },
  mounted() {
    console.log("user")
  },
  data() {
    return {
      username: "aaaa",
      password: '123456'
    }
  }
}
两一个组件里面
export default {
  mixins:[user,aa,....]
}

10 Vue.prototype

可以直接在 Vue.prototype[属性或者方法] = [属性和方法]

在组件里面 直接通过 this.属性或方法使用