Vue脚手架文件结构

1.问题：

所有js文件都堆在一个js文件夹里，管理和使用非常混乱

2.解决：

真实项目中，都是把不同用途的js文件，分门别类的放在不同的专门的文件夹中分类保存。
比如：

3.vue脚手架也是将项目文件分门别类的保存在专门的文件夹中：

（1）public文件夹：

a：SPA应用唯一完整的HTML页面。
b：img文件夹
c：第三方开发的压缩过的css或js源代码

	css/bootstrap.min.css 
	js/jquery-1.11.3.min.js
	js/bootstrap.min.js

（2） src文件夹：我们自己编写的一切源代码

a：views 文件夹：包含所有当做页面使用的组件
b：components 文件夹：包含所有不能成为完整页面的全局组件或子组件片段
c：router 文件夹：包含路由字典和路由器对象的文件夹
d：assets 文件夹：自己开发的一些通用的工具代码（企业中再了解）
e：App.vue：保存着唯一完整的HTML页面的<div id=“app”>以及内部的页头和<router-view>
f：main.js：保存着整个项目唯一的new Vue()代码
运行时，public/index.html + src/App.vue + src/main.js，再重新组成唯一完整的HTML页面。

4. " . vue "文件

（1）问题：传统的使用js文件创建组件的方式，有两个问题：

a：HTML内容是写在模板字符串中，既没有提示，又没有颜色区分！极其不便于代码编写和纠错。
b：在js文件中，就没有编写css内容的位置。

（2）解决：vue脚手架中首创了一种新的文件格式：.vue文件，同时包含：

a：<template></template>专门包含当前组件的HTML内容，即有提示又有颜色区分。极其有利于代码的编写和纠错。
b：<script></script>专门包含当前组件的js对象
c：<style></style>专门包含当前组件的css代码
所以，将来vue脚手架中，只要创建一个组件（全局组件，子组件，页面组件），一律都要创建为.vue文件。