卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

卓象程序员让每一位学员高薪就业 联系我们13101507057

加微信,了解详情
您所在的位置:首页 > 文章 >Vue.js

「Vue.js开发连载十六」浏览器安装vue插件
时间: 2018-11-09 10:37:24     来源: 卓象IT实训基地【原创】

上一篇文章讲解“生命周期”,本篇文章讲解“浏览器安装vue插件”。


vue谷-歌插件,开发帮手vue-devtools,在调试过程中可以省去打console.log,因为他会自动把我们在data上定义的数据动态的显示出来(数据变,它也变)。

「Vue.js开发连载十六」浏览器安装vue插件



安装步骤

1. 首先需要大家安装node.js

「Vue.js开发连载十六」浏览器安装vue插件


安装node.js一路下一步,没有什么特殊的。


2. 然后进入命令行执行npm i -g cnpm

npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)。因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,因此出现了cnpm,与npm用法相同,服务器在国内,下载较快。

「Vue.js开发连载十六」浏览器安装vue插件


「Vue.js开发连载十六」浏览器安装vue插件


「Vue.js开发连载十六」浏览器安装vue插件



3. 下载vue-devtools,并解压,不要解压到桌面。

「Vue.js开发连载十六」浏览器安装vue插件


解压的路径尽量不要中文路径。

「Vue.js开发连载十六」浏览器安装vue插件



4. 解压后,从命令行进入该文件夹。

「Vue.js开发连载十六」浏览器安装vue插件


「Vue.js开发连载十六」浏览器安装vue插件


选择后,进入命令窗口,命令行自动定位到此文件夹:

「Vue.js开发连载十六」浏览器安装vue插件



5. 运行cnpm i,等待安装。

「Vue.js开发连载十六」浏览器安装vue插件


「Vue.js开发连载十六」浏览器安装vue插件



6. 等待完成后,运行 npm run build,等待编译。

「Vue.js开发连载十六」浏览器安装vue插件


「Vue.js开发连载十六」浏览器安装vue插件


「Vue.js开发连载十六」浏览器安装vue插件



7. 编译完成后,打开谷-歌浏览器的“扩展程序”菜单。

「Vue.js开发连载十六」浏览器安装vue插件



8. 勾选打开“开发者模式”

「Vue.js开发连载十六」浏览器安装vue插件



9. 点击“加载已解压的扩展程序”,选择shells/chrome目录

「Vue.js开发连载十六」浏览器安装vue插件



10. 插件已完成

「Vue.js开发连载十六」浏览器安装vue插件



11. 测试

「Vue.js开发连载十六」浏览器安装vue插件


浏览器访问:

「Vue.js开发连载十六」浏览器安装vue插件


在控制台找到Vue,即可查看。

Vue.js连载为卓象程序员原创,转载请联系卓象程序员

「Vue.js开发连载十六」浏览器安装vue插件


关注卓象程序员,定期发布技术文章

到此为止vue.js入门开发连载结束!

「Vue.js开发连载十六」浏览器安装vue插件