《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
相关推荐
mayaairi26 分钟前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen1 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马2 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu2 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
IT_陈寒2 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端
乘风gg2 小时前
DeepSeek V4.1 Flash 来了,明天中午 Flash 降价 60%
前端·ai编程·claude
默_笙3 小时前
❗ 给金鱼装记忆(上):从白板到笔记本,AI 的短期记忆生存指南
前端·javascript
酷酷的逗逗乐3 小时前
前端转 Agent 开发 · 第五节:Memory 会话记忆
前端·程序员
掘金挖土3 小时前
前端手摸手跑路之 AI 应用开发(二)
前端·后端
兜里只有三分钱~3 小时前
翻卡_3D 的仪式感,和三个让它穿帮的写法
javascript·css·3d