1.创建项目（项目名为my-vue-project）
npm create vite@latest my-vue-project -- --template vue运行命令npm -v，查看npm版本号，如果是npm 7或更高版本运行以上命令即可。如果是npm 6或更低版本，使用npm create vite@latest my-vue-project --template vue创建项目。
根据提示，依次运行提示的3条命令：
cd my-vue-projectnpm installnpm run dev
项目启动后，会默认开启一个本地服务，点击或者在浏览器中输入http://localhost:5173/网址，浏览器显示结果如下图：
2.删除项目中的不必要的代码
删除src/main.js中导入默认样式的语句：
import './style.css'然后删除src/style.css样式文件。
将App.vue中的内容删除到只剩以下代码即可：
<script setup></script><template>
123
</template><style scoped></style>删除src\components\HelloWorld.vue文件，不需要该文件。
3.下载必备的依赖
npm install less
npm install vue-router
npm install element-plus
npm install @element-plus/icons-vue先在终端Ctrl+C停掉项目，然后依次输入以上命令。
4.为项目的src文件夹配置别名“@”方便后续使用：
在vite.config.js文件中添加别名：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],// 添加别名, 使得在项目中可以使用 @ 代替 /srcresolve: {alias: {'@': '/src'}}
})
5.复制图片等静态资源到assets文件夹中
文件内容在百度网盘：
链接: https://pan.baidu.com/s/14Y2krFCGM-ximN-AZpOioA?pwd=8888 提取码: 8888
复制images和less文件夹到到src\assets文件夹中：
6.在src/mian.js中引入样式文件
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"测试：在命令行运行npm run dev查看浏览器源代码，body的样式为background-color: #f5f5f5;
说明@别名能够正常使用，样式能够正常显示。
