vite创建vue3项目

npm init vite

项目架构

安装依赖

yarn add vue-router@next vuex@next element-plus axios -S

yarn add sass -D

项目文件夹

vite.config.js配置server

我们在官网可以看到更全的配置

 vite中文网

环境变量

我们可以打印一下

配置

配置成功

配置路由

router文件夹下，建立index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './../components/Home.vue'
import Welcome from './../components/Welcome.vue'
import Login from './../components/Login.vue'
// 创建路由对象
const routes = [
    {
        name: 'home',
        path: '/',
        // 元素配置
        meta: {
            title: '首页'
        },
        component: Home,
        // 重定向
        redirect: '/welcome',
        // 配置子路由
        children: [
            {
                name: 'welcome',
                path: '/welcome',
                meta: {
                    title: '欢迎'
                },
                component: Welcome,
            },
            {
                name: 'login',
                path: '/login',
                meta: {
                    title: '登陆'
                },
                component: Login,
            }
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

app.vue

<template>
  <router-view></router-view>
</template>
<script >
export default {
  name: "app",
};
</script>
<style scoped>
</style>

Home.vue

<template>
  <div>这是Home页</div>
  <router-view></router-view>
</template>
<script >
export default {
  name: "Home",
};
</script>
<style scoped>
</style>

<template>
  <div class="">这是登录页</div>
  <el-button @click="goHome">回首页</el-button>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const goHome = () => {
  router.push("/welcome");
};
</script>

<style scoped>
</style>

Welcome.vue

<template>
  <div class="">这是欢迎界面</div>
  <router-link to="/login"> <el-button>去登陆</el-button></router-link>
</template>

<script>
</script>

<style scoped>
</style>