前端项目结构的划分

-| common // 常用工具以及公共函数
	-| const.js
	-| common.js
	-| util.js
	-| config.js
-| (hoc|mixin|hooks)    // 框架相关的功能文件
-| store
	-| index.js		// 生成实例并进行一些必要配置后导出
	-| entrys.js	// 整合所有所有module并导出
	-| modules
		-| global.js
	-| util.js	// 存放状态相关的工具函数
	-| readme.md	// 说明
	-| 其他...
-| router
	-| index.js		// 生成实例并进行一些必要配置后导出
	-| entrys.js		// 整合所有路由配置并导出
	-| routers
		-| user.js
		-| news.js
	-| util.js	// 存放路由相关的工具函数
	-| readme.md	// 说明
	-| 其他...
-| sass	// 存放样式文件的地方, 像列表,导航等闭着眼睛都知道会复用的样式不要命名太具体如news-list等,直接list1、list1,也不要写到页面对应的css中,而是提到外层防止一些边界情况发生。
	-|	_base	// 存放变量、函数、reset等
	-|  block	// 块级样式、如list、nav等
	-|  element		// 原件级样式、如btn、radio、bredge等
	-|  layout	// 布局级的样式
	-|  common.scss	// 工具类和其他常用样式如动画等
	-|  main.scss	// 导出各个功能块的样式
-| serve    // 存放后端api等后端相关的文件
	-| common.js	// 无法用功能进行划分的接口
	-| request.js	// 根据项目封装后的请求方法
-| view
	-| layout    // 各个路由的路由布局组件
		-| base.jsx
		-| user.jsx
		-| style.css
	-| common	 // 可在各个功能中复用的业务组件
	-| 功能1(login、register等, 对于体量不大的项目,可以直接用user表示注册登录等功能)
		-| api
			-| xxx.js
		-| module
			-| xxx1.js
			-| xxx2.js
		-| 功能1.css	// 可在把该功能所有页面的样式集中到这里处理
		-| common	// 该功能各个页面中复用的业务组件
		-| 页面1
			-| 页面1.jsx
			-| 页面1-Head.jsx
			-| 页面1-List.jsx
			-| 页面1.css	// 注意当使用路由分割时,页面级的css必须是纯的,样式不能作用于其他组件,因为打包后该样式只会在这个页面加载时加载。
		-| 页面2
			-| 页面2.jsx
			-| 页面2.css
	-| 功能2
		-| ...
-| components	// 在各个页面复用的逻辑组件
	-| loading
		-| loading.css
		-| loading.jsx

你可能感兴趣的:(React,Vue)