{"id":21557145,"url":"https://github.com/shenfe/fev","last_synced_at":"2026-04-17T07:32:31.295Z","repository":{"id":143949387,"uuid":"91606953","full_name":"shenfe/fev","owner":"shenfe","description":"A simple and universal architecture for frontend projects.","archived":false,"fork":false,"pushed_at":"2017-06-27T15:59:48.000Z","size":205,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T03:28:47.043Z","etag":null,"topics":["architecture","babel","frontend","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shenfe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-17T18:18:00.000Z","updated_at":"2017-06-16T06:06:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"85dc8785-73e6-47f8-a21b-207a0521f9aa","html_url":"https://github.com/shenfe/fev","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shenfe/fev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Ffev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Ffev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Ffev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Ffev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shenfe","download_url":"https://codeload.github.com/shenfe/fev/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Ffev/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31919977,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["architecture","babel","frontend","webpack2"],"created_at":"2024-11-24T08:11:10.939Z","updated_at":"2026-04-17T07:32:31.268Z","avatar_url":"https://github.com/shenfe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fev\r\n\r\nA simple and universal architecture for frontend projects.\r\n\r\n    .\r\n    ├── README.md                 # project document\r\n    ├── package.json              # project profile\r\n    ├── src                       # source files\r\n    │   ├── controller/               # controller roles\r\n    │   ├── view/                     # view fragments\r\n    │   └── static/                   # static resources\r\n    ├── dest/                     # built files\r\n    ├── mock/                     # mock data\r\n    └── script/                   # development scripts\r\n\r\n\r\n## `src/` =\u003e `dest/`\r\n\r\n`controller`、`view`、`static` 路径下的代码最终会被合入 `static`，如：\r\n\r\n    └── src\r\n        │\r\n        ├── controller                    # controllers\r\n        │   │\r\n        │   ├── api.js                        #   API controller file (if necessary), APIs (and hooks)\r\n        │   ├── event.js                      # event controller file (if necessary), events (and hooks)\r\n        │   ├── route.js                      # route controller file (if necessary), routes (and hooks)\r\n        │   ├── store.js                      # store controller file (if necessary), stored status (and hooks)\r\n        │   └── ...\r\n        │\r\n        ├── view                          # views\r\n        │   │\r\n        │   ├── page-page1/                   # view fragment folder, page1\r\n        │   ├── module-module1/               # view fragment folder, module1\r\n        │   ├── component-component1/         # view fragment folder, component1\r\n        │   └── ...\r\n        │\r\n        └── static                        # common static files\r\n            │\r\n            ├── script                        # common scripts\r\n            │   │\r\n            │   ├── helper.js\r\n            │   ├── util.js\r\n            │   └── ...\r\n            │\r\n            └── style                         # common styles\r\n                │\r\n                ├── reset.css\r\n                ├── global.css\r\n                └── ...\r\n\r\n最终合并为：\r\n\r\n    └── dest\r\n        │\r\n        └── static\r\n            │\r\n            ├── api.js\r\n            ├── event.js\r\n            ├── route.js\r\n            ├── store.js\r\n            ├── ...\r\n            │\r\n            ├── page-page1/\r\n            ├── module-module1/\r\n            ├── component-component1/\r\n            ├── ...\r\n            │\r\n            ├── script/\r\n            └── style/\r\n\r\n并经过编译打包，如：\r\n\r\n    └── dest\r\n        │\r\n        ├── favicon.ico\r\n        ├── page1.html\r\n        ├── page2.html\r\n        ├── ...\r\n        │\r\n        └── static\r\n            │\r\n            ├── app.js          # if SPA\r\n            │\r\n            ├── page1.js\r\n            ├── page1.css\r\n            ├── page2.js\r\n            ├── page2.css\r\n            ├── ...\r\n            │\r\n            ├── common.1.js\r\n            ├── common.1.css\r\n            ├── common.2.js\r\n            ├── common.2.css\r\n            └── ...\r\n\r\n因此：\r\n\r\n    dest.static = pack(src.controller ∪ src.view ∪ src.static)\r\n\r\n### 项目源码的调用关系\r\n\r\n    view  ──────\u003e  controller\r\n      │              │\r\n      │              │\r\n      │              v\r\n      └─────────\u003e  static\r\n\r\n\r\n## `package.json` =\u003e `script/`\r\n\r\nAll dev script entrances are defined in `package.json` file, and starting with `npm run`. `npm` commands will invoke\r\nscripts in the `script` directory, where there are webpack config files, self-defined webpack loaders and plugins,\r\ngulp config files, server-running scripts, or other self-defined processing scripts.\r\n\r\n### development or production\r\n\r\nBuild for development environment or production environment.\r\n\r\n`$ npm run dev`\r\n\r\n`$ npm run pro`\r\n\r\n### server\r\n\r\nRun a web server for development to serve pages, resources and mock data.\r\n\r\n`$ npm run server`\r\n\r\n### preview\r\n\r\nPreview a page, module, component, or all.\r\n\r\n`$ npm run preview -- ./module-module1 ./page-page1`\r\n\r\n`$ npm run preview`\r\n\r\n### proxy\r\n\r\nRun an extra server for proxy requests or resources.\r\n\r\n`$ npm run proxy`\r\n\r\n\r\n## `mock/`\r\n\r\nAll mock data.\r\n\r\n\r\n## Write a Component\r\n\r\n把`view/`中的 page、module、component 统称为组件。组件对任何外部或内部的依赖，都在 js 中使用 require 或 import 引入。\r\n\r\n一般地，组件最终导出为一个 function，function 可以是类，也可以不是类；组件还可以导出一个 object，像 `*.vue` 单文件那样，导出的 object 用于 Vue 的构造函数创建 Vue 组件实例 。\r\n\r\n### 引入 js 类库\r\n\r\n    var helper = require('/static/script/helper');\r\n    import other from './other'\r\n\r\n### 引入 css 样式\r\n\r\n    require('./index.css'); // 如果在 index.js 中则无需 index.css\r\n\r\n### 引入其他组件\r\n\r\n    var module1 = require('/view/module-module1');\r\n    var module2 = require('./module-module2');\r\n\r\n### 引入 html 模板\r\n\r\n    var headerTemplate = require('./header.tpl');\r\n    var footerTemplate = require('./footer.vm');\r\n\r\n### 编写组件类\r\n\r\n    class MyComponent {\r\n        constructor(props) {/**/}\r\n        render() {/**/}\r\n    }\r\n    export default MyComponent\r\n\r\nOr\r\n\r\n    var MyComponent = function (props) {/**/};\r\n    MyComponent.prototype.render = function () {/**/};\r\n    module.exports = MyComponent;\r\n\r\nHowever, prototype-based class definition is not recommended now.\r\n\r\n### 编写函数式组件\r\n\r\n    const MyComponent = (props) =\u003e {/**/}\r\n    export default MyComponent\r\n\r\nOr\r\n\r\n    var MyComponent = function (props) {/**/};\r\n    module.exports = MyComponent;\r\n\r\nThey are all pure functions.\r\n\r\n### 编写对象构造组件\r\n\r\n`*.vue` 单文件是典型的将 Vue 组件抽象成一个 object，包含了 Vue 组件构造函数所需的组件信息。\r\n\r\n例如在一个 `*.vue` 文件中：\r\n\r\n    export default {\r\n        name: 'MyComponent',\r\n        data() {\r\n            return {/**/}\r\n        },\r\n        methods: {/**/}\r\n    };\r\n\r\n`*.vue` 文件导出的组件默认为 Vue 组件类型。而一般地，组件要导出为一个 object，请指明组件的类型，即它最终会被传入哪种构造函数进而构造出实例。\r\n\r\n    var MyComponent = {\r\n        type: 'velocity',\r\n        name: 'MyComponent',\r\n\r\n        // 如果数据需要通过js进行转换\r\n        data: function (data) {\r\n            return data;\r\n        },\r\n\r\n        // 如果数据需要使用另一个模板转换\r\n        data: require('./data.vm'),\r\n\r\n        // specify the main template; `index/*` will be imported by default\r\n        template: require('./index.vm'),\r\n\r\n        // will be DOMs as soon as the DOM is ready\r\n        elements: {\r\n            el1: '#el1',\r\n            el2: '[node-type~=\"el2\"]'\r\n        },\r\n\r\n        methods: {},\r\n\r\n        // get data from DOMs, bind events, and so on\r\n        ready: function () {}\r\n    };\r\n    module.exports = MyComponent;\r\n\r\n## Build Project Files\r\n\r\nIn fact, common files and static files are not equal. Two dimentions should be taken into consideration, code mutation and universality.\r\n\r\nDynamic logic codes are those always changing with production requirements, usually related to the business logic in web pages.\r\n\r\nUniversal helping codes are the libraries, utilities, vendors, reset styles, UI widgets and so on, which seldom alter, do not rely on the logic in any page but are required by most pages in different degrees.\r\n\r\nAt times, there is some universal logic codes as well (e.g. global styles, common constants and procedures, server-side APIs, data-processing helper functions), which could be included and built into either page logic codes or common codes optionally.\r\n\r\nWe encourage that, each page has its own static code and dynamic code as it requires, and different pages may share the same static code because two points: \r\n\r\n* Their requirements of static codes are the same.\r\n* Each file are named by its content hash.\r\n\r\nUniversal logic codes are packed into page logic, as we suppose that there should not be too much universal logic required by a page.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshenfe%2Ffev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshenfe%2Ffev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshenfe%2Ffev/lists"}