Vue3学习笔记 ----- Vite、Vetur、Vue-router@4、Pinia的使用
打包 – Vite
- 极速的服务启动，使用原生 ESM 文件，无需打包
- 轻量快速的热重载，始终极快的模块热重载（HMR）
- 丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
传统打包方式
基于打包器的方式启动，必须优先抓取并构建你的整个应用，然后才能提供服务。
vite 方式
Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
PS:
webpack 的入口是一个 js 文件，先根据入口 js 文件，构建打包项目，在运行服务器。
Vite 的入口文件是一个 html 文件，先直接启动服务器运行 html 文件，在通过 http 请求加载源码。
使用Vite创建Vue3项目
yarn create vite or npm create vite + 项目名
回车
vue
回车
vue-ts
bash可能会导致方向键选择不生效, 使用cmd即可
工作台插件 – Vetur
- vue2中需要安装插件
Vetur，可以实现组件高亮。但是vue3的一些语法在vetur中报错。 - vue3中需要安装插件
Volar，提供了更加强大的功能，插件和Vetur会出现冲突。 - 所以，使用功能vue3，需要禁用
vetur插件，安装Volar插件。 Volar共需要安装两个插件，第二个提供Volar TypeScript支持。
路由 – Vue-router@4
vue升级vue3之后，配套的vue-router也升级为[email protected]版本
vue-router4的语法和3的版本语法基本一致，但是有一些细微的修改。
- 基本使用
安装
yarn add vue-router or npm install vue-router
使用
例如: views文件夹下创建组件home和login
创建文件路由入口文件router/index.ts
import {
createRouter,
createWebHashHistory,
createWebHistory,
} from 'vue-router'
// 创建路由
const router = createRouter({
// 创建路由模式 history模式--createWebHashHistory 哈希模式--createWebHistory
history: createWebHashHistory(),
// 配置路由规则
routes: [
{ path: '/home', component: () => import('../views/Home.vue') },
{ path: '/login', component: () => import('../views/Login.vue') },
],
})
// 导出路由
export default router
在 main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
+ import router from './router'
createApp(App)
+ .use(router)
.mount('#app')
在App.vue中使用
<script setup lang="ts">
// 在 TS 项目开发中，可以导入路由组件类型 RouterLink 和 RouterView 增强类型检查
// 不导入的话 router-link 和 router-view 为 any (相当于JS开发)
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<h1>Vue-router@4</h1>
<ul>
<li>
<!-- router-link to+路由名称 -->
<router-link to="/home">首页</router-link>
</li>
<li>
<router-link to="/login">登录</router-link>
</li>
</ul>
<!-- 路由出口 路由页面展示-->
<router-view />
</template>
在组件中使用
vue2中使用路由是this.$router或 this.$route, 但在vue3中子组件无法访问this, 需要通过useRouter()代替 this.$router,useRoute()代替 this.$route
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
// 相当于 this.$route
const route = useRoute()
console.log(route)
// 相当于 this.$router
const router = useRouter()
const loginBtn = () => {
// 在方法中使用
alert('登录成功，跳转到主页')
router.push('/home')
}
</script>
<template>
<h2>Login 登录页</h2>
<button @click="loginBtn">登录按钮</button>
<-- 在template中使用 -->
<button @click="router.push('/home')">主页</button>
</template>
状态管理 – Pinia
Pinia 是 Vue.js 的轻量级状态管理库
比起vue3中的Vuex状态管理, pinia更轻量, 更容易使用
state: 状态
actions 修改状态(同步和异步修改状态), 不再用action/mutation
getter: 计算属性
- 安装
yarn add pinia or npm install pinia - 挂载
在main.ts中
import { createApp } from 'vue'
import App from './App.vue'
// 引入并创建pinia实例
+import { createPinia } from 'pinia'
+const pinia = createPinia()
// 挂载
createApp(App)
+ .use(pinia)
.mount('#app')
- 使用
新建文件store/user/counter.ts
import { defineStore } from 'pinia'
// 参数1 唯一标识
// 参数2 配置对象
const useUserStore = defineStore('user',{
// 状态
state(){
return {
name: '张三',
age: 18,
}
},
// 状态数据计算属性 相当于computed
getters:{
doubleAge():number {
return this.age * 2
}
},
// 修改状态 同步异步都可修改
actions:{
addAge(){
this.age ++
},
minusAge(){
this.age --
}
}
})
// 导出
export default useUserStore
组件中使用
<script setup lang="ts">
import useUserStore from './store/counter'
// 使用 Store
const user = useUserStore()
// 使用actions
const minusUserAge()=>{
user.minusAge()
}
</script>
<template>
<h1>Store 名称 {{ user.name }}</h1>
<h2>Store 年龄{{ user.age }}</h2>
<div>getters {{ user.doubleAge }}<div/>
<button @click="user.addAge()">actions 点击+1<button />
<button @click="minusUserAge()">actions 点击-1<button />
</template>
建议做模块化处理
新建文件store/index.ts
import useUserStore from './counter'
// import xxx from './xxx'
// 统一导出方法
export default function useStore(){
return {
user: useUserStore(),
//xxx: xxx()
}
}
组建中使用
<script setup lang="ts">
import useStore from './store'
const { user } = useStore()
</script>
<template>
<h1>Store 名称 {{ user.name }}</h1>
<h2>Store 年龄{{ user.age }}</h2>
</template>