- Vue.js 2 Design Patterns and Best Practices
- Paul Halliday
- 140字
- 2021-06-24 18:33:01
Installing the Vue devtools
Head over to the Google Chrome Extensions store and download Vue.js devtools (https://goo.gl/Sc3YU1). After installing this, you'll then have access to the Vue panel within your developer tools. In the following example, we're able to see the data object inside of our Vue instance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
</head>
<body>
<div id="app"></div>
<script src="http://unpkg.com/vue"></script>
<script>
Vue.config.devtools = true
new Vue({
el: '#app',
data: {
name: 'Vue.js Devtools',
browser: 'Google Chrome'
},
template: `
<div>
<h1> I'm using {{name}} with {{browser}}</h1>
</div>
`
});
</script>
</body>
</html>
If we then head over to our browser and open up the devtools we can see that Vue has been detected and that our message has outputted on to the screen:
We'll be using this throughout the book to gain extra insight into our applications. Do be aware that the developer tools will only recognize your Vue project if it is served on a local server.