vite搭建项目整合路由

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

为什么要使用vite

当我们开始构建越来越大型的应用时，
需要处理的 JavaScript 代码量也呈指数级增长。
包含数千个模块的大型项目相当普遍。
这个时候我们会遇见性能瓶颈
使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，
文件修改后的效果也需要几秒钟才能在浏览器中反映出来。
如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
Vite就是为了就解决这个问题

什么是vite

法语Vite（轻量，轻快）vite 是一个基于单文件组件的非打包开发服务器，
它做到了本地快速开发启动、实现按需编译、不再等待整个应用编译完成的功能作用。

vite的优势

1==>速度快: Vite使用esbuild 预构建依赖(Esbuild 使用 Go 编写), 
比 JavaScript 编写的预构建依赖快 10-100 倍

2==>按需提供源码: Vite只需要在浏览器请求源码时,进行转换并按需提供源码。
根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

使用vite搭建项目

1. yarn create vite [创建项目]
2. 输入项目名[vitevue3ts]
3. 选择使用的js框架vue
4. 使用使用ts 选择vue-ts
5. cd vitevue3ts
6. npm install
7. npm run dev

自动打开浏览器，将vite.config.ts文件配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],


  // 自动打开浏览器
  server: {
    host: '0.0.0.0', //通过ip的形式访问
    port: 8080, //端口号
    open:true, //自动打开浏览器

    //配置代理，但是我步推荐前端去代理，
    //因为打包后便不会在有代理，上线后是个坑
    proxy: {
      '/api': {
          target: 'http://API网关所在域名',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

vite配置别名,类似webpack的@

第一步: npm install @types/node --save-dev
cnpm install @types/node --save-dev [仅在开发环境中使用]
或者
yarn add package-name
yarn add package-name --dev [仅在开发环境中使用]


第2步:配置vite.config.ts文件 如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置别名需要的路径模块
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置别名
  resolve: {
    alias: [
      {
        find: '@', //指向的是src目录
        replacement:resolve(__dirname,'src')
      }
    ]
  },
})

第3步:验证别名是否成功
我们可以将  import HelloWorld from './components/HelloWorld.vue'
更改为  import HelloWorld from './components/HelloWorld.vue'
经过验证时ok的，别名设置成功

配置路由

第1步下载:

官网:https://next.router.vuejs.org/installation.html
npm install vue-router@4

第2步:配置

src下创建文件夹，router文件夹，创建index.ts文件；
代码如下：

import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'
const routes : Array <RouteRecordRaw> = [
    {
        path: '/a',
        name: 'home',
        component:()=>import('../views/teacher/index.vue'),
    }
]

const router = createRouter({
    history: createWebHashHistory(), //哈希值模式
    routes
})

// 暴露出去
export default router

第3步:在main.ts中注册

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router/index'
// 使用路由
createApp(App).use(router).mount('#app')

第4步:在app.vue中更改

<template>
  <!-- 放置路由容器 -->
 <router-view></router-view>
</template>
<script setup lang="ts">
</script>