Vue 脚手架学习

麒麟而非淇淋2024-10-11 8:14

1.使用Vue脚手架

1.1 初始化脚手架

1.1.1 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

初始化后应该配置的东西：

1、将下面代码复制进vue.config.js文件中，可以关闭脚手架的语法检查。。

javascript 复制代码 
module.exports={
    lintOnSave:false;//关闭语法检查
}

2、在main.js文件中关闭生产提示

javascript 复制代码 
//关闭vue的生产提示
Vue.config.productionTip = false

备注：
1.如出现下载缓慢请配置 npm 淘宝镜像

npm config set registry http://registry.npm.taobao.org

  1. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
    请执行下面代码， 只提供读，不提供改。。。

    vue inspect > output.js

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh，可以提供改。

1.1.2脚手架文件结构

创建脚手架的默认结构：

1.1.3 在Vue配置对象中配置template属性，会报错的原因

如果在Vue实例不配置render函数情况下，执行下面代码会报错

报错信息如下：

解决方案：要么将模板预编译为呈现函数（render函数），要么使用编译器附带的模板解析器。

关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：

  • (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
  • (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

1.2 ref 和props

1.2.1 ref 标签属性

定义：

ref 是用于在 Vue 组件中获取 DOM 元素或子组件实例的引用的机制。它可以用来直接访问子组件的方法和属性，或获取原生 DOM 元素的引用。

    1. 被用来给元素或子组件注册引用信息（id的替代者）
    1. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
    1. 使用方式：
      1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
      1. 获取：```this.$refs.xxx```

用法示例：

父组件：

javascript 复制代码 
<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod(); // 调用子组件的方法
    }
  }
};
</script>

子组件

javascript 复制代码 
<template>
  <div>
    <h1>Child Component</h1>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called!');
    }
  }
};
</script>

1.2.2 props配置项

定义：

props 是用于父组件向子组件传递数据的机制。它允许父组件将数据传递给子组件，使子组件能够使用这些数据。

    1. 功能：让组件接收外部传过来的数据
    1. 传递数据：```<Demo name="xxx"/>```
    1. 接收数据：
      1. 第一种方式（只接收）：```props:['name'] ```
      1. 第二种方式（限制类型）：```props:{name:String}```
      1. 第三种方式（限制类型、限制必要性、指定默认值）
      javascript 复制代码 
              ```js

        props:{

         name:{

         type:String, //类型

         required:true, //必要性

         default:'老王' //默认值

         }

        }

        ```

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

用法示例：

父组件：

javascript 复制代码 
<template>
  <ChildComponent :message="parentMessage" :count="5" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

子组件：

javascript 复制代码 
<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
};
</script>

1.3 mixin(混入)

1.3.1 定义

Mixins 是一个对象，它包含了 Vue 组件的选项（data、methods、computed、watch、生命周期钩子等）。当一个组件使用一个混合时，混合的所有选项将与组件的选项合并。你可以定义一个或多个混合，然后将它们应用到不同的组件中，从而共享代码和功能。

**功能：**可以把多个组件共用的配置提取成一个混入对象

**注意：**一般会写独立的js文件，然后要使用的地方再引入

1.3.2 如何使用 Mixins

1.需要定义一个混合对象：

javascript 复制代码 
// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'This is data from mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('This method is from mixin');
    }
  },
  created() {
    console.log('Mixin created');
  }
};

1.3.3 在组件中使用 Mixin

组件中使用混合：

javascript 复制代码 
<template>
  <div>
    <h1>{{ mixinData }}</h1>
    <button @click="mixinMethod">Call Mixin Method</button>
  </div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  mixins: [myMixin], // 使用混合
};
</script>

1.3.4 Mixins 的合并策略

当你将一个混合应用于组件时，Vue 会合并混合和组件的选项。不同选项的合并策略如下：

  • data ：如果混合和组件都有 data 函数，Vue 会把它们的返回值合并到一个对象中。
  • methods：当混合和组件都有相同方法名时，组件的定义将覆盖混合的方法。
  • computed：和 methods 类似，如果有同名的计算属性，组件的定义将覆盖混合中的计算属性。
  • 生命周期钩子：如果组件和混合都有生命周期钩子，Vue 会在调用组件的生命周期钩子之前调用混合的生命周期钩子。

1.4 自定义插件

1.4.1 定义插件

在 Vue.js 项目中，使用脚手架（如 Vue CLI）创建自定义插件可以帮助你实现特定的功能需求，例如自动化构建步骤、增加额外的功能或配置等。

**注意：**一般会写独立的js文件，然后要使用的地方再引入。

示例代码：

javascript 复制代码 
 对象.install = function (Vue, options) {

        // 1. 添加全局过滤器

        Vue.filter(....)

   

        // 2. 添加全局指令

        Vue.directive(....)

   

        // 3. 配置全局混入(合)

        Vue.mixin(....)

   

        // 4. 添加实例方法

        Vue.prototype.$myMethod = function () {...}

        Vue.prototype.$myProperty = xxxx

    }

1.4.2 使用插件

```Vue.use()```

1.5 scoped样式

问题：

组件与组件之间的 style 会被汇总到一个对象中，因此如果选择器名称一致就会出现冲突。

  1. 作用：让样式在局部生效，防止冲突。

  2. 写法：```<style scoped>```

1.6 TodoList案例

1.6.1 TodoList案例实现

需求：

1.根据不同的功能拆分成不同的组件（可以拆分为5个组件）

2.然后根据组件实现的局部功能，引入相应的HTML和CSS静态组件

3.再实现动态的组件，考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用

4.后面再实现交互，从绑定事件开始。

实现效果：

脚手架结构：

代码演示：

App.vue

html 复制代码 
<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader :addTodo="addTodo"/>
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
				<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:[
					{id:'001',title:'抽烟',done:true},
					{id:'002',title:'喝酒',done:false},
					{id:'003',title:'开车',done:true}
				]
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
	}
</script>

<style>
	/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>

MyList.vue

html 复制代码 
<template>
	<ul class="todo-main">
		<MyItem 
			v-for="todoObj in todos"
			:key="todoObj.id" 
			:todo="todoObj" 
			:checkTodo="checkTodo"
			:deleteTodo="deleteTodo"
		/>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components:{MyItem},
		//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
		props:['todos','checkTodo','deleteTodo']
	}
</script>

<style scoped>
	/*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}

	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}
</style>

MyItem.vue

html 复制代码 
<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span>{{todo.title}}</span>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
	</li>
</template>

<script>
	export default {
		name:'MyItem',
		//声明接收todo、checkTodo、deleteTodo
		props:['todo','checkTodo','deleteTodo'],
		methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				this.checkTodo(id)
			},
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					this.deleteTodo(id)
				}
			}
		},
	}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>

MyHeader.vue

html 复制代码 
<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'MyHeader',
		//接收从App传递过来的addTodo
		props:['addTodo'],
		data() {
			return {
				//收集用户输入的title
				title:''
			}
		},
		methods: {
			add(){
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.addTodo(todoObj)
				//清空输入
				this.title = ''
			}
		},
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>

MyFooter.vue

html 复制代码 
<template>
	<div class="todo-footer" v-show="total">
		<label>
			<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
			<input type="checkbox" v-model="isAll"/>
		</label>
		<span>
			<span>已完成{{doneTotal}}</span> / 全部{{total}}
		</span>
		<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
	</div>
</template>

<script>
	export default {
		name:'MyFooter',
		props:['todos','checkAllTodo','clearAllTodo'],
		computed: {
			//总数
			total(){
				return this.todos.length
			},
			//已完成数
			doneTotal(){
				//此处使用reduce方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)
				},0) */
				//简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			},
			//控制全选框
			isAll:{
				//全选框是否勾选
				get(){
					return this.doneTotal === this.total && this.total > 0
				},
				//isAll被修改时set被调用
				set(value){
					this.checkAllTodo(value)
				}
			}
		},
		methods: {
			/* checkAll(e){
				this.checkAllTodo(e.target.checked)
			} */
			//清空所有已完成
			clearAll(){
				this.clearAllTodo()
			}
		},
	}
</script>

<style scoped>
	/*footer*/
	.todo-footer {
		height: 40px;
		line-height: 40px;
		padding-left: 6px;
		margin-top: 5px;
	}

	.todo-footer label {
		display: inline-block;
		margin-right: 20px;
		cursor: pointer;
	}

	.todo-footer label input {
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.todo-footer button {
		float: right;
		margin-top: 5px;
	}
</style>

1.6.2总结TodoList案例

  1. 组件化编码流程：

    ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

    ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

    ​ 1).一个组件在用：放在组件自身即可。

    ​ 2). 一些组件在用：放在他们共同的父组件上App.vue（状态提升）。

    ​ (3).实现交互：从绑定事件开始。

  2. props适用于：

    ​ (1).父组件 ==> 子组件 通信

    (2).子组件 ==> 父组件 通信（要求父先给子一个函数，子调用该函数，实现对数据的操作）

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

  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，因为Vue认为只要地址没有修改就不算改过，但不推荐这样做。

1.7 组件的自定义事件

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

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

    2. 第二种方式，在父组件中(灵活性更高)：

      复制代码 
      <Demo ref="demo"/>
......
mounted(){
   this.$refs.demo.$on('atguigu',this.test)
}

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

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

  5. 解绑自定义事件

    1. this.$off('atguigu') 解绑一个事件

    2. this.$off('a','b') 解绑多个事件

    3. this.$off() 所有事件都会被解绑

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

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！正常函数的this指向绑定该事件的组件对象实例。。。

1.8 全局事件总线（GlobalEventBus）

本质：本质还是自定义事件，只不过可以实现跨越组件进行数据的交互。。。。

使用：哪里要用到数据就哪里绑定事件。。。

全局事件的实现要求：

  • 1.需要所有组件通过某种方式可以进行交互
    • 原型对象上添加了一个新的属性 $bus，并且这个属性的值是当前的 Vue 实例对象。因此所有组件都可以进行交互。。
  • 2.并且所有组件要可以拿到 on、off、$emit方法
    • 因此可以拿到Vue实例对象中的on、off、$emit方法

最终展示效果：

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

  2. 安装全局事件总线：

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

  3. 使用事件总线：

    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      javascript 复制代码 
      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

    2. 提供数据：this.$bus.$emit('xxxx',数据)

  4. 最好在beforeDestroy钩子中，用 $off 去解绑当前组件所用到的事件，以避免内存泄漏。

1.9 消息订阅与发布（pubsub）

注意：一般用全局事件总线实现，因为订阅要引入第三方库。。。

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

  2. 使用步骤：

    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('消息名',数据)

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

实现：

相关推荐
zpjing~.~3 分钟前
Vue3 provide 和 inject的使用
vue.js
小孔_H7 分钟前
Vue3 虚拟列表组件库 virtual-list-vue3 的使用
前端·javascript·学习·list
南宫生1 小时前
力扣-Hot100-二叉树其一【算法学习day.32】
数据结构·学习·算法·leetcode
Black蜡笔小新1 小时前
无插件H5播放器EasyPlayer.js网页web无插件播放器选择全屏时，视频区域并没有全屏问题的解决方案
前端·javascript·音视频
猫爪笔记1 小时前
MySQL数据库：SQL语言入门 【2】（学习笔记）
数据库·笔记·sql·学习·mysql
Augenstern、1 小时前
vue3 element el-table实现表格动态增加/删除/编辑表格行，带有校验规则
前端·javascript·vue.js
沐泽Mu1 小时前
嵌入式学习-C嘎嘎-Day04
c语言·开发语言·c++·学习
A黄俊辉A1 小时前
electron安装遇到的问题
前端·javascript·electron
赵锦川2 小时前
微信小程序设置屏幕安全距离
前端·javascript·vue.js
JovaZou2 小时前
[Python学习日记-67] 封装
开发语言·python·学习
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04好数（蓝桥杯）05软件工程从理论到实践客观题汇总(头歌第一章至第八章)06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07怎样让音频速度变慢？请跟随以下方法进行操作08全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10玄机平台应急响应—webshell查杀