3.Vue脚手架

3.脚手架

3.1.初识

3.1.1.简介

Vue脚手架/Cli(Command Line Interface)是 Vue 官方提供的标准化开发工具（开发平台）。

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

3.1.2.安装

  1. 全局安装@vue/cli(第一次使用时配置即可)

    • npm install -g @vue/cli
#在使用这串命令之前需要下载好nodejs并且完成他的环境配置,安装步骤如下
#1.在nodejs的官网中下载nodejs：https://nodejs.org/en/download/，
#建议选择安装包的LTS版本（长期支持版本），因为这个版本比较稳定和可靠。
#2.安装  Node.js：下载完成后，双击安装包并按照提示进行安装。
#3.打开命令行输入：node  -v，如果显示版本号，则安装成功
#4.配置  Node.js  的环境变量
#（1）右键单击“此电脑”，选择“属性”
#（2）选择“高级系统设置” ==> “环境变量”
#（3）在“系统变量”区域中找到并打开“Path”这一项
#（4）在弹出的窗口中选择“新建”，输入  Node.js  的安装路径，例如：C:\Program  Files\Nodejs
################# Linux 和 Mac 不用配置

    • #在执行 vue 命令时无法出现版本号，解决方法如下
#1.确保正确安装了Vue.js：npm  install  -g  vue
#2.配置环境变量，步骤与上面相同
#3.重启客户端

  2. 切换到要创建项目的目录，如何执行命令

    • vue create xxx #xxx为项目名称
#报错解决方法
#1.输入以下命令来查找npm全局安装路径：npm root -g
#2.配置环境变量，步骤与上面相同
#3.重启客户端

  3. 启动项目

    • #进入到vue所创建的项目打开命令行
#输入命令：
npm run serve
#显示成功就是启动成功，然后打开vue所提供的网址即可成功查看

      image-20230422124237026

报错

  1. 如果报错image-20230422112840977

  2. 则检查npm目录下是否有vue.cmd文件，如果没有

    • #1.配置一个安装路径
#2.执行命令：npm install -g cnpm
#3.全局安装脚手架：npm i npm -g npm i @vue/cli -g，报错继续执行：cnpm i @vue/cli -g
#4.安装完成之后重新打开配置的安装路径就有了
#5.然后将这个文件的路径配置到环境变量中
#6.弄好之后用管理员方式重新打开即可进行创建
	#（1）输入y：表示使用https://registry.npm.taobao.org镜像
	#（2）选择脚手架的版本

3.1.3.结构

  • node_modules
  • public
    • favicon.ico: 页签图标
    • index.html: 主页面
  • src
    • assets: 存放静态资源
      • logo.png
    • component: 存放组件
      • HelloWorld.vue
    • App.vue: 汇总所有组件
    • main.js: 入口文件
  • .gitignore: git 版本管制忽略的配置
  • babel.config.js: babel 的配置文件
  • package.json: 应用包配置文件
  • README.md: 应用描述文件
  • package-lock.json：包版本控制文件

3.1.4.使用

将上一章最后编写的两个vue组件和一个App组件替换脚手架自动生成的文件即可，html和main.js不用换

记得修改路径，还有修改vue组件名字为大驼峰写法

image-20230422132924201

3.2.ref 与 props

3.2.1.ref

作用：给节点打上标识

  1. 用来给元素或子组件注册引用信息 (id的替代者)，
  2. 应用在html标签上获取的是真实DOM元素
  3. 应用在组件标签上是组件实例对象(vc)

使用：在标签内使用：ref='xxx'

读取：this.$refs.xxx

效果图

image-20230422144022608

代码示例

image-20230422144036659

3.2.2.props

作用:让组件接收外部传过来的数据
使用：<标签名 属性名="属性值"></标签名>
读取

  1. props:['对象名1','对象名2'....]

  2. props:{
    对象名1:要限制的类型,
    对象名2:要限制的类型
    .....
}

  3. props:{
    对象名1:{
        type:要限制的类型,
        required:是否为必传
    },
    对象名2:{
        default:默认值
    }
}

效果图

image-20230422174101303

代码示例

|
|
|

student组件 APP组件
image-20230422174138785 image-20230422174159131

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

3.3.混入、插件和scoped

3.3.1.混入

作用：可以把多个组件公用的配置抽离出来配置成一个混入对象

使用：

  1. 定义混入，例

    export const but = {
    // 编写功能
    methods: {
        hello(){
            alert('你好');
        }
    },
}

  2. 使用混入

    • 全局混入：在main.js文件导入文件后，Vue.文件名(引入的对象方法名)，参数例：上面的but
    • 局部混入：在需要混入的组件导入文件后，在vue实例中使用：mixins:[引入的对象方法名]

效果图

image-20230422185619415

代码示例

school组件 student组件
image-20230422185752875 image-20230422185816939
App组件 mixin混入配置文件
image-20230422185843696 image-20230422185857106

3.3.2.插件

作用：可以用于增强Vue

定义：

对象名.install(Vue，参数2,参数3....){
	//全局过滤器
    Vue.filter(...)
	//全局指令
	Vue.directive(...)
    //全局混入
    Vue.mixin(.....)
}

使用：在main.js方法中导入文件然后使用：Vue.use(插件名,参数2,,参数3......)

3.3.3.scoped

作用：可以让样式在只在局部内生效，不会与其他组件冲突

使用：在需要添加的style标签中使用即可，例：<style scoped></style>

注意：在App组件中使用scoped也会只在app组件生效，并不会在全局生效

3.4.ToDoList案例

案例效果

image-20230422203615928

3.4.1.实现静态组件

①案例顶部

image-20230422203643685

②案例中间

List

image-20230422203701073

Item

image-20230422203729694

③案例底部

image-20230422203332236

3.4.2.展示动态数据

为什么要在App组件里面创建todos对象存储数据

因为todos数据list和top组件都要用，但兄弟组件直接无法传输数据（目前而言）

app

image-20230422213506213

list

image-20230422212604054

item

image-20230422205851548

3.4.3.交互

①添加

将用户在输入框输入的字添加到list组件中

需要用到一个ID生成库nanoid ，用管理员运行VSC执行命令：npm i nanoid

使用方式：

  • 在需要用到这个算法的地方导入文件：import {nanoid} from 'nanoid'
  • 然后直接调用即可：nanoid()

效果图

image-20230422214208886

代码示例

app组件 top组件
image-20230422214239272 image-20230423100933883

实现流程：

  1. 在top组件添加键盘事件
  2. 在app组件添加一个添加数据的方法，然后将这个方法传递给top组件，由top组件传递对象回来给app组件
  3. 在top组件接收app组件传递过来的方法
    1. 编写键盘事件执行的方法，将任务包装成一个对象
    2. 然后将对象传递回给app组件

②勾选

修改用户勾选的数据变化

效果图

image-20230422232024464

代码示例

app

image-20230422232207342

list

image-20230422232308463

item

image-20230422232338396

实现流程：

  1. 在item组件添加修改事件，修改事件有一个方法，传的参数是当前修改的任务id
  2. 在app组件中编写修改flag方法，并且将方法传给list组件
  3. 在list组件接收方法，然后传给item组件
  4. 在item组件接收方法，然后编写修改方法
    • 编写修改勾选方法：将当前任务id传给app组件

③删除

  1. 在item组件添加样式

    1. #鼠标悬停在任务时背景改为粉色
li:hover{
    background-color: pink; 
}

    2. #鼠标悬停在任务时删除按钮出现
li:hover button{
display: block;
}

  2. 删除button标签中的style样式

app

image-20230422234737661

list

image-20230422234754115

item

image-20230422234807962

实现流程：

  1. 在item组件添加修改事件，修改事件有一个方法，传的参数是当前删除的任务id
  2. 在app组件中编写删除todo方法，并且将方法传给list组件
  3. 在list组件接收方法，然后传给item组件
  4. 在item组件接收方法，然后编写修改方法
    • 编写删除todo方法：将当前任务id传给app组件

④底部统计

在app组件中将todos数据传给buttom组件

效果图

image-20230423000934229

代码示例

image-20230423001025260

⑤底部交互

如果全部任务都被勾选时，底部的勾选框也勾选

效果图

image-20230423003038628

代码示例

bottom组件 app组件
image-20230423003119409 image-20230423003155831

实现流程：

  1. 判断全部任务是否都被勾选，如果都被勾选时，底部的勾选框也勾选
  2. 在buttom组件添加点击两个事件，两个事件的方法很简单，只是调用app组件的方法
    1. 一个为是否勾选全部任务，参数是当前的flag
    2. 一个为清除全部已完成的任务，不用传参
  3. 在app组件中编写两个方法，并且将方法传给Butoom组件
    1. 一个方法为接收Buttom组件传递过来的flag，然后将修改全部flag
    2. 一个方法为删除所有任务
  4. 将两个方法都传给buttom组件使用即可

3.4.4.总结

1.组件化编码流程

  1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
  2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:
    1. 一个组件在用：放在组件自身即可
    2. 一些组件在用：放在他们共同的父组件上(状态提升)
  3. 实现交互：从绑定事件开始

2.props适用于

  1. 父组件 ==> 子组件通信
  2. 子组件 ==> 父组件通信(要求父先给子一个函数)

3.使用v-model时：v-model绑定的值不能是props传过来的值，因为props是不可以修改的!!!

4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

3.4.5案例优化

这个章节后面优化的东西会在这里进行修改

①存储

将用户输入的信息保存到本地存储并且展示出来

app

image-20230423101138952

②自定义事件

app

image-20230423154048190

top

image-20230423122354809

buttom

image-20230423122300424

③全局事件总线

让app组件和item组件传输数据不用经过list组件

main.js

image-20230423132147597

list

image-20230423131645147

app

image-20230423162419204

④编辑

添加一个编辑功能

样式代码如下(写在App组件中)：

.btn-edit {
    color: #fff;
    background-color: skyblue;
    border: 1px solid blue;
    margin-right: 5px;
}

app

image-20230423172747666

item

image-20230423173934732

$nextTick

作用：在下一次DOM更新结束后执行其指定的回调

语法：this.$nextTick(回调函数)
什么时候用:：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

3.5.自定义事件

代码示例：按住ctrl键单击

作用：一种组件间通信的方式，适用于：子组件 => 父组件

使用场景：子组件想给父组件传数据，那么就要在父组件中给子组件绑定自定义事件(事件的回调在子组件中)

绑定自定义事件

  1. 在父组件中： <Demo @自定义事件名称="xxx"/> 或 <Demo v-on:自定义事件名称="xxx"/>

  2. 在父组件中：

    <Demo ref="xxx"/>
......
new Vue({
    mounted(){
        this.$refs.xxx.$on( '自定义事件名称')
    }
})

  3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

触发自定义事件：this.$emit('自定义事件名称',数据)

解绑自定义事件：this.$off('自定义事件名称')

组件上也可以绑定原生DOM事件，需要使用native修饰符，例：原生DOM事件.native

注意：通过this.$refs.xxx.on('自定义事件名称',回调函数)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

3.6.全局事件总线

代码示例：按住ctrl键单击

作用：一种组件间通信的方式，适用于任意组件间通信。

使用

  1. 安装全局事件总线

    new Vue({
    ......
    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm(傀儡)
    },
    ......
})

  2. 使用事件总线

    //1.接收数据: A组件想接收数据，则在A组件中给`$bus`绑定自定义事件，事件的`回调留在A组件自身`
methods(){ //提前准备好一个回调函数
    demo(data){......}
}
. . . . .
mounted(){
    this.$bus.$on('自定义事件名称',this.demo)	//绑定自定义事件，
}
    
//2.提供数据
this.$bus.$emit('自定义事件名称',要传送的数据)

  3. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

3.7.消息订阅与发布

作用：一种组件间通信的方式，适用于任意组件间通信。

使用

  1. 安装pubsub:：npm i pubsub-js

  2. 引入：import pubsub from 'pubsub-js'

  3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

    methods(){
    demo(data){......}
    ......
}
......
mounted(){
    this.pid = pubsub.subscribe('自定义事件名称',this.demo)
}

  4. 提供数据：pubsub.publish('xxx 数据)

最好在beforeDestroy钩子中，用Pubsub.unsubscribe(pid)去取消订阅

这个技术和全局事件总线的功能和使用方式都是差不多的，这个技术在Vue中用的不多

3.8.过度与动画

操作css的trasition或animation

使用

  1. 定义样式

    xxx-enter-active{
    过度效果css代码
} 
xxx-leave-active{
    过度效果css代码
} 
xxx-enter-active,xxx-leave-active{
    过度效果css代码
}

  2. 使用样式

    <!-- 在想要使用样式的标签外面添加一个标签 -->
<transition name="xxx"></transition>
posted @ 2023-04-24 11:37  22-10-21  阅读(87)  评论(0)    收藏  举报