给项目的入口文件做点小改变:
【补充:编辑器建议使用vscode,我还没装,暂时先用phpstorm】
打开 APP.vue 文件,代码如下(解释在注释中)
<template> div id="app"> img src="./assets/logo.png"router-view/> hello></</div> > script> //导入组件 import Hello from "./components/Hello console.log(1) export default { name: 'App,components:{ Hello } } 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; } >
修改 src/components/Hello.vue
class="hello"> h1>{{ msg }} export { name:helloreturn { msg:cyy要学习vue啦~ } } } >
重新打开页面 http://localhost:8080/,一般修改后会自动刷新,显示效果