为什么使用vite
相比于webpack，vite拥有更快的打包速度。 webpack是你修改了一处，全部都需要重新渲染打包。而vite则是只针对与你修改的地方进行渲染打包。能大大的提高我们的效率。
使用vite需要注意的地方
-
template标签里【不需要】使用父盒子包括了
-
引入组件的时候 vue 组件要写全，要加上【.vue】否则会报错
-
@可以使用，但是需要在 vite.config.js 中配置一下 【@代表src根目录】
基于vite搭建vue3项目
原始的搭建方法【基于webpack】
vue create 项目名称
vite 搭建方法
使用NPM：
npm init vite@latest 项目名称
使用Yarn:
yarn create vite 项目名称
使用PNPM：
pnpm create vite 项目名称
基于vite的项目，router，store要自己写
安装router
1.下载
npm install vue-router@4 -S
2.创建
3.在router/index.js中填充内容
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
4.在main.js中挂载
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
createApp(App).use(router).mount('#app')
