給項目的入口文件做點小改變: 【補充:編輯器建議使用vscode,我還沒裝,暫時先用phpstorm】 打開 APP.vue 文件,代碼如下(解釋在註釋中) <!-- 展示模板 --> <template> <div id="app"> <img src="./assets/logo.png"> < ...
給項目的入口文件做點小改變:
【補充:編輯器建議使用vscode,我還沒裝,暫時先用phpstorm】
打開 APP.vue 文件,代碼如下(解釋在註釋中)
<!-- 展示模板 --> <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> //導入組件 import Hello from "./components/Hello" 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/,一般修改後會自動刷新,顯示效果