Vue.js入门 （vue手脚架）

一、什么是vue-cli脚手架

       本质： 一套文件结构

        搭建环境（以webstorm为例）

        1.在控制台进入当前文件夹，运行安装命令，脚手架只需安装一次

        npm install -g @vue/cli

        2.安装完成后，创建自己的工程文件

        自行选择配置选项

        vue create myvue

        3.创建工程文件完毕后，进入工程文件夹

      cd myvue

        4.运行服务

       npm run serve 

         myvue文件夹文件结构如下：

        public（不会编译）
            index.html
        src（会编译）
            assets:放资源文件，css,js,less,图片
            components:组件文件夹
            view：页面级组件
            api：接口文件
            App.vue:根组件
            main.js 入口文件
           
        package.json
        node_modules

二、vue组件

        1、创建组件（组件基本结构）

<template>
	<div>
		//只能有一个根元素
	</div>
</template>
			
			
<script>
export default{
	name:""
	data(){
	return{
		message:""
		}
	}
}
</script>
			
<style></style>

        2、使用组件

            1)导入组件
                import 名称 from 地址
            2)注册组件
                全局：
                    Vue.component()
                局部：
                    components：{

                        名称                     

                        }
            3)使用组件
                <名称/>

三、组件之间的传值

        父子关系
                属性向下流，事件向上走
                父传子：props属性
                子传父：
                    在父组件中，给子组件添加事件，以及事件处理程序
                    在子组件中，使用this.$emit（事件，数据）

四 、slot插槽

       单个slot：子组件标签之间的内容全部放到slot标签的位置
            具名slot：
                子组件在对应的slot标签分别添加name属性
                父组件给分发的标签添加slot属性
            分发内容的作用域：
                在哪里写的dom元素，就在哪里去定义事件
            
            当没有分发内容时的提示
                子组件slot标签的内容

 四、总结

脚手架的使用俭省了代码量，组件的复用大大提高了编程效率