《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
相关推荐
浪裡遊7 分钟前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表13 分钟前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子1 小时前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色1 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz1 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom1 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1232 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023372 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦2 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js