《vue新建篇》文件结构

86 阅读1分钟

Vue文件结构

1、文件结构

image.png

image.png 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/ ,一般修改后会自动刷新,显示效果如下所示:
image

4、另一个解释图片

image