Vue3入门 ----- Vite、Vetur、Vue-router@4、Pinia的使用_vite vue-router

打包 – 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在 main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
+ import router from './router'

createApp(App)
+   .use(router)
    .mount('#app')
1
2
3
4
5
6
7

在App.vue中使用

<script setup lang="ts">
// 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/229112