![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
frame class
文章平均质量分 61
luck_lin
这个作者很懒,什么都没留下…
展开
-
使用jenkins+Dockerfile打包部署nodejs项目
如下便是jenkins从git拉下代码后直接发送到服务器的基于nodejs的nuxt ssr项目docker_nuxt(因为用docker就不需要再Jenkins中构建了),其中重点就是Dockerfile和docker_build.sh,其余除了ecosystem.config.js都是项目目录和文件[root@sgr3xwozl6izswys docker_nuxt]# lsapi.config.js assets docker_build.sh components Docke...原创 2021-07-27 17:55:58 · 945 阅读 · 0 评论 -
umi+dva开发环境+常用配置和webpack配置
安装(官方文档:https://umijs.org/zh):yarn global add umi使用:使用umi -v可查看版本,确保全局安装没问题umi g page <文件名>//创建包含目录的页面home/index.js home/index.cssumi g page home/index//创建dva modle文件(如果项目是用yarn cr...原创 2019-10-26 18:10:57 · 9872 阅读 · 0 评论 -
react中使用mobx状态管理
中文文档:https://suprise.gitbooks.io/mobx-cn/content/refguide/api.html安装 Mobxcnpm install mobx -Scnpm install mobx-react -S使用两个 Babel 插件,支持ES6装饰器语法cnpm install @babel/plugin-proposal-decorator...原创 2019-10-20 16:26:09 · 410 阅读 · 0 评论 -
redux(三)react-redux容器组件链接UI组件映射store中的state到props
cnpm i react-redux,然后在App.js中引入react-redux的Provider组件(react-redux的容器组件,始终在最外层),引入当前目录下store下的store.js,将store传递给Provider组件:App.js:import React, { Component } from 'react';import logo from './logo.svg'...原创 2018-05-06 09:42:44 · 2457 阅读 · 0 评论 -
redux(四)用redux-thunk和redux中间件发送异步action
cnpm i redux-thunk,然后在store文件中引入,同时解构出redux的applyMiddleware,将thunk传入中间件,将中间件传入store:import {createStore, applyMiddleware} from 'redux';import reducer from "./reducer";//引入当前目录下合并后的rreducerimport th...原创 2018-05-06 10:20:24 · 759 阅读 · 0 评论 -
react脚手架打包的坑
首先看一下打包后的build文件:相当于静态资源的根目录就是public文件,开发中所需要的图片或其他资源就放在public文件夹下,比如这里img文件中的图片,在任何组件中可以直接通过/img/1.jpg来获取1.jpg这张图片,但是如果通过cnpm run build打包后,用本地路径就访问不到该路径资源了,解决办法:改用相对路径:./img/1.jpg注意:在打包之前需要在package.j...原创 2018-05-06 11:00:53 · 2139 阅读 · 2 评论 -
element-ui表格+分页器数据分页展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha...原创 2018-07-30 13:35:43 · 29131 阅读 · 22 评论 -
vue中结合animate.css实现元素动画入场
话不多说先看下demo的GIF:1.首先引入animate.css,可以直接在index.html中cdn引入;2.其次在开发这种动画较多的页面我觉得还是引用jquery比较方便,操作dom稍多,我这里没有使用jquery,就想复习复习原生js。可以npm安装,在build/webpack.base.conf.js中定义插件: var webpack = require('...原创 2018-08-09 16:51:52 · 11254 阅读 · 1 评论 -
beforeEach全局钩子管理用户访问权限!
创建路由:export default new Router({ routes: [{ path: '/', component: { template: '<div><div>公共页面</div><router-link to="/admin1">取admin1</router-link><rout..原创 2018-08-06 13:52:53 · 7410 阅读 · 4 评论 -
create-react-app中使用less和antd并修改主题颜色
引入less如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行:npm run eject如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才能够eject成功,否则命令会报错,因为该操作是不可逆的,一旦暴露出配置文件后eject功能将被删除。eject成功后项目下会多出两个文件夹,config和scripts,我们开发中一般只...原创 2018-10-21 18:42:37 · 10180 阅读 · 15 评论 -
moment.js 常用方法说明及配合antd DatePicker的使用
var now = moment().toDate();console.log('获取当前时间\n',now) now = moment().format('YYYY-MM-DD');console.log('格式化当前时间\n',now); now = moment().format('YYYY-MM-DD:HH:MM:SS');console.log('格式化当前时间\n',n...原创 2018-11-15 21:28:33 · 19072 阅读 · 2 评论 -
redux(二)reducer的合并与拆分
页面效果(一共是Todos和Number两个不相干的组件):redux配置文件和组件结构:相当于是在前一篇中的结构,将store.js和抽离了出来,并且将两个组件的reducer通过redux模块中的combineReducers方法将其合并为一个reducer文件,放在与store.js同级的store文件夹下:合并两个组件的reducer.js:import {combineReducers}...原创 2018-05-05 20:12:50 · 2989 阅读 · 0 评论 -
vuex(三)小结
store严格模式:const store = new Vuex.Store({//创建仓库实例 strict: true//开启仓库严格模式、无论何时状态变更且不是通过mutation引起的都会报错,能保证所有的状态改变都能被调试工具跟踪到,生产环境不能开启}) 表单的双向绑定处理:<template> <div class="user"> <butto...原创 2018-04-21 13:11:02 · 155 阅读 · 0 评论 -
vuex的使用、抽离异步组件(一)
安装好脚手架服务跑起来后,在src下新建vuex文件夹,vuex文件夹下新建js文件并配置:我命名为index.js:import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({//创建仓库实例 state:{//仓库中存放数据的地方 count: 1 }})...原创 2018-04-20 19:26:12 · 1427 阅读 · 0 评论 -
高性能JavaScript模板引擎-artTemplate快速上手
{{each arr as obj i}} arr中第{{i+1}}个对象信息: {{each obj as v attr}} {{attr}}:{{v}} {{/each}} {{/each}} let data = { arr: [ {name: "obj1", id: "1"}, {name: "obj2", id: "2"} ] }原创 2018-03-02 18:39:32 · 216 阅读 · 0 评论 -
gulp自动化构建工具gulp-connect插件配置服务器实现热更新+自动刷新
var gulp = require("gulp"), sass = require("gulp-sass"), cssmin = require("gulp-clean-css"), rename = require("gulp-rename"), connect = require("gulp-connect");gulp.task("sass-min-rename", f原创 2018-03-06 13:46:30 · 7897 阅读 · 0 评论 -
React生命周期、钩子函数
组件的生命周期可分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOM状态对应的钩子:Mounting:componentWillMount() / componentDidMount()Updating:componentWillReceiveProps() / shoul原创 2018-04-02 20:22:13 · 749 阅读 · 0 评论 -
react数据单向流、受控组件、子父组件通信
父子组件数据传递方式:1.通过props2.通过innerHTML(this.props.children),当期望在父组件中通过子组件的实例DOM传递一些静态的DOM节点或innerHTML的时候可以使用react数据单向流:子父组件之间的通讯(数据传递)规则,原则:数据只能从父组件传递到子组件,而不能由子组件直接修改父组件的数据,数据属于谁谁才有资格去修改;所以子组件想要修改父组件数据的话,最...原创 2018-04-03 19:47:40 · 718 阅读 · 0 评论 -
(一)webpack配置loader,打包js和sass以及图片文件
什么是webpack?模块打包工具,它可以分析项目结构,处理js依赖模块以及编译一些sass、less、typescript等语法,并将其打包成合适的格式供浏览器能够使用。工作方式:webpack把我们的项目当做整体,他可以通过给定的一个主文件(入口文件)找到项目中所有依赖的文件,通过loader处理他们并将他们打包成一个浏览器可识别的js文件搭建webpack项目:/全局安装(建议全局安装)np...原创 2018-04-04 17:43:00 · 2148 阅读 · 0 评论 -
(一)VUE初级钩子函数、计算属性
Document {{title}} {{nameComputed}} {{nameComputed}} {{nameComputed}} {{ageMethod()}} {{ageMethod()}} {{ageMethod()}} {{showState}} var app = new Vue({ el: "#app", d原创 2018-04-18 13:50:07 · 330 阅读 · 0 评论 -
(二)webpack常用插件的使用和配置
生产环境才需要的插件以及相关代码被注释var webpack = require("webpack");//UglifyJsPlugin、CommonsChunkPlugin生产环境才使用的插件,webpack内置// var UglifyJsPlugin = new webpack.optimize.UglifyJsPlugin({warnings: false});//warnings...原创 2018-04-06 14:51:26 · 752 阅读 · 0 评论 -
(三)webpack搭建react环境、es6es7语法任性用
首先要install react和react-dom,这里就不用多说,然后install好react开发相关的包,然后配置.babelrc文件,config中配置babel-loader"babel-core":babel的核心包"babel-plugin-transform-runtime": "^6.23.0",运行过程中转对象扩展的包(转es6、7的新属性和方法)"babel原创 2018-04-06 17:34:57 · 516 阅读 · 0 评论 -
(二)VUE列表渲染、简易购物车原理
Document .shouqing{ color:#ccc; } a{ color: inherit; } {{pro.tit}} 售罄! {{pro.price}} 小计:{{(pro.price*pro.count).toFixed(2)}} 删除原创 2018-04-18 16:00:16 · 372 阅读 · 0 评论 -
react学习总结
特点总结:声明式设计,高效,灵活,独特的JSX语法,组件化,单向数据流JSX:是一种类XML语言,全称是javascript XML,react可以不使用JSX来编写组件,但使用JSX可以让代码可读性更高,语义更清晰,对React元素进行抽象等等。es5定义组件: var MyComponent = React.createClass({ getInitialState: function()...原创 2018-04-13 09:29:24 · 252 阅读 · 0 评论 -
(三)VUE自定义事件兄弟、父子组件通讯
Document var title = { data(){ return { lang: "大吉大利!今晚吃鸡?" } }, template: "{{lang}}", methods: { tochangeName(){ this.$emit("onName") }原创 2018-04-19 11:52:22 · 274 阅读 · 0 评论 -
(四)VUE动态组件、过渡小demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scal原创 2018-04-19 13:42:52 · 567 阅读 · 0 评论 -
(五)VUE vue-router配置、导航、守卫
Document .router-link-active{ color: green; font-weight: bold; } Hello App! 默认会被渲染成一个 `` 标签 --> Go to Foo Go to Bar Go to My原创 2018-04-20 10:51:01 · 686 阅读 · 0 评论 -
jquery轮播图插件,自由选择无缝轮播/淡出淡入
/** * @param img: 数组,包含图片对象信息,例:[ {url: "a.jpg", href: "***.com"}, {url: "b.jpg", href: "***.com"}, {url: "d.jpg", href: "***.com"} ] * @param width: 设置容器/图片宽度 * @par原创 2018-03-07 18:47:41 · 282 阅读 · 0 评论