零基础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博客

相关推荐
是你的小橘呀32 分钟前
JavaScript 原型链解密:原来 proto 和 prototype 这么好懂
前端·javascript·前端框架
ohyeah34 分钟前
使用 LocalStorage 实现本地待办事项(To-Do)列表
前端·javascript
Jing_Rainbow35 分钟前
【前端三剑客-6/Lesson11(2025-10-28)构建现代响应式网页:从 HTML 到 CSS 弹性布局再到 JavaScript 交互的完整指南 🌈
前端·javascript
非专业程序员37 分钟前
精读 GitHub - servo 浏览器(一)
前端·ios·rust
武昌库里写JAVA38 分钟前
Java如何快速入门?Java基础_Java入门
java·vue.js·spring boot·后端·sql
Yanni4Night38 分钟前
掌握 JS 中迭代器的未来用法
前端·javascript
Irene199139 分钟前
Element UI 及其 Vue 3 版本 Element Plus 发展现状
前端·vue.js·ui
Account_Ray40 分钟前
vue3 的专属二维码组件 vue3-next-qrcode 迎来 4.0.0 版本
前端·vue.js·nuxt.js
BBB努力学习程序设计43 分钟前
Web App开发入门:页面分析与环境准备全攻略
前端·html
BBB努力学习程序设计1 小时前
超好用的轮播图神器:Swiper插件入门指南
前端·html