第一步
查看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>
(4)其余
layout是中components文件:
left所有页面公用左侧
top为所有页面的公用头部
views中的问题件都讲展示在图中home的位置
以上内容由业务决定