安装vue3开发者工具但控制台没有显示出vue选项的解决

目录
  • 安装vue3开发者工具但控制台没有显示出vue选项
    • 解决办法
  • Vue开发常用的工具有哪些?
    • 1.Visual Studio Code编辑器
    • 2.git-bash命令行工具
    • 3.Node.js环境
    • 4.npm包管理工具
    • 5.Chrome浏览器和vue-devtools扩展

安装vue3开发者工具但控制台没有显示出vue选项

安装好了插件,并且选择钉在页面上,图标也亮起,可是F12就是没有出现vue的选项卡

解决办法

把调试工具先关闭,再刷新界面,再F12打开调试者工具即可解决

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

相比其他大型框架,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安装包,如图1-3所示。

图1-3git下载网站

(2)双击下载后的安装程序,进行安装,如图1-4所示。

图1-4安装协议

(3)单击“Next”按钮,根据提示进行安装,全部使用默认值即可。

(4)安装成功后,启动git-bash,如图1-5所示。

启动git-bash

3.Node.js环境

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

(1)打开Node.js官方网站,找到Node.js下载地址,如图1-6所示.

安装界面

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

(2)双击安装包进行安装,如图1-7所示

安装界面

(3)安装过程全部使用默认值。安装完成后,打开git-bash命令行工具,查看Node.js版本信息,如图1-8所示。

查看Node.js版本

(4)将Node.js安装完成后,下面我们通过代码演示HelloWorld程序的编写。创建C:\vue\chapter01目录,在该目录中创建helloworld.js文件,编写如下代码:

console.log('Hello World')

(5)保存文件后,执行如下命令,启动Hello World程序:

node hello world.js

(6)上述代码执行后,输出结果如图1-9所示。

图1-9HelloWorld程序

(7)Node.js还提供了交互式环境REPL,类似Chrome浏览器的控制台,可以在命令行中直接输入JavaScript代码来执行。在命令行中执行node命令,即可进入交互模式,如图1-10所示。

图1-10REPL交互式环境

(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镜像为例,使用如下命令设置即可切换。

npm config set registry https://registry.npm.taobao.org

5.Chrome浏览器和vue-devtools扩展

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

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

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

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

npm install

(3)构建vue-devtools工具插件,执行命令如下。

npm run build

(4)将插件添加至chrome浏览器。单击浏览器地址栏右边的“”按钮,在弹出的菜单中选择“更多工具”→“扩展程序”,如图1-11所示。

图1-11扩展程序页面在图1-11所示的界面中,单击“加载已解压的扩展程序”按钮,此时会弹出选择框,需要用户选择扩展程序目录。找到vue-devtools-5.1.1/shells/chrome目录,将其添加到扩展程序中。

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

图1-12vue-devtools安装成功界面

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue安装遇到的5个报错及解决方法

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 5个报错 ①:若使用vue -V查询是否安装vue时提示没有找到指令,可能是你没有安装vue-cli脚手架(vue-cli可快速创建vue项目)          ②:vue安装淘宝镜像时报错,提示无效的配置,必须是完整合法的http地址,原因是我在url前面加了1个空格,这里不要有空格 注:安装淘宝镜像后,需要用到npm的地方都可以用cnpm替换,但建议安装模块和插件用cnpm,打包和启动vue用npm (cnpm是国

  • Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样的问题,新人可能会花费很多时间去找答案,今天我们就来整理了解决方法,希望对大家有帮助. 首先,我们先要确保Vue.js devtool插件已经安装成功了.具体的Vue.js devtool插件的安装方法可以:chrome插件CRX的离线安

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件: module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vu

  • Vue脚手架安装时遇到的无法安装问题详解

    目录 项目场景: 问题描述 原因分析: 解决方案: 总结: 项目场景: 安装Vue的脚手架时遇到的无法安装问题 问题描述 以管理员身份进入命令控制符想要安装Vue的脚手架,提示安装成功后输入vue指令检查却显示:‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件. 原因分析: 安装node.js依赖环境时环境配置有问题 解决方案: 解决步骤: 1.输入cmd进入命令控制符面板 2.输入npm -v检查node.js环境是否已经配置好 当显示版本号时说明npm已成功安装(8.5.5是我

  • 安装vue3开发者工具但控制台没有显示出vue选项的解决

    目录 安装vue3开发者工具但控制台没有显示出vue选项 解决办法 Vue开发常用的工具有哪些? 1.Visual Studio Code编辑器 2.git-bash命令行工具 3.Node.js环境 4.npm包管理工具 5.Chrome浏览器和vue-devtools扩展 安装vue3开发者工具但控制台没有显示出vue选项 安装好了插件,并且选择钉在页面上,图标也亮起,可是F12就是没有出现vue的选项卡 解决办法 把调试工具先关闭,再刷新界面,再F12打开调试者工具即可解决 Vue开发常用

  • Vue安装浏览器开发工具的步骤详解

    开发vue时,浏览器有一个好的开发调试工具能让开发事半功倍,磨刀不误砍柴工. 步骤 1.下载工具 地址:  https://github.com/vuejs/vue-devtools 2.安装依赖 cmd进入vue-devtools文件夹,安装相关依赖,依次执行npm install,再执行npm run build. 3.修改配置 打开shells>chrome>src>manifest.json,修改"persistent":false为true. 4.浏览器安装

  • 解决VMWare安装Mac系统后无法全屏显示的问题

    系统: VMTOOLs下载: 链接:https://pan.baidu.com/s/1KIzVWtPrb2vSrtokONToBw 提取码:zea3 1.虚拟机设置--显示器--监视器--指定监视器设置--任意监视器的最大分辨率(自行选择适合自己屏幕的尺寸)确定即可. 2.启动苹果系统一直按住commend + R 键,直到看到苹果标志. 然后开始加载苹果界面 3.在实用工具中打开终端. 4.输入命令 csrutil disable 出现successfully说明修改成功. 5.输入命令 re

  • IntelliJ IDEA 安装 Grep Console插件 自定义控制台输出多颜色格式功能

    0 前言 由于Intellij idea不支持显示ascii颜色,grep-console插件能很好的解决这个问题,下面就以开发JavaEE项目中,结合Log4j配置多颜色日志输出功能. 1. 安装grep-console插件 2. 设置grep-console 配置好各级日志的前景色 3. 配置Log4j Maven配置文件pom.xml添加log4j的信赖 <dependency> <groupId>log4j</groupId> <artifactId>

  • JS检测浏览器开发者工具是否打开的方法详解

    在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理.本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法.  一.重写toString() 对于一些浏览器,比如Chrome.FireFox,如果控制台输出的是对象,则保留对象的引用,每次打开开发者工具的时候都会重新调用一下对象的toString()方法将返回结果打印到控制台(console tab)上. 所以只需要创建一个对象,重写它的to

  • 解析从小程序开发者工具源码看原理实现

    如何查看小程序开发者工具源码 下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理.以开发者工具版本号State v1.02.1904090的源码来窥探小程序的实现思路.如何查看微信源码,对于mac用户而言,查看微信小程序开发者工具的包内容,然后进入Contents/Resources/app.nw/js/core/index.js,注释掉如下代码就可以查看开发者工具渲染后的代码. // 打开 inspect 窗口 if (nw.App.argv.indexOf('inspect')

  • npm安装的全局包/工具不能使用,不是内部/外部命令的解决方法

    目录 事情经过 问题描述 解决方法 总结 事情经过 今天通过npm安装全局工具,安装完成后,使用新安装的工具命令,竟然显示“不是内部或外部命令,也不是可运行的程序” 之前通过npm安装全局包,就可以正常使用,为什么今天就不可以了呢? 然后我去试之前安装过的全局包,结果也是这样. 然后我就去看npm全局包的目录,发现这些包都在,Node.js的环境变量也是正确的. 离谱了!npm安装的全局包突然就不能用了 然后去网上搜,发现没有用,然后我就卸载node.js重新安装,还是没有用. 离大谱了!! 正

  • python在Windows下安装setuptools(easy_install工具)步骤详解

    本文讲述了python在Windows下安装setuptools(easy_install工具)的方法.分享给大家供大家参考,具体如下: [题外话介绍下setuptools] setuptools 是一组由PEAK(Python Enterprise Application Kit)开发的 Python 的 distutils 工具的增强工具,可以让程序员更方便的创建和发布 Python的egg 包,特别是那些对其它包具有依赖性的状况. 由 setuptools 创建和发布的包看起来和基于 di

  • Java微信公众平台开发(14) 微信web开发者工具使用

    为帮助开发者更方便.更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具.它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作.你可以: 使用自己的微信号来调试微信网页授权 调试.检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出 使用基于 weinre 的移动调试功能 利用集成的 Chrome DevTools 协助开发 该工具界面主要由几大部分组成,如下图所示: 顶部菜单栏是刷新.后退.选

  • C#实现在控制台输入密码显示星号的方法

    在控制台输入的内容C#默认按照字符串进行处理,如果直接让用户一次输入完毕就很难实现 显示星号的功能.但是如果让用户一次只能输入一个字符就,在将用户输入的字符替换为星号就可以实现了! 首先,C#中能让用户按下一个按键的方法就是Console.Readkey(),用户一次只能按下一个按键,其中它的另外一个重载方法是Console.ReadKey(bool b),bool类型的参数用来控制是否在控制台上显示用户按下的按键.那么我们可以传入true参数,使用户按下的按键不显示在控制台上,这样光标始终停留

随机推荐