vue-cli 可以快速的创建 vue 项目, 可以方便的集成 webpack 工具, 简化了开发流程. 对于新手来说, vue 的目录结构是必须要理解的.
项目开发的文件都在 src 下面, 与 src 平级的有一个 index.html, 其他的都是开发环境所需要的文件, 不用过多的关注. 打开 index.HTML 发现并没有 script 标签引用 JS 文件, 这是因为 webpack 这个工具在运行的时候会自动拷贝 index.HTML 在内存中, 并在 </body> 前面加一个 script 标签并引入 src->main.JS 文件. main.JS 中主要创建了一个 new Vue 实例, Vue 实例中配置了 el,data,component,router 等.
在 main.JS 中引入了同级目录中的 App.vue 组件, 并且挂载了组件. 用 template 替换挂载元素的模板组件, 挂载元素的内容都将被忽略. 即用 template 替换 index.HTML 里面的 <div id="app"></div>. 所以说 App.vue 就是这个应用的主界面.
App.vue 里面放了一个 <router-view/> 这是一个路由占位符, 是用来显示在 main.JS 挂载的那个路由的.
router 目录下有一个 index.JS 文件, 使用来创建 new Router() 实例的, 里面配置对应的路径和组件文件.
组件文件都放在 components 文件夹下, 供 router 和 App.vue 使用, 是. vue 的文件类型.
来源: http://www.bubuko.com/infodetail-3218976.html