前文：
本文参考书籍《Vue.js前端开发实战（第二版）》--黑马程序员/编著
重点在于本科期末速成和0基础入门
目录：
一.初识Vue
1.包管理工具：npm yarn
1）yarn
①yarn安装的npm指令：
npm install yarn -g②验证yarn安装：
yarn -v③常用指令
yarn init ：初始化
yarn install：（可简写为yarn）为项目安装所有包
yarn remove/up/add 包名 ：用于卸载/更新/添加指定名称的包。
2.创建Vue项目
1）手动创建
①npm
npm create vite@latest②yarn
yarn create vite
cd vite-project
yarn #安装全部依赖
yarn dev #启动服务作业：
1.什么是Vue？使用Vue进行项目开发具有哪些优势？
2.简述什么是MVVM模式？简要说明MVC和MVP的相同点与不同点？
二.js开发基础
1.什么是单文件组件？
答：
每个.vue文件都可用来定义一个单文件组件，Vue中的单文件组件是Vue组件的文件格式。
每个单文件组件由模板<template>、样式<style>、逻辑<script>三部分组成
2.单文件组件基本结构
<template>
<div class="demo">Demo组件</div>
</template>
<script>
/* 此处编写组件的逻辑 */
</script>
<style>
.demo{
font-size:22px;
font-weight:bold;
}
</style>3.切换页面显示组件
#修改src\main.js
import App from'./components/Demo.vue'3.数据绑定与输出
#②数据输出
<template>
{{message}}
</template>
#①数据绑定
<script setup>
const message（数据名）=‘哇达西是斌子酱’（数据值）
</script>4.Vue引入Html页面
创建一个html页面 D:\vue\chapter02\helloworld.html 通过<script>标签引入Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World案例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
</html>5.ref（）函数
简洁：ref()函数用于将数据转换成响应式数据
创建src\components\Ref.vue文件
<template>{{ message }}</template>
<script setup>
import { ref } from 'vue'
const message = ref('欧克了兄弟们我是画面二号')
setTimeout(() => {
message.value = '哇达西我是画面一号'
}, 2000)
</script>效果：两秒后切换页面效果
6.reactive（）函数
简介：reactive()函数用于创建一个响应式对象或数组
创建src\components\Reactive.vue文件。
<template>{{ obj.message }}</template>
<script setup>
import {reactive}from'vue'
const obj=reactive（{message:'一号文字'}）
setTimeout(()=>{
obj.message='二号文字'
},2000)
</script>7.toRef（）和toRefs函数
toRef()函数用于将响应式对象中的单个属性转换为响应式数据。
toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。
响应式数据 = toRef(响应式对象, '属性名')
创建src\components\ToRef.vue文件
<template>
<div>message的值：{{}message}</div>
<div>obj.message的值：{{obj.message}}</div>
</template>
<script setup>
import {reactive,toRef} from 'vue'
const obj=reactive({message:'我是1号'})
const message=toRef(obj(响应式对象),'message'（属性名）)
setTimeout(()=>{
message.value='我是二号数据'
}，2000)
</script>8.v-text
简介：v-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对
其进行解析。v-text的语法格式如下。
<标签名 v-text="数据名"></标签名>
创建src\components\VText.vue文件。
<template>
<div v-text="message"></div>
</template>
<script setup>
const message = '<span>赵力波牛波一</span>'
</script>8.v-html
简介：在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，
则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。v-html的语法格式如下。
创建src\components\VHtml.vue文件。
<template>
<div v-html="html"></div>
</template>
<script setup>
const html = '<strong>赵力波牛波二</strong>'
</script>9.v-bind属性动态绑定
用法：<标签名 v-bind:属性名="数据名"></标签名>
创建src\components\VBind.vue文件。
#placeholder是一个占位符。
<template>
<p><input type="text" v-bind:placeholder="username"></p>
<p><input type="password" :placeholder="password"></p>
</template>
<script setup>
const username = '请输入用户名'
const password = '请输入密码'
</script>10.v-on
简介：给DOM元素绑定事件，实现交互。
用法：<标签名 v-on:事件名="事件处理器"></标签名>
创建src\components\VOn.vue文件。
<template>
<button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
console.log('欢迎来到Vue.js的世界！')
}
</script>11.双向数据绑定v-model
简介：了v-model指令来实现双向数据绑定，使用它可以在input、textarea和
select元素上创建双向数据绑定。
用法：<标签名 v-model="数据名"></标签名>
创建src\components\VModel.vue文件。
<template>
请输入姓名：<input type="text" v-model="username">
<div>姓名是：{{ username }}</div>
<input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">={{n1+n2}}
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>12.条件渲染指令v-if
用法：
<标签名 v-if="条件A">展示A</标签名>
<标签名 v-else-if="条件B">展示B</标签名>
<标签名 v-else>展示C</标签名>
创建src\components\VIf.vue文件。
<template>
小明的学习评定等级为：
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else>差</p>
<button @click="type = 'A'">切换成优秀</button>
<button @click="type = 'B'">切换成良好</button>
<button @click="type = 'C'">切换成差</button>
</template>
<script setup>
import { ref } from 'vue'
const type = ref('B')
</script>13.v-for列表渲染指令
用法：
①根据数组渲染<标签名 v-for="(item, index) in arr"></标签名>
②根据对象渲染<标签名 v-for="(item, name, index) in obj"></标
签名>
③根据数字渲染<标签名 v-for="(item, index) in num"></标签名>
④根据字符串渲染<标签名 v-for="(item, index) in str"></标签名>
为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，
建议通过key属性为列表中的每一项提供具有唯一性的值。
<div v-for="item in items" :key="item.id"></div>
演示使用v-for根据一维数组渲染列表
<template>
<div v-for="(item, index) in list" :key="index">
索引是：{{ index }} --- 元素的内容是：{{ item }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive(['HTML', 'CSS', 'JavaScript'])
</script>演示使用v-for根据对象数组渲染列表
<template>
<div v-for="item in list" :key="item.id">
id是：{{ item.id }} --- 元素的内容是：{{ item.message }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([
{ id: 1, message: '梅', }, { id: 2, message: '兰', },
{ id: 3, message: '竹', }, { id: 4, message: '菊', }
])
</script>演示使用v-for根据对象渲染列表
<template>
<div v-for="(value, name) in user" :key="name">
属性名是：{{ name }} --- 属性值是：{{ value }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ id: 11, name: '小明', gender: '男' })
</script>三.组件基础：
1.组合式API和选项式API：
简介：选项式API是一种通过包含多个选项的对象来描述组件逻辑的API，其常用的选项 包括data、methods、computed、 watch等。相比于选项式API，组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup()函数中。
2.注册组件
简介：当在Vue项目中定义了一个新的组件后，要想在其他组件中引用这个新的组件，需要对新的组件进行注册。Vue提供了两种注册组件的方式，分别是全局注册和局部注册。
1）全局注册
简介：如果某个组件的使用频率很高，许多组件中都会引用该组件，则推荐将该组件全局注册。被全局注册的组件可以在当前Vue项目的任何一个组件内引用。
在Vue项目的src\main.js文件中，通过Vue应用实例的component()方法可以全局注册组件。
用法：
component('组件名称', 需要被注册的组件)在src\main.js文件中注册一个全局组件MyComponent，示例代码如下：
import { createApp } from 'vue';
import './style.css'
import App from './App.vue'
import MyComponent from
'./components/MyComponent.vue'
const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')component()方法支持链式调用，可以连续注册多个组件，示例代码如下：
app.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)2）局部注册
简介：如果某些组件只在特定的情况下被用到，推荐进行局部注册。局部注册即在
某个组件中注册，被局部注册的组件只能在当前注册范围内使用。
用法：
<script>
import ComponentA from './ComponentA.vue'
export default {
components: { ComponentA: ComponentA }
}
</script>3.父组件向子组件传递数据
简介：若想实现父组件向子组件传递数据，需要先在子组件中声明props，表示子组件可以从父组件中接收哪些数据。
1）声明props
用法：
<script setup>
const props = defineProps({'自定义属性A': 类型}, {'自定义属性B': 类型})
</script>在组件中声明了props后，可以直接在模板中输出每个prop的值，语法格式如下：
<template>
{{ 自定义属性A }}
{{ 自定义属性B }}
</template>2）静态绑定props
创建src\components\Count.vue文件，用于展示子组件的相关内容
<template>
初始值为：{{ num }}
</template>
<script setup>
const props = defineProps({num: String})
</script>创建src\components\Props.vue文件，用于展示父组件的相关内容
<template>
<Count num="1" />
</template>
<script setup>
import Count from './Count.vue'
</script>4.动态组件
简介：利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件。
用法：
<component is="要渲染的组件"></component>上述语法格式中，<component>标签必须配合is属性一起使用，is属性的属性值表示要渲染的组件，当该属性值发生变化时，页面中渲染的组件也会发生变化。is属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef()函数定义响应式数据，将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应，它比ref()函数更适合于将组件保存为响应式数据。
创建src\components\MyLeft.vue文件。
<template>MyLeft组件</template>创建src\components\MyRight.vue文件。
<template>MyRight组件</template>创建src\components\DynamicComponent.vue文件，在该文件中导入并使用MyLeft和MyRight组件，实现单击按钮时动态切换组件的效果。
<template>
<button @click="showComponent = MyLeft">展示MyLeft组件</button>
<button @click="showComponent = MyRight">展示MyRight组件</button>
<div><component :is="showComponent"></component></div>
</template>
<script setup >
import MyLeft from './MyLeft.vue'
import MyRight from './MyRight.vue'
import { shallowRef } from 'vue'
const showComponent = shallowRef(MyLeft)
</script>5.插槽
简介：插槽
是指开发者在封装组件时不确定的、希望由组件的使用者指定的部分。也就是说，插槽是组件封装期间为组件的使用者预留的占位符，允许组件的使用者在组件内展示特定的内容。通过插槽，可以使组件更灵活、更具有可复用性。插槽需要定义后才能使用，下面对定义插槽和使用插槽分别进行讲解。
1）定义插槽
简介：在封装组件时，可以通过<slot>标签定义插槽，从而在组件中预留占位符。假设项目中有一
个MyButton组件，在MyButton组件中定义插槽的示例代码如下。
<template>
<button>
<slot></slot>
</button>
</template>在<slot>标签内可以添加一些内容作为插槽的默认内容。如果组件的使用者没有为插槽提供任何内容，则默认内容生效；如果组件的使用者为插槽提供了插槽内容，则该插槽内容会取代默认内容。
2）使用插槽
创建src\components\SlotSubComponent.vue文件，用于展示子组件的相关内容。
<template>
<div>测试插槽的组件</div>
<slot></slot>
</template>创建src\components\MySlot.vue文件，用于展示插槽的相关内容。
<template>
父组件-----{{ message }}
<hr>
<SlotSubComponent>
<p>{{ message }}</p>
</SlotSubComponent>
</template>
<script setup>
import SlotSubComponent from './SlotSubComponent.vue'
const message = '这是组件的使用者自定义的内容'
</script>3）具名插槽
简介：在Vue中当需要定义多个插槽时，可以通过具名插槽来区分不同的插槽。具名插槽是给每一个插槽定义一个名称，这样就可以在对应名称的插槽中提供对应的数据了。
插槽通过<slot>标签来定义，<slot>标签有一个name属性，用于给各个插槽分配唯一的名
称，以确定每一处要渲染的内容。添加name属性的<slot>标签可用来定义具名插槽。
用法：
<slot name="插槽名称"></slot>在父组件中，如果要把内容填充到指定名称的插槽中，可以通过一个包含v-slot指令的<template>标签来实现，语法格式如下。
<组件名>
<template v-slot:插槽名称></template>
</组件名>6.自定义指令（就是函数、方法在Vue里的叫法）
用法：使用setup语法糖，任何以“v”开头的驼峰式命名的变量都可以被用作一个自定义指令，示例代码如下。
<template>
<span v-color></span>
</template>
<script setup>
const vColor = { }
</script>四：路由
1.路由介绍
简介：路由是指路由器从一个接口接收到数据，根据数据的目的地址将数据定向传送到另一个接口的行为和动作；而路由器是执行行为和动作的硬件设备，主要用于连接网络，实现不同网络之间的通信和数据传递。
1）后端路由：
简介：后端路由的整个过程发生在服务器端，开发者需要在服务器端程序中建立一套后端路由规则。当服务器接收到请求后，会通过路由寻找当前请求的URL地址对应的处理程序。
2）前端路由：
前端路由的整个过程发生在浏览器端，其特点是当URL地址改变时不需要向服务器发起一个加载新页面的请求，而是在维持当前页面的情况下切换页面中显示的内容。
2.路由安装
在Vue 3项目中演示Vue Router的安装
yarn add vue-router@4 --save3.路由的基本使用
①定义路由组件
在src\components目录下创建Home.vue文件和About.vue文件。
Home.vue文件
<template>
<div class="home-container">
<h3>Home组件</h3>
</div>
</template>About.vue文件
<template>
<div class="about-container">
<h3>About组件</h3>
</div>
</template>②定义路由链接和路由视图
简介：使用<router-view>标签定义路由视图，该标签会被渲染成当前路由对应的组件。通过
<router-link>标签定义路由链接方便在不同组件之间切换。
<template>
<div class="app-container">
<h1>App根组件</h1>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<hr>
<router-view></router-view>
</div>
</template>③创建路由模块
在src目录下创建router.js文件作为路由模块，并在该文件中导入路由相关函数。
import { createRouter, createWebHashHistory } from 'vue-router'在router.js文件中创建路由实例对象。
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/home', component: () => import('./components/Home.vue') },
{ path: '/about', component: () => import('./components/About.vue') },
]
})在router.js文件中导出路由实例对象
export default router④导入并挂载路由模块
在src\main.js文件中导入并挂载路由模块。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router.js' // 导入路由模块
const app = createApp(App)
app.use(router) // 挂载路由模块
app.mount('#app')4.路由重定向
修改src\router.js文件，实现当用户访问“/”路径时，将路由重定向到“/home”路径。
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: import ('./components/Home.vue') },
{ path: '/about', component: import('./components/About.vue') }
]
})5.嵌套路由
简介：嵌套路由是指通过路由实现组件的嵌套展示，它主要由页面结构决定。实际项目中的应用界面通常由多层嵌套的组件组合而成，为了使多层嵌套的组件能够通过路由访问，路由也需要具有嵌套关系，也就是在路由里面嵌套它的子路由。
用法：
在src\router.js文件的路由匹配规则中通过children属性定义子路由匹配规则。
routes: [
{
path: '父路由路径',
component: 父组件,
children: [
{ path: '子路由路径1', component: 子组件1 },
{ path: '子路由路径2', component: 子组件2 }
]
}
]在组件中定义子路由链接的语法格式如下。
<router-link to="/父路由路径/子路由路径"></router-link>1）嵌套路由的实现
①在src\components目录下创建pages目录，用于存放子路由组件。
②创建src\components\pages\Tab1.vue文件。
<template>
<div>Tab1组件</div>
</template>
<style scoped>
div {
text-align: left;
background-color: #9dc4e5;
}
</style>③创建src\components\pages\Tab2.vue文件。
<template>
<div>Tab2组件</div>
</template>
<style scoped>
div {
text-align: left;
background-color: #ffba00;
}
</style>④在component\About.vue文件中添加子路由链接和子路由视图。
<template>
<div class="about-container">
<h3>About组件</h3>
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr>
<router-view></router-view>
</div>
</template>⑤修改src\router.js文件，在routes中导入Tab1组件和Tab2组件，并使用children属性定义子路由匹配规则。
routes: [
{ path: '/', redirect: '/about' },
{ path: '/home', component: () => import ('./components/Home.vue') },
{
path: '/about', component: () => import('./components/About.vue'),
children: [
{ path: 'tab1', component: () => import ('./components/pages/Tab1.vue') },
{ path: 'tab2', component: () => import ('./components/pages/Tab2.vue') }]
}]6.动态路由
简介：动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数（Dynamic Segment），使用动态路径参数可以提高路由规则的可复用性。在Vue Router的路由路径中，使用“:参数名”的方式可以在路径中定义动-态路径参数。
用法：
{ path: '/sub/:id', component: 组件 },7.命名路由
使用命名路由的语法格式如下。
{ path: '路由路径', name: '路由名称', component: 组件 }在<router-link>标签中使用命名路由时，需要动态绑定to属性的值为对象。当使用对象作为to
属性的值时，to前面要加一个冒号，表示使用v-bind指令进行绑定。在对象中，通过name属
性指定要跳转到的路由名称，使用params属性指定跳转时携带的路由参数，语法格式如下。
{ path: '路由路径', name: '路由名称', component: 组件 }如何使用命名路由
①在src\components\Home.vue文件中的<router-link>标签中动态绑定to 属性的值，指定要跳转到的路由名称，并传递参数。
<template>
<div class="home-container">
<h3>Home组件</h3>
<router-link :to="{ name: 'MovieDetails', params: { id: 3 } }">跳转到
MovieDetails组件</router-link>
</div>
</template>②在src\router.js文件中，将“:id”路径的路由名称定义为MovieDetails。
{ path: ':id', name: 'MovieDetails', component: () => import
('./components/movieDetails.vue'), props: true }五.Pinia
简介：Pinia是新一代的轻量级状态管理库，它允许跨组件或页面共享状态，解决了多组件间的数据通 信，使数据操作更加简洁。
1.安装pinia
# 使用yarn包管理器安装
yarn add pinia --save# 使用npm包管理器安装
npm install pinia --save在my-pinia目录下使用yarn安装Pinia。
yarn add [email protected] --save2.使用pinia
简介：在项目中使用Pinia时，通常先在项目中创建一个store模块，然后创建并挂载Pinia实例。其中，store模块是用于管理状态数据的仓库。
①编写store模块，创建src\store\index.js文件。
import { defineStore } from 'pinia'
export const useStore =
defineStore('storeId', {
state: () => {},
getters: {},
actions: {}
})② 在src\main.js文件中创建并挂载Pinia实例。
import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia() // 创建Pinia实例
app.use(pinia) // 导入Pinia实例
app.mount('#app')六.Vue编程题
1.请使用v-for完成水果列表的渲染，效果如图2-1所示。
答：
①创建一个新的Vue 3项目，具体命令如下。
yarn create vite fruit ---template vue
cd fruite
yarn
yarn dev②使用vscode打开fruit目录
③删除src/style.css中所有代码
④创建src\components\List.vue文件
<template>
<div>
<p>水果列表</p>
<ul>
<li v-for="item in list":key="item.id">
水果编号：{{item.id}}---水果名称：{{item.name}}---水果信息：{{item.info}}
</li>
</ul>
</div>
</template>
<script setup>
import {reactive} from vue
const list =reactive([{id:1,name:'Pingguo',info:'red'},{id:2,name:'ningmeng',info:'yellow'}])
</script>⑤ 修改src\main.js文件，切换页面中显示的组件，具体代码如下。
import App from './components/List.vue'2.请实现一个比较2个数大小的页面，当输入2个数字后，单击“比较”按钮后自动比较这2个数的大小，页面效果参考图3-1。比较数字大小结果显示的页面效果参考图3-2。
答：
①创建一个新的Vue 3项目，具体命令如下。
yarn create vite compare ---template vue
cd compare
yarn
yarn dev②使用vscode打开fruit目录
③删除src/style.css中所有代码
④创建src\components\compare.vue文件
<template>
<text>请输入第1个数字：</text>
<input type='number' @input=num1Input>
<text>请输入第2个数字：</text>
<input type='number' @input=num2Input>
<button @click='compare'>比较</button>
<div>
<text v-if="result">比较结果：{{ result }}</text>
</div>
</template>
<script setup>
import {ref} from 'vue'
const result=ref('')
const num1=ref(0)
const num2=ref(0)
const num1Input=(event)=>{
num1.value=Number(event.traget.value)
}
const num2Input=(event)=>{
num2.value=Number(event.traget.value)
}
const compare=()=>{
if(num1>num2){
result.value='数字一大于数字二'
}else if（num1<num2）{
result.value='数字一小于数字二'
}else{
result.value='数字一等于数字二'
}
}
</script>⑤修改src\main.js文件，切换页面中显示的组件，具体代码如下。
import App from './components/compare.vue'3.请编写登录页面和注册页面，通过动态组件实现动态切换页面中显示的组件，效果如图4-1和图4-2所示。
4.1
4.2
答：
①创建一个新的Vue 3项目，具体命令如下。
yarn create vite LoginOrRe ---template vue
cd compare
yarn
yarn dev②使用vscode打开LoginOrRe目录
③删除src/style.css中所有代码
④创建src\components\Login.vue文件。
<template>
登录
</template>⑤创建src\components\Re.vue文件。
<template>
注册
</template>⑥创建src\components\Index.vue文件，具体代码如下。
<template>
<button @click="show=Login">登录</button>
<button @click="show=Re">注册</button>
<div>
<component:is="show"></component>
</div>
</template>
<script setup>
import Login from './Login.vue'
import Re from './Re.vue'
import { shallowRef } from 'vue'
const show=shallowRef(Login)
</script>⑦修改src\main.js文件，切换页面中显示的组件，具体代码如下。
import App from './components/Index.vue'4.路由编程题：使用编程式导航实现页面的跳转，当单击按钮时，跳转到另一个组件中，并携带传递的参数。
①创建一个新的Vue 3项目，具体命令如下。
yarn create vite router --template vue
cd router
yarn
yarn dev② 下载route
yarn add vue-router@4 --save③使用VS Code编辑器打开router目录
④删除src/style.css中所有代码
⑤在src/components目录下创建UserXinXi.vue。
<template>
<div>
<h1>用户信息<h1>
<p>用户id：{{user.id}}</p>
<p>用户姓名：{{user.name}}</p>
<p>用户邮箱：{{user.email}}</p>
</div>
</template>
<script setup>
import {computed} from 'vue'
const props = defineProps({
id: {
type: Number,
required: true
}
})
const user=computed(()=>{
return{
id:props.id,
name:'赵立波',
emali:'[email protected]'
}
})
</script>⑥在src/components目录下创建User.vue。
<template>
<div>
<h1>User组件<h1>
<button @click="gotoUserXinXi">前往用户信息界面</button>
</div>
</template>
<script setup>
import {useRouter} from 'vue'
import {reactive} from 'vue'
const router = useRouter()
const user=reactive(
{id:1,name:''赵立波,email:'[email protected]'}
)
const gotoUserXinXi =()=>{
router.push({
name:'UserXinXi',
params:{id,user.id},
jquery:{
name:user.name,email:user.email
}
})
}
</script>⑦ 创建路由模块，在src目录下创建router.js文件作为路由模块，router.js具体命令如下。
import{createRouter,createWebHashHistory} from 'vue-router'
const router=createRouter({
history:createWebHashHistory(),
routes:[
{path:'/',redirect:'/user'},
{
path:'/user',name:'User',component:()=>import('./components/User.vue')
},
{
path:'/user',name:'UserXinXi',component:()=>import('./components/UserXinXi.vue'),props:true
}
]
}
)
export default router⑧在src\main.js文件中导入并挂载路由模块，具体代码如下。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router.js'
const app = createApp(App)
app.use(router)
app.mount('#app')5. 请使用Pinia实现年龄的持久化存储，在页面中显示年龄初始值为20，单击“年龄+”按钮，年龄值会每次自增1，刷新浏览器后，显示修改后的年龄值。
①创建一个新的Vue 3项目，具体命令如下。
yarn create vite pinia --template vue
cd router
yarn
yarn dev②在age-pinia目录下使用yarn安装pinia，具体命令如下。
yarn add [email protected] --save
yarn add [email protected] --save③使用VS Code编辑器打开pinia目录。
④在src\main.js文件中创建并挂载Pinia实例和pinia-plugin-persist插件，具体代码如下。
import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './App.vue'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
const app = createApp(App)
app.use(pinia)
app.mount('#app')⑤创建创建src\store\index.js文件，编写store模块的代码。
import {defineStore} from 'pinia'
export const useStore = defineStore('storeId',{
state:()=>{
return{add:20}
},
actions:{increase(){this.add++}},
persist:{enabled:true,strategies:[{key:'user',storage:localStorage}]}
})
export default useStore⑥清空src\App.vue文件中的内容，重新编写如下代码。
<template>
<p>
<button @click="changeAge">年龄增加</button>
年龄：{{add}}
</p>
</template>
<script setup>
import {useStore} from './store/index.js'
import {storeToRefs} from 'pinia'
const store =useStore()
const {add}=storeToRefs(store)
const changeAge=()=>{
store.increase()
}
</script>感谢观看
标签：src,vue,const,js,Vue,Pinia,组件,import,路由 From： https://blog.csdn.net/Bew1tch/article/details/141755683