本文共 609 字，大约阅读时间需要 2 分钟。

本文中用到的项目来自：https://github.com/keepfool/vue-tutorials

第一次接触vue，记录下自己学习成果

目录结构

项目的效果

2. 各个目录内容

1）main.js 项目的入口文件，创建了根vue实例，并引入根组件app.vue。每个 Vue 应用都是通过用 Vue 函数创建一个 Vue 实例开始的（一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成）

main.js 和 index.js 在vue项目中是关联在一起的 2）App.vue 根组件 本图中的1和2 分别对应的是效果图中的1和2 在根组件中使用了SimpleGrid组件，使用组件时将驼峰式的名称对应成-连接的名称，这是一种使用组件的格式 3）index.html 主页，项目入口 文件通过引入了根组件 4）SimpleGrid.vue 定义了一个组件 这部分就是效果图中的2部分

转载地址：http://zurlf.baihongyu.com/