Vue文件结构
1、文件结构
2、代码解释
其中App.vue代码如下:
点击查看代码
其中main.js如下:
点击查看代码
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
这三句的意思是首先引入vue, 然后引入了./App即App.vue文件。最后一句是引入一段路由配置。
然后是实例化new Vue .el:’#app’意思谁将所有的组件都放在id为app的元素中。components表明引入的文件,此处就是app.vue这个文件,这个文件的内容将以这样的标签写进#app中。webpack在编译时可以将.vue文件中的这三部分抽出来合成cinderella单独的文件。
3、修改测试
接下来我们可以尝试修改下初始化的项目,将 Hello.vue 修改为以下代码:
点击查看代码
重新打开页面 http://localhost:8080/ ,一般修改后会自动刷新,显示效果如下所示:
4、另一个解释图片