vue,angular4,react如何搭建完美的工程项目

klivitamJ 发布于2019-08-22 11:05 / 770人阅读

摘要：之搭建前端三大框架基础项目支持特点支持多入口页面自动生成在目录下会创建或者下会自动生成文件自定义模板下创建与同名的优先使用自定义模板否则使用作为模板同时支持与作为模板同时支持与编写样式自动构建目录在目录下配置文件

vue,angular4,react 之webpack搭建 前端三大框架基础项目

webpack3 + typescript+react

https://github.com/githbq/hbq-typescript-react-boilerplate.git
支持typescript + react16 + react-router V3

webpack3 + babel(es6+) + react

https://github.com/githbq/hbq-simple-webpack2-react.git

webpack3 + typescript+vue2

https://github.com/githbq/hbq-typescript-vue-boilerplate.git

webpack3 + typescript+angular4

https://github.com/githbq/hbq-angular-boilerplate.git

特点 1. 支持多入口页面自动生成

在 src/apps/ 目录下会创建 .ts 或者 react 下 .tsx 会自动生成 .html 文件

自定义html模板: src/apps 下创建与 tsx? 同名的 [name].html , [name].pug

优先使用自定义模板,否则使用dev-config/index.template.pug 作为 htmlWebpackPlugin 模板

2. 同时支持ejs 与 pug 作为 htmlWebpackPlugin 模板 3. 同时支持 stylus 与 less 编写样式 4. 自动构建目录在 dev-config 目录下,配置文件完全解耦

├── dev-config
|  ├── configs
|  |  ├── alias.js
|  |  ├── constants.js
|  |  ├── devServer.js
|  |  ├── entry.js
|  |  ├── globalConfig.js
|  |  ├── plugins.html.js
|  |  ├── plugins.js
|  |  ├── proxy.js
|  |  ├── rules.css.js
|  |  ├── rules.js
|  |  └── utils.js
|  ├── index.template.html
|  ├── index.template.pug
|  ├── lite-server-config.js
|  ├── readme.md
|  ├── templateCompilers
|  |  └── pug.js
|  └── webpack.config.js

5. hmr(hot module replace) 代码修改热更新支持 安装 1. 直接 git clone 对应的git仓库地址 2. 采用 iclone-cli 脚手架

npm i -g iclone-cli 
// then 
iclone init -t  [模板名称] -n [工程名称]

环境要求 nodejs v8.4

win nodejs v8.4 百度云盘下载链接 http://pan.baidu.com/s/1bpD78YF
mac 系统直接使用 n latest获取最新版本即可

开发工具安利 VSCODE : 这真的很快很好用

win vscode 最新版 x64-1.16.0 百度云盘下载链接 http://pan.baidu.com/s/1bpB5FEf

本人其它模板项目

koa2 + typescript + mongodb

https://github.com/githbq/hbq-koa2-base.git

nodejs command line

https://github.com/githbq/hbq-module-cli-boilerplate.git

gulp (css js less ts gzip)

https://github.com/githbq/hbq-gulp.git

TODO

README.md 文档还没有写好,挨个写清楚

前端单元测试待加入

编写typescript 开发相关文档

欢迎大家提意见!

云服务器服务器托管云服务器搭建vue项目阿里云服务器搭建vue项目怎么部署react项目 svn服务器搭建完成后如何访问项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91756.html

前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

Jackwoo 2019-08-29 15:37 评论0 收藏0
前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

lemon 2019-08-26 11:59 评论0 收藏0
前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

alphahans 2019-08-02 10:38 评论0 收藏0
2017-07-01 前端日报

摘要：前端日报精选腾讯前端团队社区源码分析入门指南一些关于使用的心得基本类型与引用类型知多少掘金中文第期框架选型周刊第期入门系列模块车栈重构基于的网络请求库某熊的全栈之路的那些奇技淫巧的平凡之路模仿写个数组监听掘 2017-07-01 前端日报精选 Why you shouldn`t use Preact, Fast-React, etc. to replace React today -...

_DangJin 2019-08-20 17:41 评论0 收藏0