Vue脚手架文件结构

1.问题:

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

2.解决:

真实项目中,都是把不同用途的js文件,分门别类的放在不同的专门的文件夹中分类保存。
比如:
Vue脚手架文件结构_第1张图片

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页面的

以及内部的页头和
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:专门包含当前组件的HTML内容,即有提示又有颜色区分。极其有利于代码的编写和纠错。
b:专门包含当前组件的js对象
c:专门包含当前组件的css代码
所以,将来vue脚手架中,只要创建一个组件(全局组件,子组件,页面组件),一律都要创建为.vue文件。

你可能感兴趣的:(vue.js,bootstrap,javascript)