Vue的开发常用的工具有哪些?

news2025/1/22 21:43:41

相比其他大型框架,Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,也可以将Vue引入到一个现有的项目中。代码简洁、上手容易,深受开发者青睐。本节我们将对Vue的开发环境以及常用工具的使用进行讲解。

1.Visual Studio Code编辑器

Visual Studio Code(VS Code)是由微软公司推出的一款免费、开源的编辑器,推出之后便很快流行起来,深受开发者的青睐。作为前端开发人员来说,一个强大的编辑器可以让开发变得简单、便捷、高效。本书选择基于VS Code编辑器进行讲解。

VS Code编辑器具有如下特点:

(1)轻巧极速,占用系统资源较少。

(2)具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。

(3)跨平台。不同的开发人员为了工作需要,会选择不同平台来进行项目开发工作,这样就一定程度上限制了编辑器的使用范围。VSCode编辑器不仅跨平台(支持Mac、Windows以及Linux),使用起来也非常简单。

(4)主题界面的设计比较人性化。例如,可以快速查找文件直接进行开发,可以通过分屏显示代码,主题颜色可以进行自定义设置(默认是黑色),也可以快速查看最近打开的项目文件并查看项目文件结构。

(5)提供了丰富的插件。VSCode提供了插件扩展功能,用户根据需要自行下载安装,只需在安装配置成功之后,重新启动编辑器,就可以使用此插件提供的功能。

2.git-bash命令行工具

在进行Vue开发时,我们经常会使用一些命令,如npm(包管理器)、vue-cli(脚手架),这些命令需要在命令行下使用。git-bash是git(版本管理器)中提供的一个命令行工具,外观类似于Windows系统内置的cmd命令行工具,但用户体验更友好。在实际开发中,经常会使用git-bash工具代替cmd。下面我们就来讲解git-bash的安装步骤。

(1)打开git for windows官网,下载git安装包,如小图所示。

在这里插入图片描述
(2)双击下载后的安装程序,进行安装

在这里插入图片描述
(3)单击“Next”按钮,根据提示进行安装,全部使用默认值即可。

(4)安装成功后,启动git-bash。
在这里插入图片描述
3.Node.js环境

Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它可以让JavaScript运行在服务器端。接下来我们就对Node.js的下载和安装进行详细讲解。

(1)打开Node.js官方网站,找到Node.js下载地址

在这里插入图片描述
Node.js有两个版本,LTS(Long Term Support)是提供长期支持的版本,只进行微小的Bug修复且版本稳定,因此有很多用户在使用;Current是当前发布的最新版本,增加了一些新特性,有利于进行新技术的开发使用。这里选择LTS版本进行下载即可。

(2)双击安装包进行安装

在这里插入图片描述
(3)安装过程全部使用默认值。安装完成后,打开git-bash命令行工具,查看Node.js版本信息

在这里插入图片描述
(4)将Node.js安装完成后,下面我们通过代码演示HelloWorld程序的编写。创建C:\vue\chapter01目录,在该目录中创建helloworld.js文件,编写如下代码:
在这里插入图片描述
(5)保存文件后,执行如下命令,启动Hello World程序:
在这里插入图片描述
(6)上述代码执行后
在这里插入图片描述
(7)Node.js还提供了交互式环境REPL,类似Chrome浏览器的控制台,可以在命令行中直接输入JavaScript代码来执行。在命令行中执行node命令,即可进入交互模式

在这里插入图片描述
(8)若要从交互模式中退出,可以输入“.exit”并按Enter键,或者按两次Ctrl+C组合键来退出。

4.npm包管理工具

npm(Node.jsPackage Manager)是一个Node.js的包管理工具,用来解决Node.js代码部署问题。在安装Node.js时会自动安装相应的npm版本,不需要单独安装。使用npm包管理工具可以解决如下场景的需求。

(1)从npm服务器下载别人编写的第三方包到本地使用。

(2)从npm服务器下载并安装别人编写的命令程序到本地使用。

(3)将自己编写的包或命令行程序上传到npm服务器供别人使用。npm提供了快速操作包的命令,只需要简单命令就可以很方便地对第三方包进行管理,下面列举npm中的常用命令。

npm install:安装项目所需要的全部包,需要配置package.json文件。

npm uninstall:卸载指定名称的包。

npm install包名:安装指定名称的包,后面可以跟参数“-g”表示全局安装,“–save”表示本地安装;

npm update:更新指定名称的包;

npm start:项目启动;通过CDN方式引入Vue,可以缓解服务器的压力,加快文件的下载速度。目前,网络上有很多免费的CDN服务器可以使用

npm run build:项目构建。

多学一招:由于npm的服务器在国外,使用npm下载软件包的速度非常慢,为了提高下载速度,推荐读者切换成国内的镜像服务器来使用。以淘宝NPM镜像为例,使用如下命令设置即可切换。
在这里插入图片描述
5.Chrome浏览器和vue-devtools扩展

浏览器是开发和调试Web项目的工具,目前市面上主流的浏览器都有自己的优点和缺点,本书选择基于使用量较多的Chrome浏览器进行讲解。

vue-devtools是一款基于Chrome浏览器的扩展,用于调试Vue应用,只需下载官方压缩包,配置Chrome浏览器的扩展程序即可使用。下面我们简单介绍一下安装流程。

(1)下载vue-devtools-5.1.1.zip压缩包到本地。

(2)将压缩包进行解压,然后在命令行中切换到解压好的vue-devtools-5.1.1目录,输入以下命令进行依赖安装:

在这里插入图片描述
(3)构建vue-devtools工具插件,执行命令如下。

在这里插入图片描述
4)将插件添加至chrome浏览器。单击浏览器地址栏右边的“”按钮,在弹出的菜单中选择“更多工具”→“扩展程序”

在这里插入图片描述
单击“加载已解压的扩展程序”按钮,此时会弹出选择框,需要用户选择扩展程序目录。找到vue-devtools-5.1.1/shells/chrome目录,将其添加到扩展程序中。

(5)配置完成后,可以看到当前vue-devtools工具的信息,并在Chrome浏览器窗口的右上角会显示Vue的标识

在这里插入图片描述

vue.js教程

vue2.0到vue3.0一套全覆盖,前端必会的框架教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408337.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)

系列文章目录 内容参考链接JavaScript 面试高频考点HTML、CSS、JavaScript、ES6、AJAX、HTTP 面试考点 Vue2.x 面试高频考点Vue2.x 面试高频考点Vue3.x新增API生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式Vue3.x升级的重要功能emits属性、生命周期、多事件…

React初体验-Hello React的组件化方式-React入门小案例

文章目录React初体验Hello React案例演练Hello React案例升级Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例React初体验 接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引…

〖大前端 - 基础入门三大核心之CSS篇⑲〗- CSS精灵的使用 与 background综合属性

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐…

vue pc项目 router.js 配置详解 ,vue项目中路由懒加载的正确使用,vue实现动态路由一步到位

这个是我之前一个项目的router.js 文件 xmjd import Vue from vue import http from ./plugins/axios import Router from vue-router import { getChnPinyin } from "/utils/chnpinyin"; import { clearLoginInfo, handlerMenu } from /utilsVue.use(Router) // 解…

css清除浮动的四种方法(详细)

浮动带来的影响 清除浮动主要是为了解决&#xff0c;父元素因为子级元素浮动引起的内部高度为0的问题 看下面一段代码 <div class"fater"><div class"box1">one</div><div class"box2">two</div></div> …

VUE中调用高德地图获取当前位置(VUE2.0和3.0通用)

标签&#xff1a; Vue vue 定位 js javascript1、去高德开放平台获取高德地图KEY地址&#xff1a;https://lbs.amap.com/注意&#xff1a;这里一定要选择WEB端的KEY&#xff0c;不要选择WEB服务的KEY&#xff0c;否则拿不到数据2、去项目中引入KEY&#xff0c;也就是CDN&#x…

基于RuoYi框架自动生成后端代码及前端界面

&#x1f3c0;&#xff08;1&#xff09;序言 &#x1f438;近来工作临近项目周期尾声&#xff0c;基本都是每天加班到晚上8到9点的节奏&#xff0c;似乎每年到10月份之际都是一个忙碌月&#xff0c;不知道这是一个&#x1f436;行业规律&#x1f436;还是仅仅对我而言的一个&a…

在vue中使用FullCanlendar实现日历预约会议室功能

最近接到任务,让实现一个预约功能,让我找找插件,需求是这个样子滴 明白任务以后,那咱就开抄呗~(bushi 开找 经过一番寻找,最后我决定使用FullCalendar,为啥用这个呢,你看它样子长的像不像我的需求,虽然说不上是有一些像吧,但简直就是一模一样. 更关键的是这玩意有很全的文档(但…

H5移动端适配方案rem/vw

前言 在讲解适配方案之前&#xff0c;我们聊聊为什么要做适配&#xff1f; 因为视口、逻辑像素、分辨率这些变量的不同&#xff0c;在每个设备展示都不一样&#xff0c;需要一种方案来统一。 物理像素&#xff1a;也就是分辨率&#xff0c;一个物理像素是显示器上的最小的物…

项目无法识别 ?. 语法,导致报错Module parse failed: Unexpected token

一、第一种情况是如果你需要引入的组件库源码的过程中&#xff0c;比如你要import一个封装好的组件这种场景&#xff1a; 首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包&#xff0c;然后在导入的时候报这个语法错&#xff0c;那你可以接着往下…

【前端趋势】Vue、Vite作者尤雨溪前端趋势2022主题演讲

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f308;博客主页&#x1f449;codeMak1r.的博客 最新专栏【React–从基础到实战】…

Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项

问题重现 最近在做项目时&#xff0c;有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态&#xff1b;我使用到了 Vant UI 组件&#xff0c;首先按照官网文档的写法直接引入&#xff1a; <!--下拉折叠面板--><van-collapse class"collapse" …

vue路由的安装和使用

TOCVue 路由 vue-router 1 安装vue-router npm i vue-router -s 2 创建路由模块 // src/router/index.js就是当前项目的路由模块 // 1 导入Vue 和VueRouter的包 import Vue from vue import VueRouter from vue-router // 导入路由要用到的组件 import Home from ../component…

【TypeScript介绍】一文带你初步了解TypeScript

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 今天开始学习学习TypeScript这门语言&#xff01; 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录TypeScript介绍1. TypeScript是什么2. TypeScript为什么要…

大文件上传

大文件上传原理 当我们在做文件上传的功能时&#xff0c;如果上传的文件过大&#xff0c;可能会导致长传时间特别长&#xff0c;且上传失败后需要整个文件全部重新上传。因此&#xff0c;我们需要前后端配合来解决这个问题。 最常用的解决方案就是 —— 切片上传。 这次我们…

图文详解uni-app PC端宽屏适配方案

图文详解uni-app PC端宽屏适配方案 随着互联网的发展&#xff0c;iOS、Android、H5以及各种小程序快应用层出不穷&#xff0c;随之而来的问题就是如何用一套代码&#xff0c;适配多个平台&#xff0c;其中uni-app表现优异&#xff0c;已经实现了手机端全覆盖&#xff0c;支持i…

【JavaScript速成之路】JavaScript对象

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言1&#xff0c;初识对象1.1&#xff0c;对象概念1.2&#xff0c;对象创建1.2.…

手撕前端面试题【JavaScript】

前端的那些基本标签&#x1f353;&#x1f353; 浅拷贝&#x1f353;&#x1f353;简易深拷贝&#x1f353;&#x1f353;深拷贝&#x1f353;&#x1f353;什么是深拷贝&#xff0c;什么是浅拷贝&#xff0c;二者有什么区别&#xff0c;平时改怎么区分呢&#xff1f;&#x1f…

vue3.0本地引入vue.js

第一步获取vue版本 Vue的各种版本介绍&#xff1a; cjs&#xff08;两个版本都是完整版&#xff0c;包含编译器&#xff09; vue.cjs.js vue.cjs.prod.js&#xff08;开发版&#xff0c;代码进行了压缩&#xff09; global&#xff08;这四个版本都可以在浏览器中直接通过…

Vue中 provide、inject 详解及使用

传送门&#xff1a;Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门&#xff1a;Vue中 状态管理器&#xff08;vuex&#xff09;详解及应用场景 传送门&#xff1a;Vue中 $ attrs、$ listeners 详解及使用 传送门&#xff1a;Vue中 事件总线&#xff08;eventBus&#x…