Vue脚手架组件基本使用插槽ref

1、脚手架

脚手架：是一种快捷构建的工具，是Vue技术生态链中的一部分

官方网站：https://cli.vuejs.org/zh/

（1） 什么是脚手架

Vue CLI 是一个基于 Vue.js 框架，执行快捷项目构建的工具插件，提供：

• 通过@vue/cli 实现的交互式的项目脚手架。
  • 解释：开发人员可以在创建项目时，按照我们的需要进行技术选择
• 通过@vue/cli +@vue/cli-service-global 实现的零配置原型开发。
  • 解释：使用脚手架搭建的项目，可以选择配置统一存储，实现零配置文件开发
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 解释：脚手架一直在实时更新，保障使用的技术紧跟市场需求
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
  • 解释：脚手架除了命令行构建项目(必须掌握)之外，同时提供了界面化创建项目模式

（2） 安装脚手架

官方目前共提供了两种脚手架模块

1、vue-cli：适用于vue1.x、vue2.x项目构建

2、@vue/cli 4.x：适用于vue2.x、vue3.x项目构建

3、@vue/cli 5.x：更加侧重于vue3.x项目构建
检查脚手架版本

$ npm view @vue/cli versions

安装指定版本的脚手架：

$ npm install @vue/cli@4 -g

（3） 创建项目

① 了解：通过图形化界面创建项目

打开命令行窗口，执行命令启动vue图形化界面

$ vue ui

启动成功后，浏览器访问http://localhost:8000，可以看到项目管理图形化界面

打开命令行，执行命令创建项目，主要用于创建vue2.x版本的项目

$ vue init webpack 项目名称

③ 掌握：通过命令创建vue2/3版本项目

打开命令行，执行命令创建项目

$ vue create 项目名称

命令执行后，选择Vue版本

远程下载和编译项目插件：

项目创建成功后的提示：

（4） 工程目录

① 项目目录结构

|-- app01/					项目文件夹
	|-- node_modules/				node应用中存储本地依赖文件
	|-- public/						脚手架项目网页入口文件夹
		|-- index.html					唯一的网页入口，开发过程中不需要关注
	|-- src/						脚手架项目源代码文件夹
		|-- assets/						存放公共静态文件的目录，如图片、样式、脚本等等
		|-- components/					存放功能组件的目录，如页头、页脚、导航等等
			|-- MyHeader.vue				页头组件
		|-- pages/						存放页面组件的目录，如主页、关于我们、用户中心等等
			|-- Home.vue					主页组件
		|-- App.vue						入口页面组件
		|-- main.js						项目运行入口模块
	|-- package.json				项目配置文件

② sfc 单文件组件

Vue项目中，创建的组件（全局组件、局部组件）默认形式下通过template选项指定的一堆字符串，实际开发中并不友好，没有开发人员会在一个字符串里面编写一个完善的网页

Vue项目提供了一种特殊的组件声明方式：SFC(Singleton File Component)单页面组件，描述了一种以.vue结尾的文件，每个文件就是一个独立的组件的形式

③ spa单页面应用

SPA(Singleton Page Application)：单页面应用程序

是前端应用框架开发的一种特殊的项目，整个项目只包含唯一的一个html网页作为视图；项目运行过程中页面的切换都是在该网页内部进行切换，最大程序的保障了页面数据的复用性，提高了页面加载的效率

（5） 启动和访问

启动项目

$ npm run serve

访问项目：

http://localhost:8080

2、SFC组件基本使用

（1）构建页面组件

创建需要的四个页面组件：src/pages/

• src/pages/Home.vue：主页
• src/pages/List.vue：列表页面
• src/pages/Ucenter.vue：用户中心
• src/pages/About.vue：关于我们

组件页面的内容，只需要编写基本的展示信息即可，以Home.vue为例：

<template>
  <div class="home-container">
    <!-- 必须包含一个唯一的根标签-->
    <h2>系统主页</h2>
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

（2） 动态组件切换

编辑App.vue，入口视图组件，添加导航和动态组件的实现：

<template>
  <div id="app">
    <h2>hello vue!</h2>
      <!--  ③ 动态组件的使用-->
    <component :is="page"></component>
    <ul>
      <li :class="{active: page==='Home'}" 
          @click="page='Home'">首页</li>
      <li :class="{active: page==='List'}"
          @click="page='List'">列表</li>
      <li :class="{active: page==='Ucenter'}"
          @click="page='Ucenter'">用户中心</li>
      <li :class="{active: page==='About'}"
          @click="page='About'">关于我们</li>
    </ul>
  </div>
</template>

<script>
// ① 按照ES6语法，导入4个SFC组件
// 相对路径导入
import Home from './pages/Home'
// 绝对路径导入：@ === '项目路径/src'
import List from '@/pages/List'
import Ucenter from './pages/Ucenter.vue'
import About from './pages/About.vue'

export default {
  name: 'App',
  data() {
    return {
      page: 'Home'
    }
  },
  components: {
      // ② 注册组件
    Home,
    List,
    Ucenter,
    About
  }
}
</script>

<!-- 该样式全局生效：不论写在哪个组件中 -->
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
</style>
<!-- 当前组件生效的样式 -->
<style scoped>
#app {
}
ul{display: flex; width: 100%; justify-content: space-between; list-style:none; position: fixed; left: 0; bottom: 0; border-top: solid 2px #ddd;}
ul li{height: 50px; flex: 1; text-align: center; line-height: 50px;}
ul li:hover{background: orangered; color: white}
ul li.active{background: rgb(205, 60, 8); color:white;}
</style>

3、组件传值

项目开发中经常出现父子组件之间的嵌套关系，同时父子组件或者不同之间之间会出现一些数据传输需求；如编辑品牌数据，需要在弹窗中完成品牌数据的编辑操作；弹窗做为子组件，需要页面组件/父组件将需要编辑的数据传输给子组件进行操作；所以组件之间的数据传递是Vue项目中非常重要的一种操作方式

（1） 父子组件传值

解决方案：自定义属性

操作语法：props选项，自定义属性定义和传递

① 声明一个通过自定义属性接受数据的子组件Child1.vue，需要注意~自定义属性接受并使用父组件传递的数据，但是不能直接修改父组件传递的变量数据，称这种规范为 单向数据流！

<template>
	<div>
        <p>来自父组件的数据：{
  { mfp }}</p>
    </div>
</template>

<script>
export default {
    // 自定义属性，当前组件通过mfp，可以接受来自父组件的数据
    props: ['mfp']
}
</script>

② 父组件Home.vue中，操作子组件

<template>
	<div>
        <!-- 使用子组件 -->
        <Child1 :mfp="msgFromParent"/>
    </div>
</template>
<script>
	// 引入子组件
    import Child1 from './child/Child1.vue'
    
    export default {
        data() {
            return {
                msgFromParent: '父组件数据'
            }
        },
        components: {
            // 注册子组件
            Child1
        }
    }
</script>

（2） 子父组件传值

项目开发中，品牌管理案例弹窗（子组件）中修改了某个品牌数据，应该将修改的数据通知父组件进行同步；子父组件之间的传值，项目场景中使用非常频繁

解决方案：自定义事件

操作语法：vm.$emit(自定义事件, 传递数据)

① 定义一个子组件，可以发送自定义事件，通过事件传递数据：Child1.vue

<template>
	<div>
        <p>当前组件数据：{
  { msgFromChild }}</p>
        <button @click="sendData">发送数据给父组件</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msgFromChild: 'Ch