vue3项目的初始配置（有element-plus和router）

在此声明不保证正确，只是个人经验，如果发现错误会更改内容。

把一个空白文件夹在vscode里面打开，然后打开终端，输入yarn create vite my-vue-app --template vue就快速创建了一个vue3项目的文件夹，然后在终端cd进入文件夹my-vue-app(cd my-vue-app)，用yarn install配置文件（弄好后会多一个node_modules）,然后输入yarn dev将地址复制到游览器就行了

安装element-plus，终端输入yarn add element-plus，
完整引入：把src里面的main.js里面的换为官网里的，如下：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

终端输入yarn add vue-router 安装vue-router,然后在src里新建一个文件夹router，里面新建一个文件index.js,写入

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
    {
        path: '/',
        component:()=>import('../views/Main.vue'),
        children:[
            {
                path:'/',
                name:'home',
                component:()=>import('../views/home/Home.vue'),
            }
        ]
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

将main.js里面相应的加上

import router from './router'
app.use(router)

在App.vue里面template 改为

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

在src里面新建一个文件夹views里面新建一个Main.vue，在Main.vue里面写入

<template>
    <div>
    左侧菜单
    </div>
    <div>
    头部
    </div>
    <div>
    这个部分是变化的
    <router-view />
    </div>
</template>

在views里新建一个文件夹home里面新建一个Home.vue写入

<template>
    <div>
        我是home
    </div>
</template>