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

🤟致敬读者

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

📘博主相关

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

---

---

📃文章前言

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

---

《从零搭建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>

运行项目，访问页面，页面如下

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

4. 源码

初始化源码
CSDN下载：前端 vue3 vue3入门实战 从零搭建vue3+element-plus后台管理项目 阶段0项目源码 项目初始化源码

---

📜文末寄语

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

---