随笔分类 - 前端
摘要：一.前言 移动端web较为常见的使用了标签栏，如下。可以通过切换该tab选项来展示不同的内容。 在antd-moblile中，TabBar是标签栏的组件。现在要和react-route搭配，来给它定义四个路由，每个url对应一个标签。 二.路由定义 参照之前react学习中route的使用。在App
阅读全文
摘要：一.前言 懒加载也有其它叫法，比如按需加载，代码分页等。简单来说，就是将js代码分割成多个文件，根据需要再加载对应js文件。 在单页面应用中，我们可以使用懒加载，根据不同的路由去加载对应页面的js文件。这样可以减少首屏加载时间，同时减少资源浪费。 二.使用React-Route 参考我之前的文章，有
阅读全文
摘要：一.场景 单页应用可以根据路由去加载不同组件，在react中，官方有一个Router组件可以让我们做这个路由配置，实现不同路由去加载不同组件。 二.安装 这里选择react-router的4.x以上的版本，必须要安装react-router-dom。注意v4版本和之前的版本有较大区别。 npm in
阅读全文
摘要：一.组件 React可以将模块拆分为多个组件，用分而治之的思想，让各个组件专注于实现某个功能。在设计上，符合高内聚、低耦合原则。高内聚是组件内部实现自己的逻辑，像展示页面的jsx，定义行为的js，甚至是样式css。低耦合是，各个组件相互依赖关系要弱化，每个组件尽量独立。 二.组件交互 定义一个Hom
阅读全文
摘要：一.定义react数据 var React = require('react'); class App extends React.Component { constructor() { super(); //定义数据 this.state = { text: "hello world" }; }
阅读全文
摘要：一.前言 在学会React项目构建的相关配置后，我们就可以尝试自己创建一个React的组件（Component），并熟悉React的语法和组件使用。 二.创建组件 创建一个js或jsx页面，首先要引入react，然后定义一个class，声明这是个App类，继承react的Component，这就定义
阅读全文
摘要：一.准备 项目构建参考《前端实践项目 目录》，也可以选择使用create-react-app这个脚手架去构建项目。 二.安装 npm安装react。 npm install react --save-dev npm install react-dom --save-dev 需要使用babel来将ES
阅读全文
摘要：一.前言 搭建vue的demo，看这篇 https://www.cnblogs.com/shadoll/p/15002064.html 二.结构 <template> <div>hello world</div> </template> <script> export default { compo
阅读全文
摘要：一.准备 项目构建参考《前端实践项目 目录》，不推荐新手直接使用vue-cli。 二.安装 npm安装vue2。 npm install vue@2.6.11 --save webpack编译时会识别不了.vue文件，所以需要安装相关插件。 npm install vue-loader@14.2.2
阅读全文
摘要：目录 该系列的总目录， https://www.cnblogs.com/shadoll/p/14637373.html 一.说明 开启前端服务的开发工具很多，上一篇就使用了webpack-dev-server，但它的编译文件会存放在内存中，有可能造成电脑卡顿。 本文使用koa来开启服务。koa是一个
阅读全文
摘要：目录 该系列的总目录， https://www.cnblogs.com/shadoll/p/14637373.html 一.说明 接上一篇 前端实践项目（二）webpack生成html和外部引用 ，已经初步搭建了一个小demo。 本文会使用webpack-dev-server来创建一个前端服务，并用
阅读全文
摘要：目录 该系列的总目录， https://www.cnblogs.com/shadoll/p/14637373.html 一.说明 上一篇文章介绍了怎么创建前端项目并用webpack进行打包。前端实践项目（一），创建项目，并使用webpack进行打包编译 本文会介绍如何构建一个前端项目（指基本的htm
阅读全文
摘要：目录 该系列的总目录， https://www.cnblogs.com/shadoll/p/14637373.html 一.创建项目 安装NodeJs，本文演示的NodeJs版本是10.15.3，IDE工具使用VSCode。 通过命令行工具，进入你需要创建项目的文件夹中，然后输入命令npm init
阅读全文
摘要：一.说明 本系列会一步步搭建一个前端框架，记录一下相关知识。比如webpack、koa、angular、react等。 二.目录 前端实践项目（一）使用webpack进行打包编译 前端实践项目（二）webpack生成html和外部引用 前端实践项目（三）webpack-dev-server的使用 前
阅读全文
