小白vite+vue3搭建项目整个流程

第一步
查看npm 版本npm -v，npm版本是7+，创建项目命令：

npm create vite@latest threejsVue -- --template vue

第二步

// 进入项目名为threejsVue的项目命令
cd threejsVue
// 安装路由
npm install vue-router@4
// 安装css
npm install -D sass
// 初始化项目
npm install
// 启动项目
npm run dev

第三步 路径简写及其面引入配置，请查看之前文档
《vite+vue3 相关配置、相关插件》

第四部路由配置

在这里插入图片描述
（1）app.vue文件中改为

<template><router-view></router-view>
</template><script setup>
</script><style scoped>
</style>

（2）router文件夹中index.js内容为

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';const routes = [{path: '/',component: () => import('@/layout/index.vue'),redirect:'home',hidden: true,children: [{path: 'home',name: 'Home',component: () => import('@/views/home/index.vue'),// component: (resolve) => require(['../views/home/home'], resolve),meta: { title: '首页', icon: 'user', requireAuth: false, }},]}
];const router = createRouter({// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。history: createWebHashHistory(),routes, // `routes: routes` 的缩写
})export default router

(3)layout文件夹中index.vue内容（布局可自由设置）

<template><div class="layout_page"><div class="main_html"><div class="main_head"><topHead></topHead></div><div class="main_body"><div class="main_left"><left-nav></left-nav></div><div class="mian_content"><router-view v-slot="{ Component }" class="main" :key="route.path"><component :is="Component" /></router-view></div></div></div></div>
</template><script setup>
import topHead from './components/top.vue'
import leftNav from './components/left.vue'
const route = useRoute();
</script>
<style lang="scss" scoped>
.layout_page{width:100%;height: 100%;.main_html{width:100%;height: 100%;.main_head{width: 100%;height: 9.4vh;background: yellow;}.main_body{display: flex;width: 100%;height: calc(100% - 9.4vh);// flex-wrap: wrap;.main_left{flex-shrink: 1;width: 20%;height: 100%;background: blue;}.mian_content{width: 70%;height: 100%;background: green;}}}
}</style>