給專案的入口檔案做點小改變：
【補充：編輯器建議使用vscode，我還沒裝，暫時先用phpstorm】
打開 APP.vue 檔案，代碼如下（解釋在注釋中）
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> <hello></hello> </div> </template> <script> //匯入組件 import Hello from "./components/Hello" console.log(1) export default { name: 'App', components:{ Hello } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
修改 src/components/Hello.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default{ name:"hello", data(){ return { msg:"cyy要學習vue啦~" } } } </script>
重新打開頁面 http://localhost:8080/，一般修改后會自動重繪，顯示效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/146967.html
標籤：JavaScript
上一篇：npm安裝Vue.js
下一篇：JS陣列方法（ES5、ES6）