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

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

news 来源：原创 2025/8/23 19:03:07

🤟致敬读者

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

📘博主相关

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

文章目录

《从零搭建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 运行服务

菜单栏中Terminal–New 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>

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

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

📜文末寄语

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

文章目录

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

1. 项目创建

1.1 创建命令

1.2 配置镜像源

1.3 创建过程

2. 项目启动

3. 初始化项目

3.1 项目文件（夹）说明

3.2 运行服务

3.3 删除、修改代码

相关文章：