零基础Vue学习1——Vue学习前环境准备

目录

环境准备

创建Vue项目

项目目录说明

后续开发过程中常用命令


环境准备

  1. 安装开发工具:vscode、webstorm、idea都可以
  2. 安装node:V22以上版本即可
  3. 安装pnpm

不知道怎么安装的可以私信我教你方法

创建Vue项目

本地新建一个文件夹,之后在文件夹下打开命令行,执行如下命令:

复制代码
// 创建vue3项目
pnpm create  vue@latest 

项目名字my-vue3-demo

每一步选项按照下面截图选择即可

之后使用idea打开对应的项目文件夹my-vue3-demo,执行安装依赖命令:

复制代码
// 安装依赖
pnpm install

项目目录说明

复制代码
my-vue3-demo // 项目名称
├── dist // 打包之后生成的文件
├── node_modules // 依赖包
├── public // 静态资源
│   └── favicon.ico // 图标
├── src // 源码
│   ├── assets // 静态资源
│   │   └── logo.png
│   ├── components // 组件
│   ├── router // 路由配置文件
│   ├── store // 状态管理文件
│   ├── views // 页面
│   ├── App.vue // 页面入口文件
│   ├── main.ts // 实例入口文件
├── package.json  // 配置文件
├── pnpm-lock.yaml // 依赖包版本
├── tsconfig.json // ts配置文件
├── vite.config.ts // vite配置文件
├── .gitignore // git忽略文件
├── .eslintrc.js // eslint配置文件
├── .prettierrc // 格式化配置文件
├── .editorconfig // 编辑器配置文件
└── README.md // 项目说明

后续开发过程中常用命令

复制代码
pnpm install // 安装依赖
pnpm run dev // 运行项目
pnpm run build // 打包项目
pnpm run preview // 预览打包
pnpm run help // 查看帮助

我在gitcode上也建了了对应的vue学习项目,会跟随我的专栏进行定期代码更新,欢迎克隆下载GitCode - 全球开发者的开源社区,开源代码托管平台


继续下一节:零基础Vue学习2------Vue介绍-CSDN博客

相关推荐
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
执笔论英雄8 小时前
【大模型学习cuda】入们第一个例子-向量和
学习
wdfk_prog8 小时前
[Linux]学习笔记系列 -- [drivers][input]input
linux·笔记·学习
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端