一、创建vue3项目步骤

要创建一个Vue 3 + Element UI的项目，你可以按照以下步骤进行操作：
1.确保你已经安装了Node.js和npm（Node.js的包管理器）。你可以在命令行中运行以下命令来检查它们是否已经安装：

   node -v
   npm -v

2.使用Vue CLI来创建一个新的Vue项目。在命令行中运行以下命令：

	 npm install -g @vue/cli
	 vue create my-project

这将安装Vue CLI并创建一个名为my-project的新项目。在创建项目时，你可以选择手动选择特性或使用默认配置。
3. 进入到项目目录中：

   cd my-project

4.安装Element UI。在命令行中运行以下命令：

   npm install element-plus

5.在项目中使用Element UI。在你的Vue应用的入口文件（通常是src/main.js）中，添加以下代码：

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

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

这将引入Element UI库，并将其作为Vue应用的插件使用。
6. 运行项目。在命令行中运行以下命令来启动开发服务器：

   npm run serve

这将启动开发服务器，并在浏览器中打开你的Vue应用。
现在，你已经成功创建了一个Vue 3 + Element UI的项目。你可以根据需要在项目中使用Element UI的组件和样式。
也可以手动打开此网址。

二、项目结构说明

在Vue 3中，通常使用Vue CLI来创建和管理项目，它会自动生成一套默认的目录结构。下面是一个典型的Vue 3项目的目录结构说明：

my-project/
  |- public/
  |  |- index.html
  |
  |- src/
  |  |- assets/
  |  |- components/
  |  |- views/
  |  |- App.vue
  |  |- main.js
  |
  |- package.json
  |- vue.config.js
  |- README.md

• public/：这个目录包含了公共的静态资源，如index.html文件和其他不需要经过构建处理的文件。

• src/：这个目录是项目的主要源代码目录。

• assets/：这个目录用于存放项目的静态资源，如图片、样式文件等。

• components/：这个目录用于存放项目的可复用组件。

• views/：这个目录用于存放项目的页面组件。

• App.vue：这是项目的根组件，包含了整个应用的布局和路由视图的渲染。

• main.js：这是项目的入口文件，用于初始化Vue应用并挂载根组件。

• package.json：这个文件是项目的配置文件，包含了项目的依赖和脚本等信息。

• vue.config.js：这个文件是Vue CLI的配置文件，用于自定义构建配置和开发服务器等选项。

• README.md：这个文件是项目的说明文档，通常包含了项目的介绍、安装和使用方法等信息。
  这只是一个简单的目录结构示例，实际的项目可能会根据需求和团队的偏好进行调整和扩展。

三、安装路由

在Vue 3中，你可以使用Vue Router来进行路由管理。要在路由配置中添加新页面的路由，你可以按照以下步骤进行操作：
1.在你的Vue项目中，确保已经安装了Vue Router。如果没有安装，可以使用以下命令进行安装：

   npm install vue-router

判断是否安装成功可以看一下package.json是否显示vue-router的版本号

2.在项目的src文件中，创建一个新的文件夹router，里面放置index.js，用于配置路由。src/router/index.js

3.在此文件中，导入Vue和Vue Router，并创建一个新的路由实例。示例代码如下：

   import { createRouter, createWebHistory } from 'vue-router'
   import Indexfrom '../views/Index/IndexPage.vue'

   const routes = [
     {
       path: '/',
       name: 'Index',
       component: Index
     }
   ]

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

   export default router

在上面的示例中，我们将路由实例作为Vue应用的插件使用。
现在，你已经成功在路由配置中添加了新页面的路由。你可以根据需要继续添加其他页面的路由配置。
4.在Vue 3应用程序的入口文件（通常是main.js）中使用了上述路由配置。示例代码如下：

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

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

我们将路由配置通过 use 方法注入到Vue应用程序中。

报错处理：

error Component name “XXX” should always be multi-word vue/multi-word-component-
这些错误信息是由Vue的ESLint插件生成的，用于检查和提醒开发者在Vue组件中的一些最佳实践和规范。如果出现这种错误，要么选择规范自己的代码，要么选择关闭验证。其他的处理情况可以进行百度。
可以在package.json文件里面添加rule规则：

"rules": {
	"vue/multi-word-component-names": "off"
}

四、创建首页并显示内容

indexPage.vue文件内容：

<template>
	<!-- 页面内容 -->
	<div>
		你好
	</div>
</template>

<script>
	export default {
		name: 'Index',
		// 组件逻辑代码
	}
</script>

<style>
	/* 样式规则 */
</style>

router/index.js文件：

import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Index from '../views/Index/IndexPage.vue'

const routes = [{
	path: '/',
	name: 'Index',
	component: Index
}]

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

export default router

App.vue文件：

<template>
	<div id="app">
		<router-view></router-view>
	</div>
</template>

<script>
export default {
  name: 'App',
  components: {
  
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

（一）如果运行没有效果，（以下和上面项目目录文件等不关联，这里只是举例）可能有以下几个原因：

1.检查路由配置：确保你的路由配置正确，并且将根路径 / 与 index 组件关联起来。在路由配置文件中，确保你有类似以下的代码：

   import { createRouter, createWebHistory } from 'vue-router';
   import Index from '@/views/Index.vue';

   const routes = [
     {
       path: '/',
       name: 'Index',
       component: Index
     },
     // 其他路由配置...
   ];

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

   export default router;

2.检查入口文件：在入口文件（通常是 main.js）中，确保你正确地使用了路由配置。示例代码如下：

   import { createApp } from 'vue';
   import router from './router';
   import App from './App.vue';

   createApp(App).use(router).mount('#app');

确保你使用了正确的路由配置文件，并将其通过 use 方法注入到Vue应用程序中。
3. 检查组件名称：确保你的 index 组件的名称与路由配置中的组件名称一致。在 Index.vue 文件中，确保你有类似以下的代码：

   <template>
     <!-- 页面内容 -->
   </template>

   <script>
   export default {
     name: 'Index',
     // 组件逻辑代码
   }
   </script>

   <style>
   /* 样式规则 */
   </style>

确保 name 属性的值与路由配置中的组件名称一致。
4.路由出口：在你的根组件（通常是App.vue）中，确保你有一个路由出口（）来渲染对应的页面。

   <template>
     <div id="app">
       <!-- 其他内容... -->
       <router-view></router-view>
     </div>
   </template>

五、跳转页面

路由链接：如果你在其他页面或组件中需要导航到views/Index/IndexPage页面，确保你使用了正确的路由链接。
【此处是根据你的命名写法来，代码不可生硬照搬】

  <router-link to="/index">Go to Index Page</router-link>

写法还有其他形式