Vuejs脚手架

一、Vuejs脚手架介绍

1、什么是vue-cli脚手架

        本质：一套文件结构

        修改镜像：npm config set registry

        https://registry.npm.taobao.org/

2、安装下载

        1)、安装

npm install -g @vue/cli

        2)、创建项目

vue create 项目名

注：项目名不能包含大写字母

文件结构：

        public（静态的，不会编译）

                index.html

        src（会编译）

                assets：放资源文件（css、js、less、图片）

                components：组件文件夹

                view：页面级组件

                api：接口

                App.vue：根组件

                main.js：入口文件

        package.json

        node_modules

二、Vuejs组件

1、Vuejs组件树

        组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

2、创建Vuejs组件

<template>
    <div>
    </div>
</template>
注：只能有一个根元素

<script>
    export default{
        name:"",
        data(){
            return{
                message:""
            }
        }
    }
</script>

<style>
</style>

3、使用组件

        1)、导入组件

import 名称2 from 地址

        2)、注册组件

               全局注册

Vue.component()

               局部注册

components:{
    名称:名称2
}

        3)、使用组件

<名称/>

为什么组件中的data要写一个function？

        参考：https://blog.youkuaiyun.com/adley_app/article/details/95939885

4、组件的传值（重点）

        组件传值：父子关系

        属性向下流，事件向上走

        父传子：props属性

        https://cn.vuejs.org/v2/guide/components-props.html
        https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

        子传父：事件

        1、父组件中：给子组件添加事件，以及事件处理程序

        2、子组件中：使用this.$emit触发事件，以及传值

        参考：https://www.cnblogs.com/fundebug/p/10884896.html

三、slot插槽

        参考：http://bugshouji.com/bbs-read-run?tid=333

        单个slot：子组件标签之间的内容全部放到slot标签的位置

        具名slot：

                子组件给slot标签分别添加name属性

                父组件给分发的标签添加slot属性

        分发内容的作用域：在哪里写的DOM元素，就在哪里去定义事件

        当没有分发内容时的提示：slot标签里的内容将在没有分发内容时显示