第1天

1. 启动vite项目

npm create vite@latest

2.配置

less vue-router element-plus
npm install less vue-router element-plus -s
npm install @element-plus/icons-vue -s

3. 引入样式文件，把样式文件放到asset文件夹中
4. 路由的创建

import { createRouter, createWebHashHistory } from 'vue-router'
//指定路由规则
const routes = [
    {
        path: '/',
        name: "main",
        component: () => import('../views/Main.vue')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router;

在main.js中记得引入路由

import { createApp } from 'vue'
import App from './App.vue'
import "../src/assets/less/index.less"
import router from "./router"

const app = createApp(App)
app.use(router).mount('#app')

7. 实现Main组件

<template>
  <div>我是main组件</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在App.vue中加入Main组件，用router-view的方式

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

<script>
export default {

}
</script>

<style>

</style>

最终的结果就是这样啦：