西安加盟代理网站建设,wordpress foreach,做的好的大学生旅行有哪些网站好,教育网站建设开发常用的开发工具库
打包工具webpack
webpack是现在最流行的打包工具之一#xff0c;是javaScript的静态模块的打包器。会根据业务逻辑构建一个依赖的关系图#xff0c;每一个依赖的单元都是一个模块#xff0c;模块可以是js文件 可以图片资源或者css资源。在使用webpack的时…常用的开发工具库
打包工具webpack
webpack是现在最流行的打包工具之一是javaScript的静态模块的打包器。会根据业务逻辑构建一个依赖的关系图每一个依赖的单元都是一个模块模块可以是js文件 可以图片资源或者css资源。在使用webpack的时候需要下面三个工具
1. webpack 打包工具
2. webpack-cli 命令行工具
3. webpack-dev-serve node服务器webpack的核心原理
一切皆模块 模块不仅包括js文件还包括css文件和图片文件 。在webpack世界这些都可以是一个模块。通过require或者import的方式引入。按需加载 单页应用在初始加载要加载非常大代码量由于加载时间过长会导致页面有白屏或者等待现象。按需加载就是随着用户的操作每次只加载功能或者业务所需的代码块。webpack 内置了非常强大的代码分割功能来实现按需加载。webpack 核心概念 入口entry :打包入口点在webpack中通过entry来设置出口output 用于指定打包出来的文件的路径和文件名loader编译器 就是除了js文件以外其他文件的编译器其中rules用来配置编辑规则test用于正则匹配excude用于排除特定条件use-loader是test匹配到的解析器模块use-options主要是与use-loader配合使用插件plugins是用于将loader之后的文件进行优化分类压缩并提供公共代码等打包模式modemode打包出来的有两种模式。一种是开发模式 打出来的文件是没有经过压缩的命令webpack --modeldevelopment ;另外一种是生产环境。打包出来的会压缩命令是 webpack --modeldevelopment服务器配置devserve:用于配制本地服务器可以配置启动端口主机地址是否热启动等信息
页面跳转之 react-router-dom
import React from react;
import {HashRouter, BrowserRouter, Router, Redireact, Switch, Link, NavoLink } from react-router-dom;
import Home from ./component/home;
import Detail from ./component/detail;
const Router () {
BrowerRouterRoute path/detail namedetail component{Detail}//BrowerRouter
}
export default Router;路由配置主要有 path: 组件相对路径 name:组件的路径别名 component:组件地址 在路由配置中有两个属性exact、strict 想要严格匹配两个都需要为true
路由的跳转方式
link 或者 NavLink 实质是一个a标签区别是后者在切换的时候 可以切换样式
ul
li
NavLink exact to/ activeStyle{{fontWeight:bold,color:red,
}}home/NavLink
NavLink exact to/detail activeStyle{{fontWeight:bold,color:red,
}}detail/NavLink
/li
/ul.
ul
li onclick{() this.props.history.push({pathname:detail})}
divhome/div
/li
li onclick{() this.props.history.push({pathname:home})}
divdetail/div
/li
/ul组件库ant-design
React 框架主要是实现UI层功能逻辑更多的是依赖第三方模块。而与React搭配得较为契合的第三方模块就是蚂蚁金服前端团队开发的ant-design模块 antd-mobile库提供了丰富的组件常用的有
Tabs 标签页切换标签可以定位到对应的内容Carousel走马灯主要用于轮播图DatePicker 日期选择ListView 长列表
css预处理之Less
less是css的预处理器是对css的一种拓展。它具备动态语言的特点如变量、运算、函数所以是一门动态语言 less既可以在客户端使用也可以在服务器使用 node.js 客户端使用如下
link relstylesheet hrefstyle.less
script srcless.min.js/script服务端 npm install -g less
Less语法
变量 width:100px; div{width:width}运算 width:100px; div{width:width/2}字符串插值 url‘img/index’; div{background: url(“{url}search.png”)}混合 .input{width:100px;height:30px}; divinput{.input,color:red} 注意这里的.input可以看成一个变量带参混合 .input(px) { width: px; height: 30px}; divinput{.input (100px) ,color: red}命名空间 为了不和其他样式重名Less提供命名空间可以将属性集放入命名空间内。 #public{.input(px) {width:px; height:30px }; divinput{#public.input(100px), color:red}} , 这里的#public就是一个命名空间嵌套规则 指的就是父子元素之间的样式可以进行嵌套有利于维护 body{background:white; div{color: red}}Color函数 lighten(red, 10%) 亮度浅10% darken(red, 10%) 亮度深10% saturate(red, 10%) 饱和度深10% desaturate(red, 10%) 饱和度浅10% fadein(red, 10%) 透明度深10% fadeout(red, 10%) 透明度浅10% fade(red, 10%) 表示透明度是第一个参数的10% spin(red, 10) 表示颜色加深10度 spin(red, -10) 表示颜色减弱10度 mix(red, blue) 表示两个颜色的混合值Math函数 round(2.5) 表示四舍五入 结果为3 ceil(2.4) 表示向上取整 结果为 2 floor(2.5) 表示想下去整 结果为3 percentage (0.25) 表示百分之25 如div{border-radius: percentage(0.5)} 得到的就是50%圆角模式匹配 如 condition(switch); condition(red){background: red}; condition(blue){background: blue}; 输入 .condition(red) 得到{background: red}导引表达式 .condition(px)when (px300){background: red}; .condition(px)when (px300) {background: blue}; 当输入.condition(400) 得到的是{background: red}作用域 Less与JS一样有作用域的概念 会优先在作用域内查找变量 没有再往父类中查找javascript 表达式 var:“hello” .toUpperCase() “!”注释 //表示单行注释 /* */表示多行注释import importstyle.less import导入模块
第三方模块安装
所有的模块安装都很简单 就是npm install modelName 例如安装上面router npm install react-router-dom antd 这样就可以同事下载路由模块和蚂蚁的的移动端模块
