Develop Vue using vue-devtools

Foreword:

Since vue is data-driven, there is nothing that can be parsed by viewing the DOM structure during development and debugging.

But with the help of the vue-devtools plug-in, we can easily parse and debug the data structure.

1. Download the chrome extension

GitHub download address:

It is recommended to use npm Taobao mirror according to the dependency package

Address:

Command line installation npm Taobao mirror:

$ npm install -g cnpm --registry= https://registry.npm.taobao.org

#After that we can use cnpm instead of npm to follow the dependency packages. npm is indeed too slow to install dependency packages. ....

##2. cnpm install

After the download is complete, open the command line cmd and enter the vue-devtools folder, follow the dependency package and npm run build

##3. Open shells>chrome>src>manifest.json and change "persistent":false in the json file to true

4. Extend the chrome plug-in

1. Open the chrome browser, open Settings>Click or Programs>Click Developer Mode

2. Then Click to load the decompressed extension, then put the shell>chrome folder into

##Finally

Open the one written in vue Project, f12 opens the debugging tool to debug the vue project.

The above is the detailed content of Develop Vue using vue-devtools. For more information, please follow other related articles on the PHP Chinese website!