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

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

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

第二步

// 进入项目名为threejsVue的项目命令
cd threejsVue
// 安装路由
npm install vue-router@4
// 安装css
npm install -D sass
// 初始化项目
npm install
// 启动项目
npm run dev
1
2
3
4
5
6
7
8
9
10

第三步 路径简写及其面引入配置，请查看之前文档
《vite+vue3 相关配置、相关插件》
https://blog.csdn.net/qq_39536826/article/details/130945000?spm=1001.2014.3001.5501

第四部路由配置

（1）app.vue文件中改为

<template>
  <router-view></router-view>
</template>

<script setup>
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10

（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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

（4）其余
layout是中components文件：
left所有页面公用左侧
top为所有页面的公用头部
views中的问题件都讲展示在图中home的位置
以上内容由业务决定