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

《从零搭建Vue3项目实战》(AI辅助搭建Vue3+ElemntPlus后台管理项目)零基础入门系列第二篇:项目创建和初始化

🤟致敬读者

  • 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉

📘博主相关

  • 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息

文章目录

  • 《从零搭建Vue3项目实战》(AI辅助搭建Vue3+ElemntPlus后台管理项目)零基础入门系列第二篇:项目创建和初始化
    • 1. 项目创建
      • 1.1 创建命令
      • 1.2 配置镜像源
      • 1.3 创建过程
    • 2. 项目启动
    • 3. 初始化项目
      • 3.1 项目文件(夹)说明
      • 3.2 运行服务
      • 3.3 删除、修改代码


📃文章前言

  • 🔷文章均为学习工作中整理的笔记。
  • 🔶如有错误请指正,共同学习进步。

《从零搭建Vue3项目实战》(AI辅助搭建Vue3+ElemntPlus后台管理项目)零基础入门系列第二篇:项目创建和初始化

从零搭建Vue3项目实战,借助AI工具辅助学习和代码生成,零基础小白亦可轻松上手实现。

以下为系列篇所有文章:
《从零搭建Vue3项目实战》零基础入门系列第一篇:开发环境准备
《从零搭建Vue3项目实战》零基础入门系列第二篇:项目创建和初始化
《从零搭建Vue3项目实战》零基础入门系列第三篇:ElementPlus引入和应用
《从零搭建Vue3项目实战》零基础入门系列第四篇:登录页面实现
《从零搭建Vue3项目实战》零基础入门系列第五篇:登录页面优化及使用AI学习代码
《从零搭建Vue3项目实战》零基础入门系列第六篇:页面跳转功能实现(Router的引入和使用)
《从零搭建Vue3项目实战》零基础入门系列第七篇:菜单栏实现
《从零搭建Vue3项目实战》零基础入门系列第八篇:菜单栏优化和阶段项目源码
《从零搭建Vue3项目实战》零基础入门系列第九篇:用户管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十篇:商品管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十一篇:订单管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十二篇(完结篇):数据统计功能实现
《从零搭建Vue3项目实战》零基础入门一篇通关(AI辅助搭建Vue3+ElemntPlus后台管理项目)

系列文章均收录在前端vue3入门实战专栏中,可订阅专栏了解更多内容

1. 项目创建

1.1 创建命令

在任意文件夹下(这里创建一个vue3文件夹),路径中输入cmd回车,打开cmd窗口
在这里插入图片描述

输入命令

npm create vue

1.2 配置镜像源

如果由于网络问题,通过默认的node地址拉取失败
可参考如下,将拉去地址修改为淘宝镜像地址,最新的淘宝镜像源已更新为

npm config set registry https://registry.npmmirror.com

回车后再用下面命令查看更新后的镜像地址

npm config get registry

然后再次执行创建命令

npm create vue

1.3 创建过程

创建过程如下
输入y继续创建
在这里插入图片描述

输入项目名称,这里自定义为vue3-demo001
然后回车
选择需要的模块,这里直接选择Router和Pinia,上下箭头切换,空格键选择,回车确认
在这里插入图片描述

回车后,创建成功
项目生成后,输出内容中有三条命令如下图红框
在这里插入图片描述


2. 项目启动

依次执行红框中的三条命令,运行项目

cd vue3-demo001
npm install
npm run dev

执行结束后如下,会有本地的服务访问地址,如红框
在这里插入图片描述

浏览器输入访问地址即可访问服务,如下访问成功
在这里插入图片描述


3. 初始化项目

创建后的项目,页面是默认的,很多东西不需要,不删除的话对后续的页面效果会有影响
在删之前我们先用VSCode打开项目文件夹(后续就在VSCode中开发项目)
注:将之前打开的cmd窗口(服务运行的窗口)关闭

3.1 项目文件(夹)说明

选择项目文件夹,鼠标右键使用VSCode打开
在这里插入图片描述

项目文件夹中的各文件夹和文件的描述:参考文章–vue项目结构详解
在这里插入图片描述

3.2 运行服务

菜单栏中TerminalNew Terminal打开终端窗口
在这里插入图片描述

执行命令运行项目

npm install
npm run dev

输出内容中有Local:本地访问地址
按Ctrl+鼠标左键点击地址即可跳转到服务页面
在这里插入图片描述

3.3 删除、修改代码

删除代码如下
需要删除的文件
src/components/HelloWorld.vue
src/components/TheWelcome.vue
src/components/WelcomeItem.vue
src/views/AboutView.vue

删除以下红框中的文件
在这里插入图片描述

需要修改的文件
src/App.vue
src/main.js
src/views/HomeView.vue
如如中红框(AboutView.vue除外)
在这里插入图片描述

App.vue
对App.vue文件进行修改如下
将内容删除,只留框架,并引入router-view标签,动态加载
代码如下

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

main.js
对main.js文件的修改如下
将样式注释,否则内容会被默认样式设置为居中
代码如下

// import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

HomeView.vue
对HomeView.vue文件的修改如下
将内容删除只留框架
代码如下

<script setup></script><template><div>HomeView</div>
</template><style scoped></style>

运行项目,访问页面,页面如下
在这里插入图片描述

经过以上操作,项目的初始化状态完成,接下来就可以开始项目的开发


📜文末寄语

  • 🟠关注我,获取更多内容。
  • 🟡技术动态、实战教程、问题解决方案等内容持续更新中。
  • 🟢《全栈知识库》技社区,集结全栈各领域开发者,期待你的加入。
  • 🔵​加入开发者的《专属社群》,分享交流,技术之路不再孤独,一起变强。
  • 🟣点击下方名片获取更多内容🍭🍭🍭👇


http://www.mrgr.cn/news/97476.html

相关文章:

  • RAG中构建个人知识库
  • Python高级爬虫之JS逆向+安卓逆向1.2节: 变量与对象
  • 从传递函数到PID控制器
  • C++20 统一容器擦除:std::erase 和 std::erase_if
  • nacos集群启动问题
  • 2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡
  • 【Vue】选项卡案例——NBA新闻
  • Linux学习笔记(1) 目录结构与路径描述:对比 Windows 系统差异(期末,期中复习笔记全)
  • 前缀和和差分笔记
  • 【JS】二分查找
  • 【Pandas】pandas DataFrame astype
  • 4月7日随笔
  • 内网文件传输新体验,聊天、传输、自定义,一应俱全
  • C++中常用的十大排序方法之4——希尔排序
  • Redlinux(2025.3.29)
  • rhcsa第三次作业
  • 手搓多模态-06 数据预处理
  • 操作系统概述(3)
  • nginx管理nacos集群地址
  • 剖析AI与5G:是夸大其词,还是时代变革的引擎?-优雅草卓伊凡