《Vue零基础入门教程》第二课:搭建开发环境

往期内容:

《Vue零基础入门教程》第一课:Vue简介

1 搭建开发环境

Vue环境分为两种

  • 不使用构建工具
  • 使用构建丁具

首先,我们会介绍 不使用构建工具 的环境,在组件化章节中介绍使用构建工具的方式

1) 初始化

使用如下指令初始化

复制代码
npm init -y

发现在目录下会多一个文件package.json, 这个文件用来管理该项目使用了哪些包

2) 安装vue

执行如下命令安装vue

复制代码
npm install vue

以上命令可以简写为

复制代码
npm i vue

在项目目录会产生一个文件夹node_modules和一个文件package-lock.json

在package.json文件中, 会多如下内容

目前, Vue的默认最新版本是3.2

在node_modules里可以找到vue/dist

📖 vue的各种版本说明

vue.global.js是完整版(在初学阶段使用)

  • esm(ES Module): 使用ES的模块规范导入导出export default
  • runtime: 运行时版本, 相对于编译版本, 体积更小, 效率更高

3) 小结

💡 使用Npm安装Vue分为两步

  1. 项目初始化: npm init -y
  2. 安装vue: npm install vue
相关推荐
Y0011123617 分钟前
JavaWeb-end
java·servlet·web
万少1 小时前
Vibe Coding不停歇,移动端 TRAE SOLO 让你用手机也能编程啦
前端·javascript·后端
kyriewen111 小时前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
开发语言·前端·javascript·c++·单元测试·ecmascript
烛衔溟2 小时前
TypeScript 接口的基本使用 —— 定义对象形状
前端·javascript·typescript
铁皮饭盒3 小时前
成为AI全栈 - 第3课:路由 RESTful Elysia 状态码 设计规范
前端·后端·全栈
顾昂_3 小时前
Web 性能优化完全指南
前端·面试·性能优化
IT乐手3 小时前
Claude Code + Qwen 的配置方法
javascript·claude
前端程序媛-Tian3 小时前
前端 AI 提效实战:从 0 到 1 打造团队专属 AI 代码评审工具
前端·人工智能·ai
支付宝体验科技4 小时前
Ant Design Pro v6.0.0 发布
前端
T畅N4 小时前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js