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

news2024/11/18 12:42:37

第一步
查看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>