vite 项目初始化（ts）

为什么要写这篇文章

1. vite 已经出来这么久了，文档也看了一遍了（都写了啥），该自己动手了
2. 在不动手就废了，再不学就要被淘汰了
3. 不想变成废材

---

---

一、 安装 vite

npm install vite -g // 全局安装

---

二、搭建你的 vite 项目

1. vite 创建后的项目

	vite create my-vue-app

根据他的提示来完成下一步

2. 路由相关

你可使用下面任意一种来安装

	pnpm install -D vue-router
	npm install -D vue-router
	yarn add vue-router

3.添加需要的文件

在 src 文件夹下面新建 views 文件夹(这个文件夹下面 新建我们需要的业务模块) home.vue 文件
删除 app.vue 中 template 中的代码。然后在 template 中 加入代码如下

<RouterView / >

新建路由文件

在 src 文件夹下新建 router 文件夹，在router 文件下面新建 index.ts 文件（如果你们没有用 js 那就新建 index.js 文件）

index.ts 代码

import { createRouter, RouteRecordRaw, createWebHistory } from 'vue-router'

const constRouters: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue')
  },
  {
    path: '/helloWorld',
    name: 'helloWorld',
    component: () => import('../components/HelloWorld.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes: constRouters
})

export default router

在main.ts 引入 路由

   import { createApp } from 'vue'
   import './style.css'
   import App from './App.vue'
   import router from './router'
   
   
   createApp(App).use(router).mount('#app')

这样 我们的 路由就 ok 了

---

总结

提示：这里是 创建的 vite 项目
后续还会持续更新 其他的东西