- 博客(44)
- 收藏
- 关注
RSS订阅原创 前端系列三十九：VisCode插件
开发中常用插件：Vue VSCode SnippetsVue Language Features (Volar)Vue 3 SnippetsVeturpx2vwpx to rem & rpx (cssrem)Prettier ESLintPower ModeOSU Mode 3node-snippetsLive ServerLive Sass CompilerJavaScript Booster
2022-01-07 09:32:43
1011
原创 前端系列三十九：Vis code插件
开发中常用插件：Vue VSCode SnippetsVue Language Features (Volar)Vue 3 SnippetsVeturpx2vwpx to rem & rpx (cssrem)Prettier ESLintOSU Mode 3node-snippetsLive ServerLive Sass CompilerJavaScript Boosterindent-rainbowGitLens —
2022-01-07 09:28:08
873
1
原创 前端系列三十八：node版本及配置
node里npm版本：npminstall-gnpm@7.5.4node设置镜像：npmconfigrmproxynpmconfigrmhttps-proxy
2022-01-04 11:42:20
422
原创 前端系列三十七：项目中方便解耦使用枚举
当有时项目中有的模块是根据传值过来的条件判断来达到显示隐藏时就可以使用枚举，方便后期维护写法：<template v-if="types === WORKORDERTYPE.SUBMIT || types === WORKORDERTYPE.MODIFY"><h1>测试</h1></template>export default {props: {types: {type: String,require: true,
2022-01-04 11:36:23
247
原创 前端系列三十六：添加本地请求参属地址及请求
第一步：一般我们会在项目中的src下新建一个api文件夹用来放请求配置及接口中请求的请求参数第二步：我们在api文件夹下，新建一个例如apis.js文件用来存储接口参数，示例：apis.js文件里:const apiList = {//参数地址aliBaiDuNList: {label: '开发组-业务数据入库超时',//这边是后面给的接口地址url: 'ali_bai_du_n_list',method: 'post',},//参数地址ali
2022-01-04 11:30:20
674
原创 前端系列三十五：跨域问题及解决方案
SwitchHosts下载及添加配置：http://test.auclt.baidu.os.comhttp://test.asclt.baidu.os.com这里仔细观察会发现请求地址后缀名后三位域名都是一样的，而这个时候我们本地请求这些地址会报跨域问题解决步骤：第一步：打开项目找到vite.config.ts或vue.config.js文件：在文件里const config = {// 配置前端服务地址和端口server: {port: 9002,open: t
2022-01-04 10:55:59
488
原创 前端系列三十四：TS类型兼容
类型兼容性：两种类型系统：1. Structural Type System (结构化类型系统)2.Nominal Type System ( 标明类型系统 )TS采用的是结构化类型系统，也叫做 duck typing (鸭子类型) ，'类型检查关注的是值所具有的形状'也就是说，在结构类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型写法：class Point { x: number; y: number }class p: Point { x:number;
2022-01-04 10:03:19
908
原创 前端系列三十三：TS中的class类
实例属性初始化：写法：class Person { age: number gender = ' 男 ' }const p = new Person( )解释：1.声明成员 age，类型为number ( 没有初始值 )2.声明成员 gender, 并设置初始值， 此时，可省略类型注解 ( TS类型推论为string类型 )class类：构造函数:class Person { age: number ...
2022-01-04 09:55:56
1074
原创 前端系列三十二：TS字面量类型跟Any类型
字面量类型： 使用模式： ' 字面量类型配合联合类型一起使用 '使用场景： 用来' 表示一组明确的可选值列表 '写法： function changeDirection( direction: 'up' | 'down' | ' left ' | ' right ') { consloe.log( direction ) }解释： 参数direction 的值只能是 up/down/left/right 中的任意一个优势： 相比于string 类型， 使...
2021-12-31 11:30:41
863
原创 前端系列三十一：TS枚举类型跟元组
枚举类型：枚举的功能类似于字面量类型+联合类型组合的功能，也可以 ' 表示一组明确的可选值 '枚举：' 定义一组命名常量 ' ， 它描述一个值， 该值可以是这些命名常量的一个定义枚举写法：enum Direction { Up, Down,Left,Right } function changeDirection( direction: Direction ) { console.log( direction ) }解释：1.使用'enum' 关键字定义枚举...
2021-12-31 11:26:35
1038
原创 前端系列三十：TS接口跟类型推断
接口：当一个对象类型被多次使用时，一般都会使用'接口 (interface)' ；来描述对象的类型, 达到'复用'的目的解释：1.使用' interface ' 关键字来声明接口。 2.接口名称 （比如, 此处的 IPerson），可以是任意合法的变量名称3.声明接口后，直接 ' 使用接口名称作为变量的类型 '。4.因为每一行只有一个属性类型， 因此，属性类型后没有 ; （分号） 写法： interface Iperson {...
2021-12-31 11:22:48
2361
原创 前端系列二十九： Typescript简介跟安装编译TS
TS:TS是JS的超集（JS有的TS都有），在JS基础之上，为JS添加了类型支持TS为什么要为JS添加类型支持:因为JS类型系统存在"先天缺陷"，JS中绝大部分错误都是"类型"错误，增加了找BUG，改BUG时间，影响开发效率编程语言的动静区分：Typescript属于静态类型的编程语言，JS属于动态类型的编程语言。 静态类型：编译期做类型检查； 动态类型：执行期做类型检查；代码编译和代码执行的顺序：1 编译 2执行对于JS来说：需要等到代码真正去'执行'...
2021-12-31 11:17:18
461
原创 前端系列二十八：TS常用类型
类型注解：let age :number = 18 代码中的 : number 就是类型注释。 作用： 为变量'添加类型约束'，上面代码中，约定变量age的类型为number ( 数值类型 ) 解释： 约定了什么类型,就只能给变量赋值该类型的值，否则,就会报错常用基础类型概述：JS已有类型：原始类型：number/string/boolean/null/undefined/symbol对象类型： object ( ...
2021-12-31 11:12:46
1417
原创 前端系列二十七：indexedDB跟同源策略
local Storing:存储 5MindexedDB：远远大于5M,如果有大量数据存储的话，建议存储在indexedDB创建indexedDB：var request = window.indexedDB.open('db',1) 如果没有db系统就会给我们自动创建一个,open为打开的意思 var db; 请求成功后会注册一个回调事件 request.onsuccess = function( event ) { 把db变量赋值为请求后面的...
2021-12-31 11:05:33
960
原创 前端系列二十六：异常处理
全局异常处理：示例： function test1() { try { console.log('test1') test2( ) } catch ( error ) { console.log( 'catch in test1', error ) } } function test...
2021-12-31 10:57:54
86
原创 前端系列二十五：利用Node来查看V8引擎内存使用情况
通过process.memoryUsage( ) 写法：function getMemory( ) { let memory = process.memoryUsage( ) let format = function (bytes) { return `${(bytes/ 1024 /1024 ).toFied(2)}MB` } } co...
2021-12-31 10:55:40
1045
原创 前端系列二十四：git 远程仓库命令
克隆拉远程仓库内容：git clone 远程仓库地址抓取命令：git fetch意思就是 将仓库的更新都抓取到本地，不会进行合并拉取命令：git pull意思就是将远程仓库的修改拉取到本地进行自动合并推送命令:git push远程代码冲突时：先git add . 再git commit -m "备注" 再git pull 拉取合并 报冲突时，打开编辑器里去解决冲突，解决完后，再git add . 再git commit -m "备注" 再git p...
2021-12-31 10:52:50
244
原创 前端系列二十三：git配置公钥和开发中分支使用原则与流程
master (生产) 分支：线上分支，主分支，中小规模项目作为线上运行的应用对应的分支develop (开发) 分支：是从master创建的分支,一般作为开发部门的主要开发分支,如果没有其他并行开发不同期上线要求，都可以在此版本进行开发，阶段开发完成后,需要是合并到master分支准备上线。feature/xxx分支：从develop创建的分支，一般是同期并行开发,但不同期上线创建的分支，分支上的研发任务完成后合并到develop分支hotfix/xxx分支：从master
2021-12-31 10:49:59
513
原创 前端系列二十二：git 解决冲突
当两个分支修改了同一文件同一行时,这个时候就需要手动解决冲突,解决代码冲突如下：1.处理文件中冲突的地方 <<<<<HEAD 代表当前分支上修改的内容 count = 1 ========= count=2 dev上修改的内容 >>>>>> dev 如果想要自己的修改的内容暴力点的方法就是把上面所有都删除只留下自己修改的co...
2021-12-30 10:18:09
283
原创 前端二十一：git 基础命令
基本配置:打开 Git Bash设置用户信息：git config --global user.name "用户名"git config --global user.email "邮箱"为常用指令配置别名打开用户目录 创建 .bashrc文件 或者在 git 里 输入命令 touch ~/.bashrc在.bashrc 文件中输入如下内容: //用于输出 git 提交日志 alias git-log ='git log --pretty=oneline ...
2021-12-30 10:15:45
314
原创 前端系列二十：git 常用命令
查看git本地分支：git branch创建本地分支:git branch 分支名另外说明: HEAD--> 代表当前版本指向那个分支切换分支： git checkout 分支名创建分支并切换到该分支:git checkout -b 分支名git合并分支：示例: 例如要把dev代码分支上合并到master分支上 第一步: git checkout master 切换到 master分支上 第二步:...
2021-12-30 10:10:44
188
原创 前端系列十九：Vue项目中引入外部JS报错原因
第一步:在Vue中引入某个组件时，在Vue单页面找不到组件注册时，这个时候该考虑组件是否在Vue里的html页面里是否是用 <script></script>标签引入的第三方JS文件示例： <script src=http://xingcuan.com/he/we-sitemap/master/sitemap.0.1.js></script>第二步：引入功能正常后,可能浏览器控制台会报类似于：sitemap.0.1.js:1 Un..
2021-12-30 10:07:38
8299
1
原创 前端系列十八：Vue3加TS封装axios改动对比
旧版使用Vue3封装axios全局方法：通过在src的api文件下定义的axios请求逻辑文件暴露出去,在plugins文件api.ts下引入axios文件,挂载定义全局的方法app.config.globalProperties.$api在main.ts里通过引入api文件进行全局注册新版使用Vue3封装axios全局方法：在src下api文件夹里定义请求数据逻辑,再把文件暴露出去在plugins文件引入axios文件,api.ts下定义全局方法app.provide（'$api'）在
2021-12-30 10:01:47
190
原创 前端系列十八：Vue3加TS封装改动总结
页面 axios 的注册机制：之前在Vue3中封装的版本:通过在src的api文件下定义的axios请求逻辑文件暴露出去,在plugins文件api.ts下引入axios文件,挂载定义全局的方法app.config.globalProperties.$api在main.ts里通过引入api文件进行全局注册最新在Vue3中封装的版本:在src下api文件夹里定义请求数据逻辑,再把文件暴露出去在plugins文件引入axios文件,api.ts下定义全局方法app.provide（'$.
2021-12-30 09:56:01
420
原创 前端系列十七：解决Vue中每次使用less需要引入文件问题
完成自动注入公用变量和混入问题解决方案：使用vuecvli的style-resoures-loader插件来完成自动注入到每个less文件或者vue组件中style标签中在项目下执行一条命令: vue add style-resources-loader 添加一个vuecli插件安装完成后在vue.config.js中自动添加配置,如下： module.exports= { pluginOptions: { ...
2021-12-30 09:49:06
285
原创 前端系列十六：Vue3中Vuex持久化
第一步：首先,我们需要安装一个vuex的插件 vuex-persistedstate来支持vuex的状态持久化 npm i vuex-persistedstate第二步：在src/store文件夹下新建modeuls文件,在modules下新建user.js和cart.js src/store/modules/users.js写法： / 用户模块 export default { namespace...
2021-12-30 09:47:17
1529
原创 前端系列十五：Vue3组合API跟封装axios
组合API-依赖注入：使用provide函数和inject函数完成后代组件通讯使用场景: 有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据 需要引入 provide父组件写法： import { provide } from 'vue' setup( ) { const money = 100 //将数据提供给后代组件 provide provide( 'money' , money ) return...
2021-12-30 09:44:27
805
原创 前端系列十四：Vue3获取DOM跟传值
Vue3里获取dom获取单个元素 先定义一个空的响应式数据ref定义的 setup中返回数据,你想获取那个dom元素, 在改元素上使用red属性 setup( ) { const dom = ref( null ) onMounted( ( ) => { console.log( dom.value ) } ) }Vue3里获取父子props传过来的值,并打印出来写法： props:{ money: ...
2021-12-30 09:39:38
886
原创 前端十三：Vue3+Vite+Ts 项目注意点
区别一：env.d.ts 是环境变量文件，主要是让Ts认知Vue，让Ts知道这是一个Vue文件区别二：在setup中不能使用this,因为它会找不到组件实例,因为setup发生在‘data’,'property','computed'被解析之前，所以它们无法在setup中被获取区别三：使用setup语法糖后,在script里引入组件后,就不需要再注册组件就可以直接使用组件名，需要注意点就是导入组件时,组件后的.vue后缀名要加，否则不能被TS识别 setup 语法糖：...
2021-12-29 18:39:57
1642
原创 前端系列十二：Vue3较Vue2的变化
变化一：is属性仅限于用在component标签上，以前Vue2时v-is可以写在标签里面,最终写在 .component("row"，{ props:["data"], template: "<tr><td>{{this.data}}</td></tr>" })变化二：底层api变化,不影响多数开发者比如底层一些遇到传进来的值是undefine 或者没有值该怎么处理，是true还是flase，还是删除。...
2021-12-29 18:29:56
345
原创 前端系列十一：Vue3较Vue2变化
一 新特性：Teleport 传送门：它可以指定它里面内容的父元素 它可以在别的组件里使用，但是它可以让控制权还是在自己手上写法： 在别的组件注册引用组件 在自己组件里写上功能 //to 代表要去的地方显示 一般传送门写在teleport标签里 <button @click="modelOpen = true">弹出一个模态框</button> <teleport to="body">...
2021-12-29 18:23:44
372
1
原创 前端系列十：Vue3较Vue2变化
一： 新特性 Composition API特点： 可以更好的逻辑复用和代码组织，初始化方式变了，在main.js里实例获取方式变成函数 :以前Vue2是new一个构造函数createApp(App) 变成了工厂函数，直接获取，直接挂载以前写响应式数据写在data中 在Vue3里响应式数据使用和...
2021-12-28 11:17:37
275
原创 前端系列九：前端项目部署上线流程、开发环境、测试环境、生产环境
开发环境、测试环境、生产环境、UAT环境、仿真环境– 区别开发环境（development）:开发环境时程序猿们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。测试环境(testing):一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器上，是开发环境到生产环境的过度环境。测试人员会模拟各种操作情况，主要用于测试是否存在bug，如果有那么肯定不能把它发布到生产机上生产环境（producti
2021-12-28 10:54:39
4878
原创 前端系列八：Vue3项目中定义全局方法遇到的问题
步骤一：在src文件夹下，自己定义一个文件夹，再建一个公共文件例如：api.ts,在里面定义export default{install: (app: any, options: any) => {下面这段代码是在Vue3里定义公共方法的$api公共方法名app.config.globalProperties.$api ="这后面就是要写定义的公共方法函数"}}步骤二：在main.ts文件里 引入定义的公共方法文件 例如引入前面的api.ts，引入后,在main...
2021-12-28 10:42:43
1198
原创 前端系列七：在Vue3+TS+Vite插件的初始化项目模块报错的问题
细节问题：当我们使用Vite创建Vue3项目时，项目创建完成时，在script里有 setup lang="ts"因为export default 是JS的导出模式，这个时候没有把script里的setup lang="ts" 去掉就会报模块错误问题
2021-12-28 10:37:49
1065
1
原创 前端系列六：Vue3项目中遇到的原型方法问题
Vue3项目中引入插件报错问题：Cannot read properties of undefined (reading '$api')无法读取未定义的属性（读取“$api”）思路：先去查一下Vue3在原型上写法是否有改变；Vue3在原型上定型方法已经跟Vue2不同；解决方案：Vue2中定义原型方法：Vue.prototype.$api = function(){consloe.log("Vue2定义方法")}Vue3中定义原型方法：app.config.globalPr
2021-12-28 10:34:55
774
原创 前端系列五：Vue3中利用js跳转页面
goPage() { this.Z$router.push({path:"/",query:{search:'超人'}})}
2021-12-28 10:28:32
532
原创 前端系列四：Typescript中遇到多个any影响性能解决方案
第一种方案：可以在项目创建初期去tsconfig.json里去配置："noImplicitThis": true这样可以当表达式值为any类型的时候,生成一个错误第二种方案：let xj: unknow = '小新'let b: string = xj as stringunknown(不知道是什么类型)加as(类型断言告诉是什么类型)搭配使用的话可以解决any的问题但是前提是要能确定或者知道我这个值是用什么类型的，也不知道会不会有性能问题，还得再研究一下第三种方案：let .
2021-12-28 10:26:45
483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人