当前位置：首页 > news >正文

前端vue代码架子搭建

news 2026/3/26 19:38:13

嘿，未来的全栈大佬们，欢迎光临「乌龙小漫馆」！🎪
听说写代码最痛苦的不是写不出来，而是明明觉得逻辑完美，运行起来却全是“惊喜”？没错，这个项目就是专门收集这些“惊喜”的博物馆。
在这个系列里，我就是那个负责“搞事情”的主角，而你们是我的见证官。我要把开发「乌龙小漫馆」路上遇到的每一个坑、每一个雷、每一个让人哭笑不得的“乌龙”事件，统统记录下来，写成一篇篇热气腾腾的技术文章。
这里没有枯燥的说教，只有：
😱 “天哪，原来这里会崩！”的惊魂时刻。
🧐 “哦~原来原理是这样！”的顿悟瞬间。
🛠️ “看我用这招轻松搞定！”的实操秘籍。
哪怕你是技术小白，也能在看热闹中学到门道；哪怕你是资深大牛，或许也能在这些“乌龙”中找到一丝共鸣（或者笑点）。
既然坑已经挖好了，不如我们一起跳进去……啊不，是一起把它填平，顺便盖座楼！
📝系好安全带，我们的“填坑”之旅正式发车！

一.详细步骤

1.查看是否安装了vue和node

2.创建vue项目（核心）

3.查看创建结果

4.运行vue项目ai-wulong-web

5.关闭vue项目

二.vue项目结构解析

三.安装插件

四.将上述插件配置到项目中

1.配置路由

2.配置Element-Plus库

3.App.vue的代码清理和理解

结语

一.详细步骤

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中编写如下代码

import {createRouter,createWebHistory} from 'vue-router' //-创建路由 let router = createRouter({ history: createWebHistory(), //-请求与组件的对应关系 routes:[ ] }) //-导出当前的router对象 export default router