Vue新手必看：第七章，项目环境设置与单文件组件的使用教程

最编程 2024-02-01 10:43:37

...

第七章：项目环境配置及单文件组件 vue脚手架

回顾：

组件之间的通信

父传子：正向传递 vue允许自动触发

props

1.先在子组件中定义期待的属性名和类型

2.在父组件中调用子组件的位置添加 v-bind:自定义属性名

注意：props只读属性 ====》data(){ 属性 }

子传父：逆向传递 vue允许主动触发

自定义事件 click blur focus… 监听自定义事件触发的函数

1.在子组件中定义函数 ===》 this.$emit( ‘自定义事件名’ ，传递的参数 );

2.在父组件中调用子组件的位置 < son @自定义事件名= ‘fn()’>< /son> 添加一个绑定一个自定义事件

fn(val)函数中 val就是传递来的参数

xxx.vue === 》组件

本章任务：

使用@vue/cli快速搭建项目

目前学习的是vue2.x 脚手架工具 @vue/cli 4.x vue-cli@2
后期学习vue3.x 脚手架工具可以是@vue/cli 4.x 也可以是新推出的 vite

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack

制作多彩照片墙效果

本章目标

掌握项目环境配置方法
能够灵活掌握单文件组件的使用方法
掌握单文件组件中父子组件的通信

一、vue-cli简介

1.1 什么是vue-cli

官网文档：https://cli.vuejs.org/zh/guide/

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，简化了我们创建webpack-vue项目的过程。

提供：

通过@vue/cli 实现的交互式的项目脚手架。
通过@vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (

@vue/cli-service

)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

1.2 为什么要用vue-cli创建项目

使用Vue.js开发大型应用时，有很多工作是繁琐而且重复的，业务逻辑复杂，对前端工程化又有要求，想要便捷高效开发项目

代码的目录结构整理
项目构建和部署
热加载
代码的单元测试等

在Vue.js生态中我们可以使用vue-cli脚手架工具来快速构建项目

1.3 基于vue-cli创建项目

安装 node.js 、 npm 、 cnpm

安装@vue/cli — 手册

安装命令：npm install -g @vue/cli
检查命令：vue --version

Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_03

Vue第七章：项目环境配置及单文件组件 vue脚手_javascript_04

创建项目命令：vue create 项目名注意项目名不能出现大写字母！！！ 如果项目名带有大写字母，会出现如下错误提示。

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_05

选择预设项

Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_06

按上下键调整：选择第三个 Manually select features 手动选择自定义预设

手动选择
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) //选择将来项目中用到的依赖空格：选择 a：全选 i：反选

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_07

选择完毕按下 enter键

选择2.x 的vue版本

Vue第七章：项目环境配置及单文件组件 vue脚手_vuex_08

是否使用历史的路由版本选择 n

Vue第七章：项目环境配置及单文件组件 vue脚手_vuex_09

css预处理器选择less

Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_10

选择配置信息所处的位置

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_11

Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_12
Vue第七章：项目环境配置及单文件组件 vue脚手_javascript_13

项目创建过程中。。。。我的心在等待。。。

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_14

显示这样的页面，表示项目创建成功；

项目目录解析：

Vue第七章：项目环境配置及单文件组件 vue脚手_javascript_15

按照上边提示分别输入命令，表示运行创建好的项目。

Vue第七章：项目环境配置及单文件组件 vue脚手_vuex_16

浏览器输入路径：访问该项目。出现如下页面

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_17

1.4 练习：构建项目

二、单文件组件 xxx.vue

2.1 为什么要使用单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

全局定义 (Global definitions)强制要求每个 component 中的命名不得重复
字符串模板 (String templates)缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的\
不支持 CSS (No CSS support)意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step)限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为解决上述问题提供了方法

2.2 单文件组件的定义

在components文件夹下新建文件扩展名为 MyCom.vue的文件，文件包含以下内容：

//单文件组件的定义
/*
    其中包含 css ,js , html模板内容
 */
<template>
  <div>
      <h1>我是第一个组件中的数据</h1>
  </div>
</template>

//组件的js
<script>
export default {
    props: {

    },
    data () {
        return {

        }
    },
    methods: {

    },
    computed: {

    }
}
</script>
//组件的css样式
<style lang="less" scoped>
    h1{
        background-color: red;
        color: blue;
        font-size: 200px;
    }
</style>

注意：scoped属性表示该样式只在当前组件中生效。

修改main.js中内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入自定义的aaa.vue组件
import aaa from './components/aaa'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(aaa)//使用aaa.vue组件
}).$mount('#app')

打开浏览器，运行观察效果：

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_18

单文件组件的特点

完整语法高亮
模块化处理

template中书写HTML结构
script中书写组件的配置项

组件作用域的 CSS 【scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域】

2.2.1 分析vue项目默认启动后打开的页面是怎么打开的？（执行流程）

通过main.js把App.vue中的内容渲染到html页面上！

Vue第七章：项目环境配置及单文件组件 vue脚手_vue3_19

2.2.2 main.js中的render函数理解

render 函数：此处为什么要使用render函数来进行页面的渲染，为什么不直接使用template模板引入呢？

**因为：**通过 import Vue from 'vue'引入的是精简版的vue.js 并不是完整版的vue.js 完整版的vue.js包含核心代码和模板解析器，最终项目上线时，模板解析器其实是不需要的，所以vue会搞精简版的vue.js供用户使用。如果直接使用template模板引入，这个精简版的vue.js是无法对模板进行解析的，但是可以通过提供的render函数进行解析。

相当于：

new Vue({
  template:`<h1>你好哈哈哈</h1>`
}) 等同于代码

//render函数要有返回值
new Vue({
  render:function(createElement){ return createElement('h1','你好哈哈哈')}
  就等同于代码
  render:createElement=>createElement('h1','你好哈哈哈')
  就等同于代码
  render:h=>h(App) 直接渲染根组件
})

$mount()方法的作用等同于 el:""绑定区域。

2.2.3 cli脚手架构建项目的webpack的配置相关：

vue脚手架隐藏了所有的webpack相关配置，如果想查看具体的配置可以执行 vue inspect > output.js 这样会在目录下生成一个文件output.js 里边包含所有的配置信息。

如果想做自定义的配置请参考vue官网vue-cli官方文档：
Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_20

**练习案例：**自定义组件显示到首页。

2.2.4 vue-cli项目中定义全局组件：

在main.js中通过Vue.component()方法注册全局组件。

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_21

Vue.config.productionTip = false 这行代码是在服务启动成功后会在浏览器的控制台有一个提示代码。

如果值为false 不显示如下红框中代码如果为true就显示如下代码。

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_22

2.3 单文件组件中script 标签理解

不使用.vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vue 项目
在.vue文件中，export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象
需要注意data 的书写方式不同，在 .vue 组件中data 必须是一个函数，它return返回一个对象，这个返回的对象的数据，供组件实现

2.4 单文件组件使用-案例

页面中有一个input输入框，当进行输入的时候，输入框下面的内容会进行大写的同步显示
当输入完成后，按enter键就会弹出输入的内容

Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_23

2.5 父组件传值子组件

传值仍然通过props来实现
实现步骤

在父组件中导入子组件
在父组件的components中注册
在模板中进行调用
通过v-bind指令把值传递到子组件中
子组件通过props进行接收

Vue第七章：项目环境配置及单文件组件 vue脚手_webpack_24

2.6 子组件传值父组件

实现步骤

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

Vue第七章：项目环境配置及单文件组件 vue脚手_javascript_25

2.7 不相关组件之间的传递数据

Vue第七章：项目环境配置及单文件组件 vue脚手_javascript_26

eventBus传递数据总线传值
实现步骤：

创建父组件index.vue

<template>
  <div id="max">
      <h1>这里是父组件</h1>
      <!--引入两个子组件-->
      <son1></son1>
      <son2></son2>
  </div>
</template>

<script>
import son1 from '@/components/son1.vue'
import son2 from '@/components/son2.vue'
import Son1 from './son1.vue'
import Son2 from './son2.vue'
export default {
    components: {
        son1,
        son2
    }
}
</script>

<style lang='less' scoped>
    #max{
        width: 800px;
        height: 400px;
        border: 2px solid red;
        text-align: center;
    }
</style>

创建两个子组件son1.vue和son2.vue

#son1.vue 文件
<template>
  <div class="son1">
    <p>这里是子组件1</p>
    <button @click="sendMsg">把son1Data传递给son2组件</button>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'
export default {
    data () {
        return {
            son1Data:'son1组件的数据'
        }
    },
    methods: {
        sendMsg(){
           bus.$emit('send', this.son1Data)
        }
    }
};
</script>

<style lang="less" scoped>
    .son1{
        width: 300px;
        height: 300px;
        border:1px solid blue;
        float: left;
    }
</style>

# son2.vue文件
<template>
  <div class="son1">
    <p>这里是子组件2</p>
    接收到son1组件传递来的数据：{{msg}}
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'
export default {
  data () {
    return {
      msg:''
    }
  },
  created () {
    //$on()方法 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
    bus.$on('send', val=>{
      this.msg = val;
    })
  }
};
</script>

<style lang="less" scoped>
    .son1{
        width: 300px;
        height: 300px;
        border:1px solid green;
        float: right;
    }
</style>

项目中单独创建一个eventBus.js文件

//导入vue实例的构造函数
import Vue from 'vue';
export default new Vue()

把main.js入口文件的主页面改成index.vue 运行页面观察效果

常规传值(子组件A把数据传递给父组件，父组件在把数据传递给子组件B)
参考父子组件子父组件传值，一样。

案例操作—多彩照片墙

需求说明
使用Vue脚手架Vue-cli快速搭建项目
使用父组件向子组件传递图片的地址
在子组件中接收图片地址，使用v-for指令遍历渲染显示图片
Vue第七章：项目环境配置及单文件组件 vue脚手_vuex_28

三、作业：

封装移动端头部和tabber

Vue第七章：项目环境配置及单文件组件 vue脚手_vue.js_29

s
//导入vue实例的构造函数
import Vue from ‘vue’;
export default new Vue()
```

把main.js入口文件的主页面改成index.vue 运行页面观察效果
[外链图片转存中…(img-BCMm1QYe-1655182235125)]

常规传值(子组件A把数据传递给父组件，父组件在把数据传递给子组件B)
参考父子组件子父组件传值，一样。

案例操作—多彩照片墙

需求说明
使用Vue脚手架Vue-cli快速搭建项目
使用父组件向子组件传递图片的地址
在子组件中接收图片地址，使用v-for指令遍历渲染显示图片

三、作业：

封装移动端头部和tabber
多彩照片墙

上一篇：一键生成Vue3 Element-Plus动态表单，轻松提升前端开发效率

下一篇：从零开始学Vue2和3：第21课了解Vue3、用create-vue创建Vue3项目并熟悉核心文件和项目结构

Vue新手必看：第七章，项目环境设置与单文件组件的使用教程

第七章：项目环境配置及单文件组件 vue脚手架

回顾：

本章任务：

本章目标

一、vue-cli简介

1.1 什么是vue-cli

CLI

1.2 为什么要用vue-cli创建项目

1.3 基于vue-cli创建项目

​​安装@vue/cli — 手册​​

1.4 练习：构建项目

二、单文件组件 xxx.vue

2.1 为什么要使用单文件组件

2.2 单文件组件的定义

2.2.1 分析vue项目默认启动后打开的页面是怎么打开的？（执行流程）

2.2.2 main.js中的render函数理解

2.2.3 cli脚手架构建项目的webpack的配置相关：

2.2.4 vue-cli项目中定义全局组件：

2.3 单文件组件中script 标签理解

2.4 单文件组件使用-案例

2.5 父组件传值子组件

2.6 子组件传值父组件

2.7 不相关组件之间的传递数据

案例操作—多彩照片墙

三、作业：

案例操作—多彩照片墙

三、作业：

Vue新手必看：第七章，项目环境设置与单文件组件的使用教程

安装@vue/cli — 手册