《从零搭建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 运行服务
菜单栏中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>
运行项目,访问页面,页面如下
经过以上操作,项目的初始化状态完成,接下来就可以开始项目的开发
📜文末寄语
- 🟠关注我,获取更多内容。
- 🟡技术动态、实战教程、问题解决方案等内容持续更新中。
- 🟢《全栈知识库》技社区,集结全栈各领域开发者,期待你的加入。
- 🔵加入开发者的《专属社群》,分享交流,技术之路不再孤独,一起变强。
- 🟣点击下方名片获取更多内容🍭🍭🍭👇