如何搭建前端框架（搭建前端框架需要哪些部分）

本篇文章给大家谈谈如何搭建前端框架，以及搭建前端框架需要哪些部分对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享如何搭建前端框架的知识，其中也会对搭建前端框架需要哪些部分进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、web前端开之网站搭建框架之vue详解
• 2、（一）基于 vue-element-admin 前端与后端框架搭建
• 3、从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

web前端开之网站搭建框架之vue详解

网站搭建框架之vue

Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。

对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。
引入vue.js的写法

Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入
，而v-html则会对标签进行编译，只显示标签内的内容。

至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。

V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。

V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。

除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中
通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。
（组件书写格式）
（组件整合）
（注册路由）

路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。

而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。

通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。

（一）基于 vue-element-admin 前端与后端框架搭建

通过 src/settings.js 进行全局配置：

get-page-title.js 在 src/permission.js 中被引用

修改 package.json

执行命令启动
中间件是一个函数，请求和响应周期中被顺序调用
写一个中间函数
调用中间件注意事项：

应用如何响应请求的一种规则

响应 / 路径的 get 请求

响应 / 路径的 post 请求

规则主要分两部分

通过自定义异常处理中间件处理请求中产生的异常

使用时需要注意两点：

浏览器输入 http://localhost:5000/user
安装 boom 依赖，最大的好处是可以快速的帮我们生成一些异常信息

app.js

创建 router 文件夹，创建 router/index.js

创建 router/user.js

创建 router 文件夹，创建 router/constant.js

启动，访问根路径 http://localhost:5000
这里指定的路由的前缀 /user 所有访问路径前要加 /user
访问 http://localhost:5000/user/info
访问一个不存在的路径

自定义路由异常处理中间件
注意两点:

访问一个不存在的路径时，会返回一个 json 的结果，方便前端做出处理

从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

因为现在公司的主要技术栈是React,所以也想着能够搭建一个好的React前端框架，方便在工作中使用；框架在打包过程也做了优化，多线程，拆包，缓存等等手段提升打包速度和质量。主要用到的库包括：

创建带TypeScript模板的react-app，推荐使用yarn,接下来我也主要以yarn做例子

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。antd按需加载以及自定义主题

重新打包就可以了， 所有的主题配置在这里噢
这里利用React-router做路由，同时也会根据用户角色，做权限处理；只有当角色和路由允许的角色一致时才可以访问和展示。

新建router下新建indext.tsx 用于渲染页面

引入Router/index.tsx

新建hasPermission.ts,如果页面 roles 包括用户的角色则返回true,在渲染menu和子页面的时候就根据这个值渲染页面。

比如Home页面，渲染子页面的逻辑：

在这里 SubPages1 下面的 page1 就无法展示出来和访问，如果直接输入路由也会访问页面不存在，因为page1允许的角色 user 而我们角色是 admin 所以无法展示。
useImmer 很好的解决了ReactHooks中的赋值的性能问题，可以单独更新某个对象的某个属性。

上面的赋值方法也可以写到一起,效果是一样的：

Umi Hooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。提供了非常多的Hooks组件，比如上面使用的 usePersistFn ，他的作用：在某些场景中，你可能会需要用 useCallback 记住一个回调，但由于内部函数必须经常重新创建，记忆效果不是很好，导致子组件重复 render。对于超级复杂的子组件，重新渲染会对性能造成影响。通过 usePersistFn ，可以保证函数地址永远不会变化。Umi Hooks功能还是非常强大的，有很多功能很强大的API。大家可以去官方文档看看 https://hooks.umijs.org/zh-CN/hooks/life-cycle/use-update-effect 。

自定义 hooks 其实在我们的开发工作中，还是很常遇到的。 hooks 的好处就是可以抽离公共方法，像组件一样的随意使用，对于快节奏的开发工作还是很舒服的，比如你觉得 react hooks 或者 umi hooks 的api，不能满足自己的需求，也可以自己创新一些api。我这里举个例子，大家写 class 组件写的很多的话，会经常用的 this.setState() ，大家都知道 this.setState() 是异步执行，你无法直接拿到最新的 state 。 hooks 中的 useState 同样也是异步的，你无法直接获取到最新的 state ，所以我自己写了一个 useSetState 方法，用于在修改完状态后能够立即拿到最新的 state 。
我们在src/hooks文件夹下新建 useSetState.ts

使用的方式也很简单，基本和useState一致，只是在setState的时候提供一个回调函数。

这就完成了带回调的 useSetState hooks 的编写，不过这种写法不太推荐在 hooks 中使用，建议需要获取最新的数值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。

状态管理选择的Mobx,Mobx和Redux我都用过，不过当我习惯用Mobx后，就感觉还是Mobx更方便一些，所以更喜欢在项目中用Mobx,现在Mobx已经更新到5.0版本了，不过5.0版本并不支持ie11，所以如果想要兼容性可以选择4.0的版本，或者Redux。
这里推荐一个针对Mobx的库， mobx-react-lite :它是基于 React 16.8 和 Hooks 的 MobX 的轻量级React绑定。

这个主要影响的是调用方法的形式，对于Mobx的书写是一样的，比如写一个加减数值：

这里你的typeScirpt可能会编译不了，会报错：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
解决方法是在 tsconfig.json 加入配置：

完毕以后，一定要把 storeProvider 包裹所需要共享状态的页面，我这里直接放到app.tsx

剩下来就仅仅是调用的事情了：

此外axios的配置应该大家都知道，所以我这也不多说了，具体在我的源码里面也有，utils下的axios.ts

加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin
加入了打包进度条 webpackbar
加入了打包压缩 compression-webpack-plugin terser-webpack-plugin
还对包进行拆包
开发环境的域名代理 devServer
加快打包速度，还可以考虑删除antd-icons，单独去iconfont网站下，按需引入。不然打包会费很多时间

引入dotenv-cli

新增开发环境配置文件 .env.development 和 .env.production 两个文件

然后修改package.json中的启动脚本：

现在 yarn start 或者 yarn build 就会根据环境配置来处理。

还有一些细节的调整，会尽力将这个框架更加完善的。

github地址： https://github.com/Benzic/React-typescript-umihooks-mobx
欢迎star 和提意见 关于如何搭建前端框架和搭建前端框架需要哪些部分的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 如何搭建前端框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于搭建前端框架需要哪些部分、如何搭建前端框架的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。