嘿，未来的全栈大佬们，欢迎光临「乌龙小漫馆」！🎪
听说写代码最痛苦的不是写不出来，而是明明觉得逻辑完美，运行起来却全是"惊喜"？没错，这个项目就是专门收集这些"惊喜"的博物馆。
在这个系列里，我就是那个负责"搞事情"的主角，而你们是我的见证官。我要把开发「乌龙小漫馆」路上遇到的每一个坑、每一个雷、每一个让人哭笑不得的"乌龙"事件，统统记录下来，写成一篇篇热气腾腾的技术文章。
这里没有枯燥的说教，只有：
- 😱 "天哪，原来这里会崩！"的惊魂时刻。
- 🧐 "哦~原来原理是这样！"的顿悟瞬间。
- 🛠️ "看我用这招轻松搞定！"的实操秘籍。
哪怕你是技术小白，也能在看热闹中学到门道；哪怕你是资深大牛，或许也能在这些"乌龙"中找到一丝共鸣（或者笑点）。
既然坑已经挖好了，不如我们一起跳进去......啊不，是一起把它填平，顺便盖座楼！
📝 系好安全带，我们的"填坑"之旅正式发车！
目录
[四.将上述插件 配置到项目中](#四.将上述插件 配置到项目中)
一.详细步骤
1.查看是否安装了vue和node
进入cmd控制台，输入以下命令（注意两个v的大小写）。
如下图，可见此时安装了node和vue
2.创建vue项目（核心）
3.查看创建结果
4.运行vue项目ai-wulong-web
运行效果
5.关闭vue项目
按ctrl + c即可
二.vue项目结构解析
三.安装插件
用vs code打开vue项目
然后在控制台输入如下命令（一行一行执行）：
- npm install vue-router 路由（地址和页面的匹配）
- npm install axios 用来发送网络请求
- npm install element-plus 基于vue3的组件库（按钮、表单等）
- npm install pinia 用于状态管理
- npm install pinia-plugin-persistedstate 和pinia是配套的
- npm install font-awesome 图标库（里面有精美的小图片）
- npm install qs 用于设置网络数据的传输格式
四.将上述插件 配置到项目中
1.配置路由
①在src下，创建router/index.js，并在index.js中编写如下代码
javascript
import {createRouter,createWebHistory} from 'vue-router'
//-创建路由
let router = createRouter({
history: createWebHistory(),
//-请求与组件的对应关系
routes:[
]
})
//-导出当前的router对象
export default router②在main.js中，配置路由（这样在项目加载main.js文件时，我们的项目就有了路由）
2.配置Element-Plus库
3.App.vue的代码清理和理解
App.vue一般不用来写具体的页面，而是写一个router-view 标签。
五.最终再次运行一下项目，保证不报错
此时证明项目成功运行，我们就不打开了，打开也没内容，因为App.vue被我们清理了。
结语
以上就是vue项目的搭建和准备，我们写项目时，需要的话就可以参考一波~
以上就是本篇文章的全部内容，喜欢的话请关注本博主~