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

相关推荐
归于尽几秒前
深入理解 Tailwind CSS:原子化 CSS 的现代开发范式
前端·css
我想说一句1 分钟前
CSS居中布局:从基础到进阶全解析
前端·javascript
hhy前端之旅2 分钟前
实战项目:用包管理器构建一个豆瓣电影爬虫
前端
今禾3 分钟前
Git 日常使用与面试考点详解:从入门到精通
前端·git·面试
GIS遥遥19 分钟前
从前端框架到GIS开发系列课程(26)在mapbox中实现地球自转效果,并添加点击事件增强地图交互性
前端
小华同学ai23 分钟前
没想到,这也许是Github低代码界天花板,从0到1一分钟搭建系统!这搭建速度没谁啦!!!
前端·后端·github
Mintopia28 分钟前
Next.js 嵌套路由与中间件:数据与逻辑的前哨站
前端·javascript·next.js
Mintopia28 分钟前
AI UI 数据展示:Chart.js / Recharts + AI 总结文本的艺术
前端·javascript·aigc
coding随想33 分钟前
还在用for循环遍历DOM?试试更优雅的NodeIterator与TreeWalker吧
前端
IT码农-爱吃辣条37 分钟前
解决在uniapp真机运行上i18n变量获取不到问题
javascript·vue.js·uni-app