精华内容
下载资源
问答
  • 问题:使用vue开发工具vue-devtools调试本地文件显示Vue.js not detected,F12后,控制台无VUE,访问vue网络站点,显示VUE 安装vue-devtools最新版可参考: ... 解决: 1、先检查问题是否是我这种,访问vue翻译站,...

    问题:使用vue开发工具vue-devtools调试本地文件显示Vue.js not detected,F12后,控制台无VUE,访问vue网络站点,显示VUE

    安装vue-devtools最新版可参考:

    https://blog.csdn.net/qq_38243612/article/details/105500020

    解决:

    1、先检查问题是否是我这种,访问vue翻译站,按F12看控制台有没有VUE,有的话,就是同样的问题了

    https://cn.vuejs.org/

    2、打开下面地址,找到Vue.js devtools,点击详细信息

    chrome://extensions/

     3、详细信息中打开运行访问文件地址,再访问本地文件,显示vue窗口,问题解决

    转载请注明出处,谢谢! 

    展开全文
  • vue.js可视化开发工具_Vue.js开发工具

    千次阅读 2020-08-25 03:21:58
    vue.js可视化开发工具Install on Chrome 在Chrome上安装 Install on Firefox 在Firefox上安装 Install the standalone app 安装独立应用 How to use the Developer Tools 如何使用开发人员工具 Filter components...

    vue.js可视化开发工具



    When you’re first experimenting with Vue, if you open the Browser Developer Tools you will find this message: “Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools

    首次尝试使用Vue时,如果打开浏览器开发人员工具,则会发现以下消息:“ 下载Vue Devtools扩展以获得更好的开发体验: https : //github.com/vuejs/vue-devtools

    Hint to install the Vue devtools

    This is a friendly reminder to install the Vue Devtools Extension. What’s that? Any popular framework has its own devtools extension, which generally adds a new panel to the browser developer tools that is much more specialized than the ones that the browser ships by default. In this case, the panel will let us inspect our Vue application and interact with it.

    这是安装Vue Devtools Extension的友好提示。 那是什么? 任何流行的框架都有其自己的devtools扩展,通常会为浏览器开发人员工具添加一个新面板,该面板比浏览器默认提供的工具更加专业。 在这种情况下,面板将使我们检查Vue应用程序并与其进行交互。

    This tool will be an amazing help when building Vue apps. The developer tools can only inspect a Vue application when it’s in development mode. This makes sure no one can use them to interact with your production app (and will make Vue more performant because it does not have to care about the devtools)

    在构建Vue应用程序时,此工具将为您提供惊人的帮助。 开发人员工具只能在处于开发模式时检查Vue应用程序。 这样可以确保没有人可以使用它们来与您的生产应用程序进行交互(并且可以使Vue的性能更高,因为它不必关心devtools)

    Let’s install it!

    让我们安装它!

    There are 3 ways to install the Vue Dev Tools:

    有3种安装Vue Dev Tools的方法:

    • on Chrome

      在Chrome上
    • on Firefox

      在Firefox上
    • as a standalone application

      作为独立的应用程序

    Safari, Edge and other browsers are not supported with a custom extension, but using the standalone application you can debug a Vue.js app running in any browser.

    自定义扩展不支持Safari,Edge和其他浏览器,但是使用独立应用程序,您可以调试在任何浏览器中运行的Vue.js应用程序。

    在Chrome上安装 (Install on Chrome)

    Go to this page on the Google Chrome Store: https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd and click Add to Chrome.

    转到Google Chrome商店中的以下页面: https : //chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd ,然后点击添加至Chrome

    Add to chrome

    Go through the installation process:

    完成安装过程:

    Add extension

    The Vue.js devtools icon shows up in the toolbar. If the page does not have a Vue.js instance running, it’s grayed out.

    Vue.js devtools图标显示在工具栏中。 如果页面没有正在运行的Vue.js实例,则该页面显示为灰色。

    Vue DevTools installed

    If Vue.js is detected, the icon has the Vue logo colors.

    如果检测到Vue.js,则图标具有Vue徽标颜色。

    Icon colored

    The icon does nothing except showing us that there is a Vue.js instance. To use the devtools, we must open the Developer Tools panel, using “View → Developer → Developer Tools”, or Cmd-Alt-i

    图标什么也不做,除了向我们展示, 一个Vue.js实例。 要使用devtools,我们必须使用“视图→开发人员→开发人员工具”或Cmd-Alt-i打开“开发人员工具”面板

    DevTools window

    在Firefox上安装 (Install on Firefox)

    You can find the Firefox dev tools extension in the Mozilla addons store: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

    您可以在Mozilla插件商店中找到Firefox开发工具扩展: https : //addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

    Firefox addons store

    Click “Add to Firefox” and the extension will be installed. As with Chrome, a grayed icon shows up in the toolbar

    单击“ 添加到Firefox ”,将安装扩展名。 与Chrome一样,工具栏中也会显示灰色图标

    Firefox addon installed

    And when you visit a site that has a Vue instance running, it will become green, and when we open the Dev Tools we will see a “Vue” panel:

    当您访问正在运行Vue实例的站点时,该站点将变为绿色,并且当我们打开开发工具时,我们将看到一个“ Vue ”面板:

    Vue devtools in Firefox

    安装独立应用 (Install the standalone app)

    Alternatively, you can use the DevTools standalone app.

    或者,您可以使用DevTools独立应用程序。

    Install it using

    使用安装

    npm install -g @vue/devtools
    
    //or
    
    yarn global add @vue/devtools

    and run it by calling

    并通过调用来运行它

    vue-devtools

    This will open the standalone Electron-based application.

    这将打开独立的基于电子的应用程序。

    Standalone Vue devtools

    now, paste the script tag it shows you:

    现在,粘贴显示给您的脚本标签:

    <script src="http://localhost:8098"></script>

    inside the project index.html file, and wait for the app to be reloaded, and it will automatically connect to the app:

    在项目index.html文件中,然后等待应用程序重新加载,它将自动连接到应用程序:

    Standalone Vue devtools connected

    如何使用开发人员工具 (How to use the Developer Tools)

    As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser and moving to the Vue panel.

    如前所述,可以通过在浏览器中打开开发人员工具并移至Vue面板来激活Vue DevTools。

    Another option is to right-click on any element in the page, and choose “Inspect Vue component”:

    另一个选项是右键单击页面中的任何元素,然后选择“检查Vue组件”:

    Inspect vue component

    When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds:

    打开Vue DevTools面板后,我们可以导航组件树。 当我们从左侧的列表中选择一个组件时,右侧面板将显示其拥有的道具和数据:

    Navigate the components tree

    On the top there are 4 buttons:

    顶部有4个按钮:

    • Components (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time, for example it might manage your shopping cart widget and the slideshow, with separate, lightweight apps.

      组件 (当前面板),其中列出了当前页面中运行的所有组件实例。 Vue可以同时运行多个实例,例如,它可以使用单独的轻量级应用程序管理购物车小部件和幻灯片。

    • Vuex is where you can inspect the state managed through Vuex.

      在Vuex中,您可以检查通过Vuex管理的状态。

    • Events shows all the events emitted

      事件显示所有发出的事件

    • Refresh reloads the devtools panel

      刷新以重新加载devtools面板

    Notice the small = $vm0 text beside a component? It’s a handy way to inspect a component using the Console. Pressing the “esc” key shows up the console in the bottom of the devtools, and you can type $vm0 to access the Vue component:

    注意组件旁边的小= $vm0文本吗? 这是使用控制台检查组件的便捷方法。 按下“ esc”键将在devtools底部显示控制台,您可以键入$vm0来访问Vue组件:

    Component Console Shortcut

    This is very cool to inspect and interact with components without having to assign them to a global variable in the code.

    检查组件并与之交互非常酷,而不必将它们分配给代码中的全局变量。

    过滤组件 (Filter components)

    Start typing a component name, and the components tree will filter out the ones that don’t match.

    开始输入组件名称,组件树将过滤出不匹配的组件。

    Filter components

    在页面中选择组件 (Select component in the page)

    Click the

    点击

    Select component in the page

    button and you can hover any component in the page with the mouse, click it, and it will be opened in the devtools.

    按钮,您可以用鼠标悬停页面中的任何组件,单击它,它将在devtools中打开。

    格式化组件名称 (Format components names)

    You can choose to show components in camelCase or use dashes.

    您可以选择在camelCase中显示组件或使用破折号。

    筛选检查的数据 (Filter inspected data)

    On the right panel, you can type any word to filter the properties that don’t match it.

    在右侧面板上,您可以输入任何单词以过滤不匹配的属性。

    检查DOM (Inspect DOM)

    Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component:

    单击“检查DOM”按钮,将其带到DevTools Elements检查器中,该DOM元素由组件生成:

    Inspect DOM

    在编辑器中打开 (Open in editor)

    Any user component (not framework-level components) has a button that opens it in your default editor. Very handy.

    任何用户组件(不是框架级组件)都有一个按钮,可以在默认编辑器中将其打开。 非常便利。

    翻译自: https://flaviocopes.com/vue-devtools/

    vue.js可视化开发工具

    展开全文
  • Vue开发人员的原型开发工具 OverVue是一种原型工具,允许开发人员动态创建和可视化Vue应用程序,实现组件层次结构的实时直观树形显示和实时生成的代码预览。 可以将生成的样板作为模板导出以进行进一步开发。 这个...
  • Vue框架项目实战整理:1、Vue开发工具介绍、快速启动、常见错误 Vue框架项目实战整理:2、Vue环境搭建(有图有真相) Vue框架项目实战整理:3、Vue项目执行流程分析(一) Vue框架项目实战整理:4、Vue项目执行...

    声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!!

    目录

    一、前言

    二、使用过的开发工具介绍

    Sublime Text

    Visual Studio Code

    IntelliJ IDEA

    WebStorm

    三、快速启动Vue项目

    1、指定项目目录

    2、启动项目

    3、项目文件下面的目录

    4、命令行界面

    5、显示效果界面

    四、根据模板再次创建新的项目、启动新项目

    (1)指定项目要存放的目录

    (2)新建项目

    (2)切换到项目目录 

    (3)安装项目所需依赖 node_modules

    (4)常见错误解决

    (5)启动项目


    一、前言

    自从创业以后,把写博客的事情给落下了!一直盯着项目几乎很少休息,一个月能休息一天算好的啦,都说 “离职穷半年,创业穷三年”,终于尝到其中滋味!最近静下心来好好反思总结,其中写博客这件事还是不能停止......专注搞Android多年,但由于项目需要也做了Web前端开发、Web App,所以想把这方面的知识给总结分享下!后面还会为自己这次创业经历做些总结,画个句号!

    二、使用过的开发工具介绍

    如果是Android开发,开始需要eclipse再安装ADT,后来用的google集成的eclipse,现在肯定用的Android Studio!但是前端开发知识在大学和实习的时候有系统学习过,因创业项目需要使用vue,于是花了二天时间先把 html+js+css 的笔记过了一遍然后再研究vue!工欲善其事,必先利其器,所以我首先想找个好的开发工具!下面是我使用过的工具简单介绍下:

    Sublime Text

    通过咨询以前同事,她给我推荐了Sublime Text,于是下了一个Sublime Text。但我用的mac,下载下了感觉跟windows上的差别很大,于是在网上找了一些资料配置了一下,只能说凑合能用吧!

    Visual Studio Code

    学习的时候在网上看了一些资料,看到他们用的Visual Studio Code也就下了一个,在网上找了一些插件,比起Sublime Text用着舒服一些。不得不吐槽mac软件少,即使有也比windows简洁很多,很多功能没有或需要自己配!

    IntelliJ IDEA

    相对于前面2款软件我更倾向于idea,因为它很多操作都相似于Android Studio,当时在我印象中Android Studio好像就是google基于IntelliJ IDEA推出的一个Android集成开发工具,搜索了一番果不其然!所以我现在用的就是IntelliJ IDEA,如果你像我一样用的mac系统,做过Android开发,我推荐使用IntelliJ IDEA(比较耗资源,如果使用卡顿的话那就用VS Code吧)

    WebStorm

    看到同事有用,貌似可以像eclipse新建java项目一样等功能,闲暇用了再谈心得,没有具体尝试试用!

     

    三、快速启动Vue项目

    1、指定项目目录

    cd + 项目目录,如:cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh

    2、启动项目

    npm run dev

    3、项目文件下面的目录

    4、命令行界面

    5、显示效果界面

     

    四、根据模板再次创建新的项目、启动新项目

    (1)指定项目要存放的目录

    cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/

    (2)新建项目

    vue init webpack-simple demodemoyyh2

    (2)切换到项目目录 

    cd demodemoyyh2

    (3)安装项目所需依赖 node_modules

    执行 npm install 安装项目所需依赖,也就是node_modules里的依赖文件。

    在开发的过程中,往往这个文件是不会提交到svn、git服务器上的,这时候你把项目下载下来,需执行此命令

    npm install

    (4)常见错误解决

    报错:

    npm ERR! cancel after 1 retries!

    npm ERR! A complete log of this run can be found in:

    npm ERR!     /Users/luminal/.npm/_logs/2018-07-13T02_10_09_428Z-debug.log

    解决方式:

    npm init -y

     

    提示:

    npm notice created a lockfile as package-lock.json. You should commit this file.

    added 973 packages from 645 contributors in 69.963s

    解决方式:

    npm init【因是警告不是报错,就没有执行此命令了。】

     

    (5)启动项目

    npm run dev

     

    我的实践命令记录:

    cd /Users/luminal/Desktop/yyh_xinyuan_project/xinyuanEstate_pc_myWorkspace

    vue init webpack-simple login_yyh

    cd login_yyh

    npm install

    npm run dev

     

    ?Project namelogin_yyh【直接enter】 

    ?Project descriptionA Vue.js project【直接enter】

    ?Authoryyh【输入yyh,然后enter】

    ?LicenseMIT【直接enter】

    ?Use sass?No【直接enter】

     

    cd /Users/luminal/Desktop/yyh_xinyuan_project/xinyuanEstate_pc_myWorkspace/login_yyh

    npm run dev

     

     

     

     

     

    展开全文
  • vue调试工具Devtools出现的解决方式

    万次阅读 多人点赞 2018-08-31 15:19:38
    在使用vuex时,想直观的查看数据state的变动,用Devtools可实现,但是在Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools) vue图标: ...

    在使用vuex时,想直观的查看数据state的变动,用Devtools可实现,但是在Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools)

    vue图标:

    开发者工具:

    扩展程序:

    没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址

    https://github.com/vuejs/vue-devtools
    
    1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
    2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

     

    如果勾选了还是没有显示,说明采用了压缩版/生产版的Vuejs,则继续采用如下方案:

    解决方案一:

    采用script方式引入,需要在webpack.base.config.js添加externals

    externals: {
        'vue': 'Vue',
    },

    然后在index.html引入https://cdn.bootcss.com/vue/2.5.16/vue.js,在main.js中干掉import vue from 'vue',

    放到生产环境时,换成https://cdn.bootcss.com/vue/2.5.16/vue.min.js,

    此种方式可以减少vendor打包体积

     

    方案二:

    在main.js中添加

    // 若是没有开启Devtools工具,在开发环境中开启,在生产环境中关闭
    if (process.env.NODE_ENV == 'development') {
        Vue.config.devtools = true;
    } else {
        Vue.config.devtools = false;
    }

    附注:vue各版本

     

    UMD

    CommonJS

    ES Module

    完整版

    vue.js

    vue.common.js

    vue.esm.js

    只包含运行时版

    vue.runtime.js

    vue.runtime.common.js

    vue.runtime.esm.js

    完整版 (生产环境)

    vue.min.js

    -

    -

    只包含运行时版 (生产环境)

    vue.runtime.min.js

    -

    -

    展开全文
  • VS Code的Vetur Vue工具。 vls:Vue语言服务器vti:Vetur终端接口文档:https://vuejs.github.io/vetur:party_popper:VueConf 2017 Slide&Vide用于VS Code的Vetur Vue工具。 vls:Vue语言服务器vti:Vetur终端接口...
  • vue调试工具不展示出来

    千次阅读 2020-06-28 16:32:39
    有可能是项目使用了script的方式引入了vue.min.js的原因导致的,开发环境可以临时使用cdn地址就没问题了。 <script src="http://cdn.bootcss.com/vue/2.6.10/vue.js" charset="utf-8"></script>
  • pyweb-dev-tools是使用pyqt+vue开发的实用工具脚手架,利用业余时间把工作中遇到的一些问题总结起来,打包进小工具集中,供大家在程序开发过程中参考和使用,同时支持二次开发,只要会python+web基础,就能进行...
  • 网上千篇一律的说法就是子元素要超过父级元素然后设置overflow为auto就可以了,但是我在css中的样式设置的就是这样,通过谷歌浏览器手机模拟调试工具里面显示也是正常的,但是在ios里面死活显示不全。 这里借鉴了...
  • vue浏览器调试工具

    2018-07-03 11:59:28
    一款非常好用的vue浏览器调试工具 开发vue使用的插件 浏览器调试工具
  • 开发vue需要安装的开发工具和环境的配置记录

    万次阅读 多人点赞 2018-12-16 17:26:33
    前端开发vue需要一个好用的代码编辑器,首选肯定是vsCode(全称Visual Studio Code);想要运行前端代码并在浏览器中访问,就得安装nodeJS。本篇博客就是介绍如何安装和配置vsCode和nodeJS。   下载 vsCode官网...
  • 前端开发工具vue.js开发实践总结

    万次阅读 2016-09-15 17:22:04
    最近有很长时间没有更新博客了,换了公司,全部的心思都放在...这种方式最大的痛点是拼接很麻烦,也不是很直观,几乎无法复用,和数据紧密的偶合在一起,维护方便,太多太多的问题。在同事的推荐下,开始接触vue.js这
  • 安装vue调试工具 vue-devTools vue-devTools下载地址 注意:克隆时不要克隆dev分支的版本,因为这是开发版本,编译一直通不过 git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git 解释一下这个命令...
  • Vue.js devtools开发工具的使用 使用debugger和sourcemap调试Vue组件 vscode中调试Vue组件 Vue.js devtools开发工具的使用 在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool...
  • 如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然能算是一个合格的vue开发者 vue-devtools 开发工具能帮我查看当前组件的显示状态和 追踪vuex中数据状态 能帮我们的开发达到一个事半功倍的效果 1.我...
  • 只是讲述Vue开发前端使用的工具。预先善其事,必先利其器。工具都弄好了才能更好地开发。 1、Vue环境的安装 下载node.js。下载地址:http://nodejs.cn/download/ 下载对应的系统、位数、版本号后安装。node.js中...
  • 微信开发工具无法支持vue文件

    千次阅读 2019-03-27 16:52:02
    微信开发者工具不支持打开vue文件,因为微信开发者工具只是一个用户代理(即显示网站用),类似chorme浏览器一样。 由于官方的微信开发者工具编辑mpvue不是很友好,所以编写的时候一般会选择一款编辑器,可以使用...
  • 使用 vue tools 开发工具不显示调试面板中的组件,点击控制台报错: Cannot read property ‘VUE_DEVTOOLS_UID’ of undefined 在 main.js中加入如下代码即可: Vue.config.devtools = true; ...
  • Vue开发实战

    千次阅读 2016-08-19 15:48:41
    文章将要讲诉关于Vue的实战开发的一整套流程,其中涉及到的知识有ES2015、Vue,构建工具:webpack、gulp。 -------------------分割线----------如有不足之处,请指出互勉!--------------------------------------...
  • 刷新浏览器页面,图片验证码不显示,点击图片验证码区域以后,才能显示也可以切换显示下一个。 排查思路: 调用开发者工具,检查是否向后端发起获取图片验证码请求。 如果生成了图片uuid编号,发送了请求,则问题...
  • vue开发:vue2.0开发中常见问题

    千次阅读 2017-07-13 10:39:00
    2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了,webpack可以进行配置,配置多文件入口,进行多页面开发 对于第二种开发方式,结合webpack打包完文件会很大,怎么解决这个问题...
  • 文章目录前言新建 vue 文件修改新建的 vue 文件增加标签和样式在 App.vue...如果对这部分熟悉,请参考:idea 导入 Vue 项目并运行(超级详细步骤) 新建 vue 文件 这里我选择之后弹出一个对话框: 输入 vue 文件...
  • vue-devtools 开发工具能帮我查看当前组件的显示状态和 追踪vuex中数据状态 能帮我们的开发达到一个事半功倍的效果,无论你以后是测试数据还是检查BUG都会让你一目了然。 1.按照网上的指示安装的 首先先访问 git地址...
  • 前面我把vue项目搭建好了,接下来的事情就是对项目进行开发了,不过开发之前我们需要好的工具,这里我特别喜欢vscode这款软件,相当的好用,它支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、...
  • 最近开发vue项目中,为了更好的调试程序,安装了vue.js devtools调试工具,安装成功了之后浏览器右上角出现了图标,同时在vue的页面下能点亮,控制台上也没有vue的页签。 解决方法: 最后是在扩展程序中把...
  • 废话多说,我们直接进入正题 下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境 git用的是linux命令 不要问为什么,能用就行,你说是不是? windows系统,下载完git以后我们再桌面右击...
  • 深入浅出学 Vue 开发

    万次阅读 多人点赞 2018-08-14 00:42:55
    课程介绍 前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进、架构的...而 Vue 作为其中唯一没有大公司支持但却能与它们并驾齐驱并且隐隐有超越同类的趋势,不得说这种增长让人感到惊奇。 本系列课程...
  • Vue开发资源汇总

    2019-05-26 18:06:16
    https://github.com/opendigg/awesome-github-vue https://github.com/vuejs/awesome-vue 内容 UI组件 开发框架 ...element★13489 - 饿了么出品的Vue2的web UI工具套件 Vux★8133 - 基于Vue和We...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,225
精华内容 11,290
关键字:

vue开发工具不显示

vue 订阅