各种杂的笔记

目录

React生命周期

vue打包发布

Vue打包文件分析与优化

Vue项目源码目录设计

安装stylus依赖包

判断是否在该页面

下载axios

封装ajax请求 api/ajax.js

在api/index.js     包含n个接口请求函数的模块

git生成本地仓库

创建远程仓库

Vue-router

下载vuex模块

容联·云通信

下载mint-ui

Mock.js生成随机数据,拦截Ajax请求

写三级表达式

滑动

Vue中让新增的属性也有绑定

在父组件中调用子组件的方法

缓存路由组件对象

路由懒加载

图片懒加载

自定义日期过滤器

React路由

Redirect的使用

嵌套路由

 编程式路由导航

WithRouter的使用

BrowserRouter与HashRouter的区别

NavLink的使用

Switch的使用

React的css路径（解决样式丢失问题）

Ant Design的引入

类名确定去判断

---

---

React生命周期

_______________________________________________________________

vue打包发布

1.npm run build

2.npm install -g serve

3.serve dist

访问：他会有地址

Vue打包文件分析与优化

1.npm run build --report

2.优化：使用dete-fns代替moment

________________________________________________________________

Vue项目源码目录设计

安装stylus依赖包

npm install stylus stylus-loader --save-dev

这个完全通过缩进控制，不需要大括号和分号，冒号是可选的

判断是否在该页面

 对象语法            :class="{on:'/路由' ===$route.path}"

下载axios

npm install --save axios

封装ajax请求 api/ajax.js

在api/index.js     包含n个接口请求函数的模块

 ———————————————————————————————————————

git生成本地仓库

1.git init

2.git add *

3.git commit -m "名称"

创建远程仓库

4.git remote add origin 仓库地址

5.git push origin master

Vue-router

$router:路由器对象，包含一些操作路由功能的函数，用来实现编程式导航（跳转路由）

$route:当前路由对象，一起当前路由信息数据的容器，path/meta/query/params

下载vuex模块

npm install --save vuex

容联·云通信

短信发送

下载mint-ui

1.npm install --save mint-ui

实现安修打包

2.npm install --save-dev babel-plugin-component 

3.修改babel配置

 

 只在组件使用：只在<script>标签里写import  {MessageBox}  from 'mint-ui'

Mock.js生成随机数据,拦截Ajax请求

1.npm install --save mock.js

Mock.mock(url,template) 记录数据模板。当拦截到url的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

2.在mockServer.js里写import Mock from 'mockjs'

不需要向外暴露任何数据

写三级表达式

要先写v-if="info.supports"

三级表达式如：supportClasses[info.supports[0].type]

滑动

1.npm install --save better-scroll

2.在组件中引入:import BScroll from 'better-scroll'

Vue中让新增的属性也有绑定

在父组件中调用子组件的方法

1.找到子组件的标签 添加ref="xxx"

2.this.$refs.xxx.子组件的方法()

缓存路由组件对象

<keep-alive>

        <router-view/>

</keep-alive>

好处：复用路由组件对象，复用路由组件获取的后台数据

路由懒加载

图片懒加载

1.npm install vue-lazyload -D

2.在main.js里写

 3.在img标签里写v-lazy

自定义日期过滤器

1.npm install --save moment

React路由

1.History.createBrowserHistory() 直接使用H5推出的history身上的API

2.History.createHashHistory() 锚点多了# 兼容性好

下载：yarn add react-router-dom

靠路由链接实现页面跳转：

先去引入

 注册路由：

先导入import  {Route} from 'react-router-dom'

<Route path="/路由" component={导入后的组件名} />

注意：

1.<a>变成<link>，

2.可以给Route 写exact属性  （严格匹配 【需要再开】）

BrowserRouter要包含注册组件和编写组件，一劳永逸可以这样：

  

 

Redirect的使用

嵌套路由

 1.传递Pramas参数

接收params参数 const {id,title} =this.props.match.params

2.传递Search参数

更改上面的：接收参数是   this.props.location.search

 import qs from 'querystring'

urlencoded样子如：key=value&key=value

 去掉参数？该怎么做： qs.parse(search.slice(1))

3.传递state参数

 编程式路由导航

WithRouter的使用

BrowserRouter与HashRouter的区别

NavLink的使用

高亮

然后在html里面写这个类名的样式 

Switch的使用

1.记得导入Switch

2.如下：     好处是这样不用继续向下匹配了

 通常情况下，path和component是一一对应的关系。

Switch可以提高路由匹配效率（单一匹配）

React的css路径（解决样式丢失问题）

1.在index.html里面引入的路径不写./写/

2.把./换成%PUBLIC_URL%

3.在index.js把BrowserRouter改为HashRouter

Ant Design的引入

redux

原理图

 在store.js里写

记得暴露出去

 

 

action如果是Object就是同步，function就是异步：

react-redux

 容器组件靠react-redux创建

 

 

react-redux开发者工具

类名确定去判断

:class="{on:  '/regin' = $route.path}"

路由组件meta