前端vue代码架子搭建

嘿未来的全栈大佬们欢迎光临「乌龙小漫馆」听说写代码最痛苦的不是写不出来而是明明觉得逻辑完美运行起来却全是“惊喜”没错这个项目就是专门收集这些“惊喜”的博物馆。在这个系列里我就是那个负责“搞事情”的主角而你们是我的见证官。我要把开发「乌龙小漫馆」路上遇到的每一个坑、每一个雷、每一个让人哭笑不得的“乌龙”事件统统记录下来写成一篇篇热气腾腾的技术文章。这里没有枯燥的说教只有 “天哪原来这里会崩”的惊魂时刻。 “哦~原来原理是这样”的顿悟瞬间。️ “看我用这招轻松搞定”的实操秘籍。哪怕你是技术小白也能在看热闹中学到门道哪怕你是资深大牛或许也能在这些“乌龙”中找到一丝共鸣或者笑点。既然坑已经挖好了不如我们一起跳进去……啊不是一起把它填平顺便盖座楼系好安全带我们的“填坑”之旅正式发车目录一.详细步骤1.查看是否安装了vue和node2.创建vue项目核心3.查看创建结果4.运行vue项目ai-wulong-web5.关闭vue项目二.vue项目结构解析三.安装插件四.将上述插件 配置到项目中1.配置路由2.配置Element-Plus库3.App.vue的代码清理和理解结语一.详细步骤1.查看是否安装了vue和node进入cmd控制台输入以下命令注意两个v的大小写。如下图可见此时安装了node和vue2.创建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②在main.js中配置路由这样在项目加载main.js文件时我们的项目就有了路由2.配置Element-Plus库3.App.vue的代码清理和理解App.vue一般不用来写具体的页面而是写一个router-view 标签。五.最终再次运行一下项目保证不报错此时证明项目成功运行我们就不打开了打开也没内容因为App.vue被我们清理了。结语以上就是vue项目的搭建和准备我们写项目时需要的话就可以参考一波~以上就是本篇文章的全部内容喜欢的话请关注本博主~