使用Vue的Chrome插件 “Vue.js Devtools”
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。
一. 使用流程
- 在谷歌浏览器安装拓展插件，下载一个crx文件拖进去就行，成功后如图所示。
官网上给出的谷歌下载的链接如下：（需要科学上网）
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
github：
https://github.com/vuejs/devtools
还有一种不用fq，但是需要关注公众号来获取验证码的网页（版本也不是最新的）：
https://www.cnplugins.com/devtool/vuejs-devtools/download.html- 编写一个使用Vue框架的HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--使用CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-->
<!--如果本地已安装的话就使用下面的语句 -->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id ="app">
<ul>
<!--插值语法，绑定下面的message-->
<p>{{message}}</p>
<!--指令语法，遍历下面的things-->
<li v-for="thing in things">
{{thing.name}} : {{thing.quantity}}
</li>
</ul>
</div>
<!--下面可以单独作为一个JS文件-->
<script type="text/javascript">
//Vue.config.productionTip = false; //关闭生产提示，后续会给出区别
var app = new Vue({
el: '#app',
data: {
message: "商品列表：",
things: [{
name:'本子' ,
quantity: "2"
}, {
name: '铅笔' ,
quantity: "6"
}, {
name: '课外书' ,
quantity: " 3 "
}]
}
});
</script>
</body>
</html>
- 使用谷歌浏览器打开，效果如下：
- 按下F12，打开控制台：若没有出现devtools的提示，则成功安装
- 点击右侧的更多选项，若观察到Vue，则可以切换并调试属性。
二. 注意点
如果使用单独的txt文件编辑后，再更换格式打开，该插件会“变灰”，并显示Vue.js not detected。但是如果我使用HBuilderX，并运行同一份HTML文件，则可以正常使用。具体原因暂时未知，但是单独文件解决方案见下。
三. Chrome浏览器插件not detected 的一种解决方案
- 打开谷歌浏览器中的拓展程序界面，再次见到下图：
- 点击详细信息，勾选“允许访问文件网址”即可。
1438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
