vue3+vite+js+elementPlus项目搭建

---

一、方法一：使用vite生成项目（确保你的 node 版本是16.0.0或更高版本）

Vite 是一个新型的前端构建工具，专为现代前端开发优化。

1.第一步：创建项目，命令如下：

// 创建项目的命令
npm create vite@latest my-vue3-project -- --template vue

2.第二步：创建成功后进入到项目安装依赖：

cd my-vue3-project
npm install

3.第三步：依赖安装完成后运行项目：

npm run dev

运行成功后即可看到访问地址为：http://localhost:3000 ，通过地址可以看到 Vue 项目页面。

项目结构
vite项目结构大致如下啊

src/: 源代码目录。
main.js: 项目的入口文件。
App.vue: 根组件。
components/: 存放组件的目录。
public/: 公共资源目录。
package.json: 项目的配置文件，包含依赖信息和脚本命令
vite.config.js: vite的配置文件

4.第四步：安装 vue-router 配置vue路由，安装命令如下 ：

npm install vue-router

1、将App.vue默认的内容删除

<template>
    <router-view/>
</template>
<script setup>
 
</script>
 
<style scoped>
 
</style>

2、在 src 目录下创建 views 文件夹，并创建 home.vue 文件，用来存放我们的vue页面,想写多少写多少

3、在 src 目录下创建 router 文件夹，并创建 index.js 文件这里创建的是我们的路由配置文件，我们可以将路由全部写在里面，因为有些项目可能页面会很多，所以建议创建不同的文件夹来分块，在这个文件里面也可以进行路由守卫和拦截器的书写

4、在 main.js 中引入路由

import {
    createApp } from 'vue'
import App from './App.vue'
impo