"✧treasure mountain✧"

一、概述什么是ReduxRedux是一个JavaScript状态容器 提供可预测化的状态管理简单来说 就是存储数据的(和Vuex类似)Redux可以构建一致化的应用 运行于不同的环境(客户端、服务器、原生应用) 并且易于测试不仅于此 它还提供了超爽的开发体验除了和 React 一起用外Redux还支持其它界面库它体小精悍(包括依赖只有2kB)为什么要使用Redux随着JavaScript单页面开发日趋复杂 JavaScript需要管理更多的state(状态)这些state可能包括服务器响

还记得去年这个时候接手学长留下来的微信小程序项目 当时看到学长用的是fetch获取数据 还以为是微信提供的API…????一、什么是fetchFetch API提供了一个JavaScript接口 用于访问和操纵 HTTP 管道的一些具体部分 例如请求和响应它还提供了一个全局fetch()方法 该方法提供了一种简单 合理的方式来跨网络异步获取资源因此 简单来说就是Ajax的替代品 也可以用于获取数据Fetch API由于是基于Promise封装的 因此解决了Ajax的回调地狱问题 提高了代码的可读性

Ant Design简称Antd 是基于Ant Design设计体系的React UI组件库 主要用于研发企业级中后台产品安装npm install antd -S使用导入组件：import { DatePicker } from 'antd';全局导入样式：import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'然后在组件中直接用标签形式引用即可：<DatePicker></DatePicker>imp

一、路由模块在React项目中 若要实现页面的跳转 需使用路由而react-router-dom正是React推荐的常用路由模块安装npm install react-router-dom按需导入react-router-dom路由模块HashRouter是路由的根容器 所有和路由相关的东西都要包裹在HashRouter内部 且一个网站只需要使用一次HashRouterRouter是路由规则(rules) 其上有两个重要属性：path和componentLink表示路由链接 类似于Vue中

Context特性若组件多层包裹 且外层属性或方法要传递给内层的组件 则传递会变得比较麻烦比如：import React from 'react'; export default class Parent extends React.Component { constructor(props) { super(props); this.state = { mycolor:"red" } } rende

在React中时常会遇到this指向的作用域问题 从而导致报错先来个Demo：功能很简单 点击按钮改变文字import React from 'react';export default class BindWithThis extends React.Component { constructor(props) { super(props); this.state = { msg:"BindWithThis" }

一、defaultProps默认值在组件内部 有时 有一些数据必须存在 程序的正常运行依赖着这些数据 而这些数据需要外界传入此时 即使用户并没有传递参数 组件内部也要提供默认值 以供程序的正常运行因为用户若不传递数据 则程序可能会出问题在React中 可以通过静态的defaultProps属性来设置组件的默认值比如：import React from 'react';export default class Hello extends React.Component{ constr

什么是生命周期每个组件的实例从创建到运行再到销毁 在这个过程中的特定阶段会触发一系列的事件这些事件就叫做组件的生命周期函数React的组件生命周期React组件的生命周期分为三部分：创建 运行 销毁组件创建阶段(在组件的整个生命周期中只会被执行一次)componentWillMount / 组件将要挂载render / 渲染虚拟DOM元素componentDidMount / 组件已经挂载组件运行阶段(根据props属性或state属性的改变 有选择性地执行0或多次若属性从创建开

一、绑定事件在React中 所绑定的事件的名称都是由React提供的 因此 事件名称必须按照一定的规范名称的首字母必须是大写的(即小驼峰命名法) 例如onClick或onMouseEnter且在为事件绑定函数的时候 必须用花括号包裹 而不能为字符串类型例如：<button onClick={function(){console.log("aaa")}}>click me</button>但行内式不太方便 可以将函数进行抽离像这样：import React from

在React中 JSX的虚拟DOM组件同样可以设置样式 且设置方式与普通的写法大同小异CSS样式有两种写法 分别为行内样式 和 封装样式行内样式：在JSX中 行内样式不能为style设置字符串格式的值 而是对象键值对类型的值若出现连字符 则从第二个单词开始开头要大写 否则必须为字符串格式在行内样式中 若是纯数值类型的样式 则可以不用引号进行包裹 但若为字符串类型的样式 则必须用引号包裹例如：export default class Hello extends React.Component{

Class创建组件React创建组件有两种方式 一种是function创建方式具体可以看我这篇博客：React学习之旅Part4：React组件的function创建方式及传值、抽离为单独jsx文件还有一种更常用且推荐的 就是class创建方式了class方式创建组件 有三个需要注意的地方：1、若要使用class关键字来定义组件 则必须让组件继承React.Component类2、在组件里必须用render函数渲染 否则会报错3、必须返回合法的JSX虚拟DOM结构 若没有要返回的内容 则re

创建方式二：class关键字class关键字是ES6的新特性例如 创建一个动物类：class Animal{}(有Java的感觉了…)构造器用constructor创建构造器 用法和Java的构造函数相同每个类中都有一个构造器 若没有手动指定 那么默认每个类中有个看不见的空构造器构造器的作用是每当new这个类的时候首先执行构造器中的代码 常用于初始化赋值class Animal{ // 类中的构造器 constructor (name,age) {

一、创建方式：构造函数首先导包import React from 'react'import ReactDOM from 'react-dom'可以用构造函数来创建组件一个构造函数就是一个组件组件的首字母必须大写 否则浏览器将当作普通标签 解析失败 从而报错在组件中必须返回一个合法的JSX虚拟DOM元素 否则会报错function Hello(props)// 在构造函数中接收外界传来的数据{ // 若在一个组件中return null 则代表该组件为空 什么都不渲染 /

JSX语法可以：渲染数字渲染字符串渲染布尔值为属性绑定值渲染JSX元素渲染JSX元素数组将普通字符串数组转换为JSX数组并渲染可直接将标签放入render()方法中：该标签经过Babel的转换后不是一个HTML标签了 而是一个对象import React from 'react'import ReactDOM from 'react-dom'ReactDOM.render(<div>我是帅哥</div>,document.getElementById("

一、安装使用React前 当然需要先安装包输入cnpm i react react-dom -S安装两个必须的包react：专门用于创建组件 同时 组件的生命周期都在该包中react-dom：专门进行DOM操作最主要的应用场景就是ReactDOM.render() 实现渲染(注：-S即-save的简写 包会在package中的devDependencies对象中 是在开发环境中要用到的-D即-save-dev的简写 包会在package中的dependencies对象中 是在生产环境中要用

一、概念React 是一个用于构建用户界面的JavaScript库React可以构建高效 快速的用户界面 它是一个轻量级库 因此很受欢迎它遵循组件设计模式 声明式编程范式和函数式编程概念 以使前端应用程序更高效它使用虚拟DOM来有效地操作DOM 并且它遵循从高阶组件到低阶组件的单向数据流React有两个重要知识点：虚拟DOM和Diff算法它们可以说是React的核心内容二、核心虚拟DOM(Virtual Document Object Model)DOM是浏览器中的概念 即 用JS对象来

Nuxt项目完成了 剩下的就是部署到服务器上了但是网上的教程多半含混不清 顺序混乱 对新手不太友好 索性自己写一个比较全的教程吧介绍Nuxt项目打包后发布在服务器上是前台运行的 启动后 若将窗口关掉则无法访问使用pm2可以完美解决该问题pm2是一个带有负载均衡功能的Node应用的进程守护工具 允许独立代码利用全部服务器上的所有CPU 并且能够保证进程永远活着(alive)pm2有着0秒的重载 还能提供监控等功能 是个很实用的工具环境准备一、首先当然是安装Node了安装pm2需要npm 包括

近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好因此用Nuxt重构了该项目 对项目进行了一次优化由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下一、概念什么是NuxtNuxt.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR)Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名对于公司内部网站等不需要排名的网站 可以不用SEO但对于那些

最近在项目里需要发送Ajax请求调接口 由于Vue2.0版本后不再更新vue-resource了 遂选择了Axios一、安装Axios和vue-axios由于Axios是一个库 而不是插件 因此若要在组件里使用 则需要在每个组件里use() 比较麻烦vue-axios是一个包装器 用于将Axios集成到Vue上 这样即可通过全局方法Vue.use()使用Axios插件了npm install --save axios vue-axios二、配置1、引入Axios：import Vue fro

在做Vue项目的时候发现 当路由跳转时 页面是不会自动跳转到顶部的 而是停留在当前已滚动的距离实现方法其实很简单 共有三种方法可实现页面自动跳转到顶部在路由的main.js(router.js)里添加如下代码即可：方法一：// 跳转后自动返回页面顶部router.afterEach(() => { window.scrollTo(0,0);})方法二：const router = new VueRouter({ routes:[...], scrollBehavior

一、页面自定义meta标签可以为每个页面单独设置不同的meta标签 以便于SEO全局的meta标签在nuxt.config.js文件里配置而单独的meta标签在组件的内部<script>标签内进行配置即可值得注意的是：hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description因为默认的meta的hid属性就是descriptio...

一、默认模板和默认布局通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板默认模板在项目的根目录下创建一个名为app.html的文件 Nuxt即可自动将其识别为默认模板：用法和字符串拼接有点类似 可将{{HEAD}}视为头部内容 将{{APP}}视为页面主体内容(HEAD和APP都需大写)<!DOCTYPE html><html l...

一、路由在Vue中 需要手动配置router路由规则 而Nuxt省去了手动挨个配置的麻烦Nuxt会自动检测并配置路由 因此 只需要直接在浏览器访问即可但Nuxt自动生成的路由规则有着一定的规律普通路由若组件是在文件夹里 则前面需要带上文件夹的名称若URL不带组件名 则默认路由到的是文件夹中的index.vue例如 目录结构如下：pages--| user-----| index...

Nuxt项目的基本目录：其中：□.nuxt：在npm run dev启动项目的时候自动生成的临时文件 类似于vue的dist通常无需多关注□assets：静态资源目录通常用于放置LESS SASS JavaScript文件□components：存放自己写的Vue的组件□layouts：存放布局文件□middleware：存放中间件□node_modules：存放n...

一、简介Nuxt.js是一个基于Vue.js的轻量级应用框架 可以在服务器端将vue渲染成html返回服务器Nuxt可用来创建服务端渲染 (SSR) 应用 也可充当静态站点引擎生成静态站点应用 具有优雅的代码结构分层和热加载等特性通过对客户端/服务器端基础架构的抽象组织 Nuxt.js主要关注应用的UI渲染SSR(服务端渲染)相比SPA(单页面应用)的优点：对SEO的支持SPA(单页...

▲扩展面板该组件是一个信息栏 当点击展开后 能显示更多信息使用<v-expansion-panels>标签创建一个扩展面板组 里面可以有很多独立的扩展面板项添加accordion手风琴效果 移除扩展面板打开后的边距(默认离其它扩展面板之间是有一些距离的)添加popout使面板以弹出的形式打开(默认是下拉方式打开)添加inset使面板以嵌入的形式打开(默认是下拉方式打开)...

▲栅格系统Vuetify附带了一个使用flex-box构建的12点栅格系统相当于将页面宽度平均分成了12等分 可以独立设置每个元素在页面的的宽度在栅格系统的最外层是<v-container>标签 该标签能使里面的内容居中水平填充在页面上展示在<v-container>标签上添加fluid 可使其有更小的左右边距用<v-row>标签包裹每一行的内容...

▲导航栏使用<v-app-bar>创建一个导航栏添加app 使之能固定在页面上方(fixed)添加flat 移除阴影用color属性设置颜色添加dense 使导航栏更窄添加hide-on-scroll 页面往下滚动时导航栏隐藏添加invert-scroll 页面往上滚动时导航栏隐藏用src属性设置背景图片地址使用<v-toolbar-title>创建导...

一、介绍Vuetify是什么Vuetify是Vue.js的头号组件库其通过一致的更新周期 对以前版本的长期支持 响应式社区参与 丰富的资源生态系统和对高质量组件的贡献来为用户提供构建丰富且引人入胜的web应用程序所需的一切二、安装Choose - 1：若用vue-cli 则输入vue add vuetify安装Choose - 2：若用webpack 则输入npm install vu...

注：使用前需先安装Nodejs首先 安装vue-cli：npm install -g @vue/cli创建一个新项目：vue create 项目名1、选择默认(default)还是手动(Manually)：回车进行确认2、选中要安装的组件：上下箭头移动 空格选择/取消 回车确认3、选择项目所需的功能：4、选择语法检查方式：Lint on save表示保存就检测Li...

一、概念1、Vuex是什么Vuex 是一个专为Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态 并以相应的规则保证状态以一种可预测的方式发生变化(官网摘的 可能有些难懂)上面的状态管理模式中的状态 可以理解为是数据即 可以将一些共享的数据保存到Vuex中 以方便程序中的任何组件直接获取或修改公共数据也就是说 Vuex相当于是一个全局的共享的数据存储空间 ...

一、概述ES6的Promise对象可解决前端开发中常见的回调地狱问题(即大量异步回调函数的嵌套) 为异步编程提供了一种很好的解决方案首先 什么是异步问题例：一个异步的读取文件的方法const fs=require("fs")const path=require("path")function getFileByPath(filePath){ fs.readFile(fil...

在使用Mint UI开发时 若导入全部Mint UI 则文件会比较大为优化 可按需导入Mint Ui的组件 只导入所需要的组件可通过babel-plugin-component插件以实现按需导入首先 安装babel-plugin-component：npm install babel-plugin-component -D然后 在Babel的配置文件.babelrc里添加一个组件：(...

一、简介Mint UI是一个基于Vue.js的移动端组件库若对组件的概念不太了解 请参看本人的另一篇博客：Vue学习之旅Part8：Vue全局组件和私有组件的创建及组件切换动画Mint UI和Bootstrap不一样 Bootstrap并不是一个真正的组件库 而是类似于代码片段而Mint-UI是真正的组件库 是使用 Vue 技术封装的成套组件 可无缝和VUE项目进行集成开发 且只适用于Vu...

默认在<style>标签里设置的样式是全局的样式：<template> <div> <h3>Account - Login</h3> </div></template><script>export default { }</script>...

一、使用vue-router实现路由由于是通过vue-router实现的路由 因此 须先安装vue-router：输入cnpm i vue-router -S以安装vue-router包然后 在main.js里导包：导入VueRouter的包之前 必须先导入Vue的包：import Vue from "vue"import VueRouter from "vue-router"然后...

Vue的组件文件由三部分组成：<template>：HTML代码<script>：业务逻辑<style>：样式在<script>标签内部暴露组件的属性及方法：<template> <div> <h1>登录组件{{msg}}</h1> </div>&...

步骤1：在src下创建一个名为后缀名为vue的文件该文件在Webpack中是纯粹的Vue组件由三部分组成：<template>：HTML代码<script>：业务逻辑<style>：样式例：login.vue<template> <div> <h1>登录</h1> ...

若要在webpack环境下使用vue首先 需在项目中安装Vue：在项目根目录下输入：cnpm i vue -S安装vuemain.js：import Vue from "vue"var vm=new Vue({ el:"#app", data:{ msg:"test" }})index.html：<div id="app">...

一、介绍在Webpack中 默认只能转换一部分ES6的新语法部分更高级的ES6语法或ES7语法 Webpack无法转换比如：ES6中类的静态属性class Person{ static info={name:"Mike",age:18}}console.log(Person.info)此时 Webpack默认打包的时候会报错需要借助第三方loader来处理这些高级的语法...