首页 > 其他分享 >3.Vue脚手架

3.Vue脚手架

时间：2023-04-24 11:45:02浏览次数：53  
标签：Vue 自定义 app 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>

标签：Vue,自定义,app,vue,事件,组件,脚手架
From： https://www.cnblogs.com/Myvlog/p/17348971.html

相关文章

  • 【vue】error in ./src/components/NumberInfo/NumberInfo.vue
    出现背景：ant designvuepro执行yarnrunserve解决办法：修改src/components/NumberInfo.vue文件中style部分原来的：<stylelang="less"scoped>@import"index";</style>注释掉 @import"index"<stylelang="less"scoped&g......
  • Vue学习笔记之Node Sass version 8.0.0 is incompatible with 4.0.0错误
    输入以下两个命令：npmuninstallnode-sassnpmi-Dsass注：Mac环境如果进行了系统升级，需要重新安装Xcode，执行命令xcode-selectinstall不然会出现如下的错误Mac解决gyp:NoXcodeorCLTversiondetected!报错 如果出现python2的错误gypverb`which`failedE......
  • 记录在vue3项目中使用wangeditor富文本编译器以及微信小程序中的渲染
    首先，管理后台中的使用npminstallwangeditor//f封装成了组件，以下是组件中的内容<template>  <divstyle="border:1pxsolid#ccc;maxwidth:600px">   <!--工具栏-->   <Toolbar    style="border-bottom:1pxsolid#ccc"    :......
  • ai问答：使使用 Vue3 组合式API 和 TypeScript 父子组件demo
    这是一个使用Vue3组合式API和TypeScript的简单父子组件示例父组件Parent.vue:<template><div><p>{{msg}}</p><Child/></div></template><scriptlang="ts">import{ref}from'vue'import......
  • Vue3 Suspense
    视频3.Suspense等待异步组件时渲染一些额外内容，让应用有更好的用户体验使用步骤：异步引入组件import{defineAsyncComponent}from'vue'constChild=defineAsyncComponent(()=>import('./components/Child.vue'))使用Suspense包裹组件，并配置好default与fallba......
  • Vue3 Teleport
    视频2.Teleport什么是Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。<teleportto="移动位置"> <divv-if="isShow"class="mask"> <divclass="dialog"> <h3>我是一个弹窗</h3> <button@clic......
  • Vue 创建一个Vue项目
    首先，init一个项目D:\javawebPractce\Vue这是我的工程路径创建命令vueinitwebpackhello-vuehello-vue是我的项目名称创建之后，我为了方便，将router自动安装了安装elementUInpmielement-ui-S安装组件npmstall安装sass加载器cnpminstallsass-loadernode-sass--......
  • vue2源码-十三、nextTick在哪里使用？原理是什么？
    nextTick在哪里使用？原理是什么？nextTick内部采用了异步任务进行包装（多个nextTick调用会被合并成一次，内部会合并回调）最后在异步任务中批处理。主要应用场景就是异步更新（默认调度的时候就会添加一个·nextTick任务）用户为了获取最终的渲染结果需要在内部任务执行之后再执行用户逻......
  • Vue3 Composition API 的优势
    视频四、CompositionAPI的优势1.OptionsAPI存在的问题使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。2.CompositionAPI的优势我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。......
  • Vue3 Fragment
    视频五、新的组件1.Fragment在Vue2中:组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减小内存占用......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99