建立一个好的前端架构是开始开发Web应用或网站的一个基本步骤。良好的实践和编码常规是必不可少的，但是结构呢？我们如何在可控的时间内构思一个好的架构？但最重要的事情是，我们应该从哪里开始？
当我开始思考这个问题时，我意识到一些事情：
我想要一个多页面项目（一个Web应用或网站）；
我希望我的项目支持不同的屏幕尺寸和分辨率，换句话说，我希望它是响应式的；
我希望最终产品是可被维护的；
我希望最终产品性能上是出色的；
我希望可以为将来的项目重复使用相同的模板。
my-project
├── .idea # 这个是编辑器生成的
├── build # Webpack 配置文件放在这里
├── config # Vue 基本配置文件放在这里
├── node_modules # 第三方依赖
├── src # 项目源码（核心文件）
│ ├── assets # 资源文件（js, css, scss）
│ ├── components # 所有组件
│ ├── js # 自己写的 js，里面各种工具类方法等
│ ├── mixins # 混合
│ ├── router # 路由
│ ├── vuex # 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── static # 静态资源，一般放 img
├── theme # 主题文件，修改的 Element-UI 主题
├── .babelrc # babel 编译配置
├── .editorconfig # 代码格式
├── .gitignore # Git 提交忽略的文件配置
├── .postcssrc.js # 转换 css 的工具配置文件
├── element-variables.css # Element 全局定义的变量，不明白为啥放这儿
├── index.html # 主页模板
├── package-lock.json # 用来锁定依赖的版本号（NPM 自动生成）
├── package.json # 项目基本信息
project
\css
\imgs
\js
\controllers
pageOne.js
pageTwo.js
\libs
angular.js
jquery.js
analytics.js
\plugins
jquery.tooltip.js
textResize.js
formValidation.js
\views
pageOne.js
pageTwo.js
\scss
\framework
_core.scss
_forms.scss
_input.scss
_mixins.scss
_variables.scss
\layouts
_all.scss
_phablets.scss
_tablets.scss
_desktop.scss
_desktop-large.scss
_retina.scss
\pageOne
_all.scss
_phablets.scss
_tablets.scss
_desktop.scss
_desktop-large.scss
_retina.scss
\pageTwo
_all.scss
_phablets.scss
_tablets.scss
_desktop.scss
_desktop-large.scss
_retina.scss
\libs
_animate.scss
_normalize.scss
_reset.scss
\plugins
_jquery.tooltip.scss
_jquery.fancyInput.scss
文件夹树注解
imgs
存放所有的图片文件：.png、.jpg、.jpeg、壁纸等。
示例：icon.png、home-background.jpeg、userAvatar.jpg。
js（主文件夹）
存放.js文件。子文件夹组织情况如下：
\controllers（子文件夹）
存放angular控制器，每一个控制器都有一个与对应视图相同的名字。比如，如果home.html需要一个angular控制器，你可以创建一个像这样的文件：project\js\controllers\home.js。
示例：home.js、user-registration.js、user-login.js
\libs（子文件夹）
用于存放JavaScript库，当然这里不包含插件。
示例：jquery-latest.js、angular.js、googleAnalytics.js
\plugins（子文件夹）
插件需要依赖关系来工作，而库不需要，这也就是为什么这里创建两个文件夹的原因。
示例：jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js
\views（子文件夹）
存放所有表象的东西，每个文件都与对应的视图名称相同。例如，如果home.html需要一些效果、材料以及插件初始值，你可以创建一个像这样的文件：project\js\views\home.js。
示例：home-animations.js、user-registration.js、user-login.js、site-animations.js
CSS（主文件夹）
这个文件夹包含了所有从主SCSS文件中生成的CSS。例如home.scss会在该文件中生成对应的home.css文件。
\libs（子文件夹）
即使是对CSS文件，我也会区分库和插件，这里有些CSS库例子。
示例：_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss
\plugins（子文件夹）
CSS文件包含于该文件夹中是使JavaScript插件工作的必备风格。
示例：_jquery-fancyInput.scss、_jqueryTooltip.scss
\framework （子文件夹）
我决定在这个目录中存放scss文件以共享到整个项目页面，框架子文件将以下面的方式组织：
_variables.scss（项目变量声明——colors、spacings等）
_mixins.scss（项目mixin声明——typography、clearfix、animations等）
_forms.scss（自定义表单样式和重置）
_input.scss（自定义输入样式和重置）
\layouts (子文件夹)
这是一个敏感的部分。这个目录中的文件以这种方式组织：它们涵盖所有屏幕分辨率、遵循移动第一的原则。所以，你应该使用_all.scss声明你自己的风格。在该文件中的规格声明是对所有屏幕尺寸和所有视图都有效的。如果你希望你的网站适应性强的话，就不要仅仅是重写规则，为其他屏幕分辨率声明它们。
文件夹组织结构如下：
phablets (481up) _phablets.scss
tablets and small laptops (768up) _tablets.scss
desktops (1030up) _desktop.scss
desktops with large screens (1204up) _desktop-large.scss
retina displays exceptions (@2x) _retina.scss
这些文件将把握布局异常，被称为mediaqueries。
请注意：这些文件共享于所有视图（HTML页面）。这就是为什么你需要在scss\layouts文件下创建一个新的文件夹以给定一个特定的风格到一个特定的页面。
---/html/
|---- /index
|---- /index/index.html 首页
|---- /user/ 与用户相关的页面
|---- /user/login.html 登录页
---/css/
|---- /base.css 重置浏览器样式
|---- /page 逻辑页面的css
|---- /page/pagename.css 单独书写的css
|---- /common.css css通用样式库
---/js/
|---- /lib 公用组件
|---- /lib/jquery.2.2.3.min.js 调用jq库文件
|---- /page 逻辑页面的js
|---- /page/pagename.js 单独书写的js
|---- /common.js 公用方法
---/img/
|---- /page 页面对应的图片
|---- /page/wap 手机端图片夹
|---- /page/wap/wap_icon.png 手机端图标
|---- /logo.png 公用图片
