尚硅谷vue全家桶下（vue3）

已于 2024-03-25 21:34:14 修改
阅读量674 收藏 10
点赞数 3
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2024-03-25 21:33:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/136942596
版权

最后三天坚持

倒数第三天

创建vue3.0工程
要求版本号4.5.0以上
在这里插入图片描述
创建报错


D:\sun05\vue3\babel.config.js
  0:0  error  Parsing error: [BABEL] D:\sun05\vue3\babel.config.js: Unexpected token '.' (While processing: "D:\\sun05\\vue3\\node_modules\\@vue\\cli-plugin-babel\\preset.js")

D:\sun05\vue3\src\App.vue
  0:0  error  Parsing error: [BABEL] D:\sun05\vue3\src\App.vue: Unexpected token '.' (While processing: "D:\\sun05\\vue3\\node_modules\\@vue\\cli-plugin-babel\\preset.js")

D:\sun05\vue3\src\components\HelloWorld.vue
  0:0  error  Parsing error: [BABEL] D:\sun05\vue3\src\components\HelloWorld.vue: Unexpected token '.' (While processing: "D:\\sun05\\vue3\\node_modules\\@vue\\cli-plugin-babel\\preset.js")

D:\sun05\vue3\src\main.js
  0:0  error  Parsing error: [BABEL] D:\sun05\vue3\src\main.js: Unexpected token '.' (While processing: "D:\\sun05\\vue3\\node_modules\\@vue\\cli-plugin-babel\\preset.js")

D:\sun05\vue3\vue.config.js
  0:0  error  Parsing error: [BABEL] D:\sun05\vue3\vue.config.js: Unexpected token '.' (While processing: "D:\\sun05\\vue3\\node_modules\\@vue\\cli-plugin-babel\\preset.js")

当初环境配置问题，重开了

下载开发工具
用谷歌浏览器，先装楼梯才能进那个应用商店
在这里插入图片描述
切换默认浏览器
首先需要安装open in browser插件(如果没有安装 ，下拉有安装配置教程)，如果安装过了可以跳过此步骤
然后修改默认浏览器为Chrome：选择文件—首选项—设置，在搜索栏输入open-in-browser.default，输入框里面直接输入 Chrome

倒数第二天

setup
在这里插入图片描述

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>性别：{{sex}}</h2>
	<h2>a的值是：{{a}}</h2>
	<button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
	<br>
	<br>
	<button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
	<br>
	<br>
	<button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
	<br>
	<br>
	<button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>

</template>

<script>
	// import {h} from 'vue'
	export default {
		name: 'App',
		data() {
			return {
				sex:'男',
				a:100
			}
		},
		methods: {
			sayWelcome(){
				alert('欢迎来到尚硅谷学习')
			},
			test1(){
				console.log(this.sex)
				console.log(this.name)
				console.log(this.age)
				console.log(this.sayHello)
			}
		},
		//此处只是测试一下setup，暂时不考虑响应式的问题。
		async setup(){
			//数据
			let name = '张三'
			let age = 18
			let a = 200

			//方法
			function sayHello(){
				alert(`我叫${name}，我${age}岁了，你好啊！`)
			}
			function test2(){
				console.log(name)
				console.log(age)
				console.log(sayHello)
				console.log(this.sex)
				console.log(this.sayWelcome)
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				sayHello,
				test2,
				a
			}

			//返回一个函数（渲染函数）
			// return ()=> h('h1','尚硅谷')
		}
	}
</script>

不建议混用vue2vue3

ref函数
在这里插入图片描述

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h3>工作种类：{{job.type}}</h3>
	<h3>工作薪水：{{job.salary}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let name = ref('张三')
			let age = ref(18)
			let job = ref({
				type:'前端工程师',
				salary:'30K'
			})

			//方法
			function changeInfo(){
				// name.value = '李四'
				// age.value = 48
				console.log(job.value)
				// job.value.type = 'UI设计师'
				// job.value.salary = '60K'
				// console.log(name,age)
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				job,
				changeInfo
			}
		}
	}
</script>

reactive函数
在这里插入图片描述
在这里插入图片描述

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<h3>工作种类：{{person.job.type}}</h3>
	<h3>工作薪水：{{person.job.salary}}</h3>
	<h3>爱好：{{person.hobby}}</h3>
	<h3>测试的数据c：{{person.job.a.b.c}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					type:'前端工程师',
					salary:'30K',
					a:{
						b:{
							c:666
						}
					}
				},
				hobby:['抽烟','喝酒','烫头']
			})

			//方法
			function changeInfo(){
				person.name = '李四'
				person.age = 48
				person.job.type = 'UI设计师'
				person.job.salary = '60K'
				person.job.a.b.c = 999
				person.hobby[0] = '学习'
			}

			//返回一个对象（常用）
			return {
				person,
				changeInfo
			}
		}
	}
</script>

vue2响应式原理
在这里插入图片描述
vue3响应式原理

听累了……

computed计算属性
在这里插入图片描述

<template>
	<h1>一个人的信息</h1>
	姓：<input type="text" v-model="person.firstName">
	<br>
	名：<input type="text" v-model="person.lastName">
	<br>
	<span>全名：{{person.fullName}}</span>
	<br>
	全名：<input type="text" v-model="person.fullName">
</template>

<script>
	import {reactive,computed} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				firstName:'张',
				lastName:'三'
			})
			//计算属性——简写（没有考虑计算属性被修改的情况）
			/* person.fullName = computed(()=>{
				return person.firstName + '-' + person.lastName
			}) */

			//计算属性——完整写法（考虑读和写）
			person.fullName = computed({
				get(){
					return person.firstName + '-' + person.lastName
				},
				set(value){
					const nameArr = value.split('-')
					person.firstName = nameArr[0]
					person.lastName = nameArr[1]
				}
			})

			//返回一个对象（常用）
			return {
				person
			}
		}
	}
</script>

watch监视
在这里插入图片描述

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>当前的信息为：{{msg}}</h2>
	<button @click="msg+='！'">修改信息</button>
	<hr>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<h2>薪资：{{person.job.j1.salary}}K</h2>
	<button @click="person.name+='~'">修改姓名</button>
	<button @click="person.age++">增长年龄</button>
	<button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,watch} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let msg = ref('你好啊')
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			//情况一：监视ref所定义的一个响应式数据
			/* watch(sum,(newValue,oldValue)=>{
				console.log('sum变了',newValue,oldValue)
			},{immediate:true}) */

			//情况二：监视ref所定义的多个响应式数据
			/* watch([sum,msg],(newValue,oldValue)=>{
				console.log('sum或msg变了',newValue,oldValue)
			},{immediate:true}) */

			/* 
				情况三：监视reactive所定义的一个响应式数据的全部属性
						1.注意：此处无法正确的获取oldValue
						2.注意：强制开启了深度监视（deep配置无效）
			*/
			/* watch(person,(newValue,oldValue)=>{
				console.log('person变化了',newValue,oldValue)
			},{deep:false}) //此处的deep配置无效 */

			//情况四：监视reactive所定义的一个响应式数据中的某个属性
			/* watch(()=>person.name,(newValue,oldValue)=>{
				console.log('person的name变化了',newValue,oldValue)
			})  */

			//情况五：监视reactive所定义的一个响应式数据中的某些属性
			/* watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
				console.log('person的name或age变化了',newValue,oldValue)
			})  */

			//特殊情况
			/* watch(()=>person.job,(newValue,oldValue)=>{
				console.log('person的job变化了',newValue,oldValue)
			},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 */


			//返回一个对象（常用）
			return {
				sum,
				msg,
				person
			}
		}
	}
</script>

一般用第三种情况就行了

watch的value

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>当前的信息为：{{msg}}</h2>
	<button @click="msg+='！'">修改信息</button>
	<hr>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<h2>薪资：{{person.job.j1.salary}}K</h2>
	<button @click="person.name+='~'">修改姓名</button>
	<button @click="person.age++">增长年龄</button>
	<button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,watch} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let msg = ref('你好啊')
			let person = ref({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

            console.log(person)

            watch(sum,(newValue,oldValue)=>{
                console.log('sum的值变化了',newValue,oldValue)
            })

            watch(person,(newValue,oldValue)=>{
                console.log('person的值变化了',newValue,oldValue)
            },{deep:true})


			//返回一个对象（常用）
			return {
				sum,
				msg,
				person
			}
		}
	}
</script>

watchEffect函数
用谁监视谁
在这里插入图片描述
在这里插入图片描述
vue3生命周期
在这里插入图片描述
请添加图片描述

两种写一种就行

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
</template>

<script>
	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name: 'Demo',
		
		setup(){
			console.log('---setup---')
			//数据
			let sum = ref(0)

			//通过组合式API的形式去使用生命周期钩子
			onBeforeMount(()=>{
				console.log('---onBeforeMount---')
			})
			onMounted(()=>{
				console.log('---onMounted---')
			})
			onBeforeUpdate(()=>{
				console.log('---onBeforeUpdate---')
			})
			onUpdated(()=>{
				console.log('---onUpdated---')
			})
			onBeforeUnmount(()=>{
				console.log('---onBeforeUnmount---')
			})
			onUnmounted(()=>{
				console.log('---onUnmounted---')
			})

			//返回一个对象（常用）
			return {sum}
		},
		//通过配置项的形式使用生命周期钩子
		//#region 
		beforeCreate() {
			console.log('---beforeCreate---')
		},
		created() {
			console.log('---created---')
		},
		beforeMount() {
			console.log('---beforeMount---')
		},
		mounted() {
			console.log('---mounted---')
		},
		beforeUpdate(){
			console.log('---beforeUpdate---')
		},
		updated() {
			console.log('---updated---')
		},
		beforeUnmount() {
			console.log('---beforeUnmount---')
		},
		unmounted() {
			console.log('---unmounted---')
		},
		//#endregion
	}
</script>

hook函数
在这里插入图片描述
Demo.vue

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
  <hr>
  <h2>当前点击时鼠标坐标为：x:{{point.x}},y:{{point.y}}</h2>
</template>

<script>
	import { ref} from 'vue'
  import usePoint from '../hooks/usePoint'
	export default {
		name: 'Demo',
		
		setup(){
			
			//数据
			let sum = ref(0)
      let point = usePoint()
      
      return {sum,point}
    }
			
	}
</script>

新建文件hooks,建usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})

	return point
}

toRef与toRefs

<template>
	<h4>{{person}}</h4>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRef,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			// const name1 = person.name
			// console.log('%%%',name1)

			// const name2 = toRef(person,'name')
			// console.log('####',name2)

			const x = toRefs(person)
			console.log('******',x)

			//返回一个对象（常用）
			return {
				person,
				// name:toRef(person,'name'),
				// age:toRef(person,'age'),
				// salary:toRef(person.job.j1,'salary'),
				...toRefs(person)
			}
		}
	}
</script>

最后十集，了解一下

shallowReactive与shallowRef

readonly与shallowReadonly

toRaw与markRaw

customRef

provide与inject

响应式数据判断
在这里插入图片描述

<template>
	<h3>我是App组件</h3>
</template>

<script>
	import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
	export default {
		name:'App',
		setup(){
			let car = reactive({name:'奔驰',price:'40W'})
			let sum = ref(0)
			let car2 = readonly(car)

			console.log(isRef(sum))
			console.log(isReactive(car))
			console.log(isReadonly(car2))
			console.log(isProxy(car))
			console.log(isProxy(sum))

			
			return {...toRefs(car)}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

CompositionAPI
在这里插入图片描述
Feagment组件
在这里插入图片描述
在这里插入图片描述
Teleport组件

Suspense组件
在这里插入图片描述

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>稍等，加载中...</h3>
			</template>
		</Suspense>
	</div>
</template>

<script>
	// import Child from './components/Child'//静态引入
	import {defineAsyncComponent} from 'vue' 
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

Child.vue

<template>
	<div class="child">
		<h3>我是Child组件</h3>
		{{sum}}
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Child',
		async setup(){
			let sum = ref(0)
			let p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve({sum})
				},3000)
			})
			return await p
		}
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

最后一天

vue3得改变
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

挺多感慨的，不知道是因为没有学太会还是因为没有上手写项目，就是觉得好空虚，哎，一言难尽啊

在这里插入图片描述

佳美不ERROR
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
vue全家桶.zip
08-07
vue全家vue全家桶基础知识。包括vue,vue-cli,vuex.一些基本的方法和属性。桶基础知识。包括vue,vue-cli,vuex.一些基本的方法和属性。
vue全家桶学习笔记.md
04-03
vue全家桶学习笔记分享，包含了vue-router，vuex， vue-resource，vue-cli。从安装，到项目的搭建完成的整个过程，可以说是全面的涵盖了vue全家桶的所有内容，是vue整体了解的趋势整合。
报错：Parsing error: No Babel config file detected...的解决方案
这个Bug怎么解啊？
12-02 1万+
报错：Parsing error: No Babel config file detected...的解决方案
vue-cli3 项目启动报错 unexpected token... 居然是因为node版本过低
cjFrontEnd的博客
09-16 5439
最近在接手一个vue-cli3搭建的app项目的新需求时， 发现自己拉下代码之后启动一直报错, 报错是unexpected token... 对应的报错文件是 项目\node_modules\read-pkg\index.js ，具体是里面有一个...options 的运算操作报错，导致项目起不起来 后面捣鼓一圈， 走了点弯路， 还是把问题解决了， 问题的解决过程如下: ...
vue3学习过程中遇到的问题和解决方案集合
最新发布
m0_56307415的博客
05-29 439
vue3项目报错及问题处理
Parsing error: No Babel config file detected for XXXXX
道阻且长，行则将至。
06-01 2565
有人说的解决方法就是配置requireConfigFile:false，本质上就是告诉eslint,不用给我查找这个配置文件了，但是我又继续查了资料，看到有博主说，这样只是从表面上的确可以解决这个报错，但是你在babel配置文件里写的东西也就失效了。后面我又查了其他资料解决了这个报错。false，本质上是告诉eslint，不用查找这个配置文件了，虽然表面上可以解决这个报错，但是在babel配置文件里写的东西也就失效了。
【Vue】Parsing error: No Babel config file detected for ... vue
少莫千华
08-06 1551
在 `Babel 7.x` 新版本中，`Babel` 有一个 `"root"` 目录的概念， 默认为当前的工作目录文件夹。 对于项目范围的配置，`Babel` 将在根目录中自动搜索 `"babel.config.json"` 文件， 或使用了 支持的扩展名 的等效文件。 另外，用户可以使用显式的 `"configFile"` 值覆盖默认的配置文件搜索行为。
ESlint发生 Parsing error 错误的解决办法
热门推荐
qq_44884577的博客
04-13 3万+
ESlint发生 Parsing error 错误的解决办法
用yarn run serve运行vue项目时，一直出现\node_modules\@babel\compat-data\data\corejs3-shipped-proposals‘
青春木鱼的博客
12-30 1996
用yarn run serve运行vue项目时，一直出\node_modules\@babel\compat-data\data\corejs3-shipped-proposals'
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
尚硅谷提供的"Vue全家桶"教程涵盖了Vue的核心概念、组件化开发、路由、状态管理等多个方面，旨在帮助开发者全面掌握Vue.js技术栈。在这个压缩包中，包含了一个名为"尚硅谷_Vue全家桶.pdf"的文件，它很可能是详细的...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"尚硅谷_Vue全家桶.docx"可能是一份详细的教学文档，涵盖了Vue.js的基础知识，如模板语法、组件、指令、计算属性和侦听器，以及更高级的主题，如Vuex的状态管理、Vue Router的路由配置和Vue CLI的使用。这份文档可能...
尚硅谷Vue硅谷外卖项目视频
06-07
尚硅谷Vue硅谷外卖项目视频，支持尚硅谷，老师讲课真的很好的
@vue/cli （四）插件和preset
mutouren_abc的博客
07-08 4370
Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建的项目的 package.json ，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。基于插件的架构使得 Vue CLI 灵活且可扩展。每个 CLI 插件都会包含一个（用来创建文件的）生成器和一个（用来调整webpack核心配置和注入命令的）运行时插件。当你用 vue create
使用Babel独立版编译ES6代码时报错误:Unexpected token <
dawuafang
11-08 770
使用babel-standalone来在线编译ES6代码，但是遇到如下错误： Unexpected token &lt; 原因是ES6中使用了ReactJS，需要在编译预设置选项（presets）中添加react，记录下。...
vue3-报Parsing error: No Babel config file detected
qq_39480297的博客
06-15 418
vue3-报Parsing error: No Babel config file detected
npm错误找不到模块‘@vue/cli-plugin-babel/preset‘
jasonhongcn的专栏
04-13 491
在此之后，您必须更新您的babel配置。
【已解决】vue3报错：Parsing error: No Babel config file detected for......
qq_64274011的博客
06-04 405
vue3报错
vue和vuex版本不兼容！npm下载任何依赖报错，ERESOLVE could not resolve
weixin_54495706的博客
04-18 1571
vue和vuex版本不兼容！npm下载任何依赖报错，ERESOLVE could not resolve 方案一：加--force,例如： npm i axios -S --force。方案二：查看报错信息，是vue和vuex版本不兼容，给vuex降个版本试试~原来vuex：4.0.2；降级后：3.6.2。
【已解决】vue报错：Parsing error: No Babel config file detected for...
yolo_______95的博客
10-02 1万+
Vue项目报错：Parsing error: No Babel config file detected…
尚硅谷vue全家桶word
11-14
尚硅谷vue全家桶是一个web开发技术栈，集成了Vue.js框架、Vue Router、Vuex、Axios等主流的前端开发工具和库。Vue.js是一个轻量级、高效的JavaScript框架，适合构建单页面和动态网页应用。Vue Router是官方提供的...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佳美不ERROR

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值