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也升级为vue-router@4.x版本
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>