vue-devtools是开发vue项目中经常用到的工具,之前我都是直接从网上下载别人已经编译好的,今天上github看了下,原来自己打包编译也是很快捷方便的,记录一下。
一、将vue-detools项目克隆到本地
执行命令
git clone https://github.com/vuejs/vue-devtools.git
二、进入项目根目录vue-detools文件夹
执行命令
cd vue-detools
或者手动进入文件夹再右键选择“git bash here”
三、下载项目所需依赖
执行命令
yarn install
四、打包项目
执行命令
yarn run build
五、把打包好的文件加载到chrome浏览器
1.打开浏览器菜单
2.选择更多工具
3.选择扩展程序
4.选择加载已解压的扩展程序
,如果没有这个选项,检查一下开发者模式
是否开启
5.在弹出的选择文件夹窗口选择vue-devtools项目下的vue-devtools\packages\shell-chrome
文件夹
到这里所有的下载打包安装都已经完成,真的非常简单。
其实到github上看看vue-devtools,其实上面就有很详细的步骤。
1.Clone this repo
2.cd vue-devtools the newly created folder
3.run yarn install
4.then run yarn run build
5.Open the Chrome extension page (currently under Menu > More Tools > Extensions)
6.Check "developer mode" on the top-right corner
7.Click the "load unpacked" button on the left, and choose the folder: vue-devtools/packages/shell-chrome/
8.Alternatively to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension