3.Vue脚手架

Posted 2023-04-24 Myvlog

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所提供的网址即可成功查看
     

     

报错

1. 如果报错

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组件名字为大驼峰写法

3.2.ref 与 props

3.2.1.ref

作用：给节点打上标识

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

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

读取：this.$refs.xxx

效果图

代码示例

3.2.2.props

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

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

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

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

效果图

代码示例

|
|
|

student组件	APP组件

备注：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:[引入的对象方法名]

效果图

代码示例

school组件	student组件

App组件	mixin混入配置文件

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案例

案例效果

3.4.1.实现静态组件

①案例顶部

②案例中间

List

Item

③案例底部

3.4.2.展示动态数据

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

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

app

list

item

3.4.3.交互

①添加

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

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

使用方式：

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

效果图

代码示例

app组件	top组件

实现流程：

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

②勾选

修改用户勾选的数据变化

效果图

代码示例

app

list

item

实现流程：

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

list

item

实现流程：

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

④底部统计

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

效果图

代码示例

⑤底部交互

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

效果图

代码示例

bottom组件	app组件

实现流程：

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

②自定义事件

app

top

buttom

③全局事件总线

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

main.js

list

app

④编辑

添加一个编辑功能

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

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

app

item

$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>
   

vue 脚手架简单安装流程

参考技术A 能够显示版本号，说明环境已经安装好了。

注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图：

按照提示，打开浏览器输入地址： http://localhost:8080
最终结果如下：

到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。