- 博客(30)
- 资源 (1)
- 收藏
- 关注
原创 angular浏览器触发返回,取消后路由问题
解决方法://@ts-ignore:privateoptionnotyetexposedforpublicuserouter.canceledNavigationResolution='computed'放在app.component里
2022-06-30 19:39:21 430
原创 asyncComputed异步计算属性
前言:vue里普通的计算属性computed只能计算一些同步的值,但是如果碰到需要在计算属性中发送一些异步的网络请求,需要用vue-async-computed异步计算属性场景:如下图1,红框灰色背景的小卡片已封装成一个组件,卡片内的数据类型值需要做判断后返回值显示,如果组件外部传进的值dataType!==quote,则原样显示,否则需要调用接口查名称用法:<ElTag size="small" :type="tagType" >{{ userInfo }}</.
2022-06-30 19:38:35 3334
原创 ssr(angular) 相关小笔记
ssr原理解析node与浏览器的区别:1.node中没有window、document、localStorage、cookie等 浏览器中没有文件访问模块,例:fs2.node导入文件或模块用require( ),浏览器用import3.另一个区别是 Node.js 使用 CommonJS 模块系统,而在浏览中还在实现 ES 模块标准。csr(客户端)与ssr(服务端)的区别1.概念: csr是服务端直接把文件丢给客户端,不做任何处理;客户端自己去跑js,生成对应的do...
2021-10-11 09:54:42 533
原创 前端ssr项目本地开发模拟线上环境
前言:初次上手ssr的时候可能会遇到许多问题,控制台一片爆红;在本地模拟线上环境开发,更容易分析解决问题,减少问题导致的可能性;例如我曾经遇到个接口请求问题,服务端请求接口拿不到数据,请求无响应,首次分析以为是跨域等相关问题,结果确是服务端请求接口的时候应该用绝对路径。前端项目模拟线上环境那当然是用nginx了linux下nginx的安装以及环境配置1.官网下载nginx包2.配置所需环境yum install gcc-c++yum install -y pcre pcre-devel
2021-08-30 15:58:22 584
原创 UOS系统(ubuntu)安装开发环境
sudo apt install npm //npm下载安装sudo apt-get install git //git安装ssh-keygen -t ed25519 //生成ssh key安装nodecurl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -sudo apt-get install -y nodejs解决npm does not support Node.js v10.19.0问题,先删.
2020-10-12 10:50:01 2437
原创 angular(三) 总结
一.个人理解declarations :声明,被声明的组件才属于此module,才可以使用此module下import的东西imports:导入,公共模块或组件exports:导出providers : 创建获取服务实例bootstrap :主视图,根组件二.@component组件装饰器元数据如下:selector:组件选择器,被调用时的组件名templateUrl:html模板,引用html地址styleUrls:样式地址,数组encapsulation.
2020-09-02 14:08:10 351
原创 typeScript学习总结
一.杂? 非空断言 readonly 只读属性 [propName:string]:ang 接口以外定义属性,自定义属性二.super()和this()父类:基类,子类:派生类super:是调用父类空构造函数(constructor),因为存在重载this:是调用本类空构造函数1.如果派生类中构造函数没有调用super,则系统会默认调用父类空构造函数,基类或派生类中没有构造函数,系统会默认添加空构造函数2.在子类里用super和this调父类方法无差(super不...
2020-09-02 14:07:51 279
原创 angular(四) 父子组件通信 发布订阅, 其他总结
1.语法:{{ }}2.数据双向绑定:<input [(ngModel)]="hero.name">3.
2020-09-02 14:07:18 393 1
原创 vue-cli(3.0) webpack优化
一、如何跑dev环境时生成.map文件,易于开发调试修改config/index.js生产环境打包不生成.map文件二、生成多入口文件优点:业务功能复杂,多人开发时,易于调试,只用在调试环境上替换对应模块的js文件即可,就不用一起合入代码后在调试,减少错误代码合入风险。...
2020-09-02 14:06:31 206
原创 react 总结(一) 项目创建
一、创建项目(已安装 create-react-app)create-react-app demo装完后发现没有webpack,于是安装了webpacknpm install webpack webpack-cli --save-dev突然想看没有webpack自带打包是啥样的,跑npm run build跑不起来,npm start也挂了,卸载webpack,删除node_modules,package-lock.json,然后重新 npm i后再跑即可自定义配置文件,运行npm
2020-09-02 14:06:04 160
原创 vue 学习总结(二) 视图、路由跳转、数据管理vueX、生命周期钩子函数
一、视图<router-link to="/foo">Go to Foo</router-link><router-view/>二、路由跳转参考地址1. router-link2. this.$router.push() (浏览器前后切换,$route中存储的值还在,没有清空)3. this.$router.replace() (用法同push)4. this.$router.go(n)ps : 区别this.$router.pus
2020-09-02 14:05:48 243
原创 hooks react总结
hooks 是 React 16.8 的新增特性一、useState用法声明响应式变量不用再在构造器constructor的state中定义,[ ]是数组解构,title是定义的变量名,非api,setTitle类似于原来的setState,但是只能修改同时定义的title变量,useState的参数是给变量title的默认值。import React, { useState, useEffect } from 'react';function Hook() { const [ti
2020-09-02 14:05:24 175
原创 vue 学习总结 (一)
一、项目搭建npm i vue-cli -g //安装vue-clivue init webpack demo //初始化项目linux使用vue需要创建软连接sudo ln -s /home/chenying/Downloads/node-v12.16.2-linux-x64/bin/vue /usr/local/bin二、模板语法{{ }}双大括号插值v-if(元素不渲染,类似注释) v-show(就是display:none) v-on(事件绑定) v-htm...
2020-09-02 14:04:40 178
原创 vue自己的理解
一、MVVM即model-view-viewModelmodel:数据模型view:视图层viewModel:数据双向绑定(监听数据改变控制视图层),将mode和view关联起来二、生命周期的理解?生命周期的过程为:创建(beforeCreate)、数据初始化(created)、实例挂载(beforeMount,mounted)、组件更新(beforeUpdate,updated)、销毁(beforeDestroy、destroyed)beforeCreate:DOM未渲染,da
2020-09-02 14:04:26 92
原创 字符串转dom
Jquery var dom=$("<P>转Dom</p>")js原生var dom=parseDom("<P>转Dom</p>") console.log(dom) function parseDom(arg) { var objE = document.createElement("div"); objE.innerHTML = arg; return objE.childNodes; };...
2020-08-19 14:22:56 780
原创 wangEdit(版本3.1.1)之angular
官网参考地址一、下载wangEditnpm i wangeditor二、引入wangEditimport * as wangEditor from '../../../node_modules/wangeditor/release/wangEditor.js';三、生成编辑器//html中<div id="edit"> <p>请输入内容...</p></div>//.ts的ngOnInit中var edit =
2020-08-19 13:21:17 634
原创 linux 简单命令
1.su/sudo 切换root命令2.ls 显示当前文件夹下命令su/sudo 切换root exit 退出root,切换普通 ls 显示当前文件夹下的命令 pwd 当前文件夹路径 cat 查看文件 vim 编辑文件,输入i切换编辑模式,编辑完后ctrl+esc,再输入wq!强制保存退出 ln -s 创建软链接 ...
2020-07-27 13:06:44 63
原创 layui踩坑记
一、表格显示wangEdit不超出省略场景描述:layui表格自带单行省略、折叠隐藏,点击扩展按钮被隐藏内容;但是wangEdit编辑出的内容包含图片、无序有序列表等,会存在换行,在layui表格会完整显示一整块,看源码(左侧)只判断了宽度超出。目前未找到更好的解决办法就直接改了源码加了高度超出判断layui清除了ul li的基本样式,无法显示wangEdit的有序无序,得用.layui-table-main td li ,.layui-table-tips-main li{ lis
2020-07-20 13:27:43 517
原创 vue 国际化配置
一、下载i8n依赖库 npm i vue-i18n -S二、创建国际化文件三、在i18n国际化配置文件目录添加index.js文件import Vue from "vue"import VueI18n from "vue-i18n"import en from "./en.js" //自定义英文文件import zh from "./zh.js" //自定义中文文件Vue.use(VueI18n);const i18n=new VueI18n({ locale...
2020-06-22 17:31:57 501
原创 React 国际化配置 react-intl 2.0版本
一、下载react-init依赖库(注意此方案是2.0-2.9版本的,新版本里没有react-intl/locale-data文件的)npm i react-intl@2.9.0二、创建国际化文件三、在index.js文件中配置三、要的模块引用四、语言切换缺点:切换语言后需要重新加载页面...
2020-06-22 11:26:18 766 2
原创 angular8.0 webpack配置将px自动转rem
一、在项目中安装@angular-builders、postcss-loader、css-loader(less就装less-loader)、postcss-pxtoremnpm i -D @angular-builders/custom-webpacknpm i --save-dev postcss-loader autoprefixernpm i css-loadernpm i postcss-pxtorem二、在项目根目录创建 extra-webpack.config.js文件 (和a
2020-05-26 10:11:21 1028
原创 angular学习(二) 国际化配置
一、下载ngx-translate的依赖库npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader --save二、创建国际化文件三、在根模块(app.module.ts)中配置import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';impo
2020-05-15 16:25:56 417
原创 angular学习(一) 脚手架搭建项目
一、安装angular/clinpm install -g @angular/cling version //查看安装版本linux系统需要设置系统命令sudo ln -s /home/wangling/node-v12.16.2-linux-x64/bin/ng /usr/local/bin二、创建新应用ng new angulardemo三、运行cd angulardemong serve --open...
2020-05-12 17:27:35 229
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人