Vue

今天在项目开发时,由于素材都是存在本地了,然后还没压缩,导致小程序项目超出了2MB,然后无法编译了,就了解了一下分包,在采取分包后,顺利解决!本篇文章中,小程序采用的是Uniapp框架,和原生小程序中的分包流程相同,只不过无需修改manifest.json文件。分包简介在微信小程序中,默认只有一个主包,在项目打包时,所有的资源(页面及资源等)都被放到了主包中。造成的问题:在小程序中,主包的体积最大只可以达到2MB,如果超出了2MB,则不通过了。对于以上的问题,可以采取分包,分包就相当于将指定的页面及资源,单独放在一个包中,不在放到主包中,从而减少主包的体积。分包的上限及条件:开发者可以分N个包,但是要求每个包不允许超过2MB,整个小程序所有分包大小不能超过20MB。分包的好处:主包中一般存放的都是Tabbar页面,如果将非Tabbar页面从主包中移除,则可以加快加载速度。分包中的内容,默认不加载,只有需要用到它时,再去现场加载,当然,可以通过分包预下载去提前加载分包中的内容。使用分包-uniapp注意:如果是Tabbar页面,或者是多个分包需要用到的公共资源,请放到主包中。分包可以访问主包中的资源,而主包不允许访问分包中的资源。假设:现在有一个用户端[公共的],一个管理端[需要权限],我们可以将用户端放到主包中,将管理端的内容分成一个包。因为用户在进入小程序时,默认进入的都是用户端,没必要将管理端的资源也加载上,只有当拥有权限并且在切换到管理端时,我们在去加载管理端的内容。//当前文件结构树[未分包],默认都存放到pages中,当分包后,pages中的内容就是主包的内容。pages:|-...//假设用户端页面有N个,这里就不写了|-backStage/index/index.vue:管理端首页|-backStage/xxxxx/index.vue:管理端第二页/*分包准备:1.新建一个文件夹,和pages同级,*每个文件夹相当于一个分包*,并将静态资源命名为static然后放到分包的根目录下。2.在该分包下新建一个pages文件夹,该文件夹中存储页面文件夹。3.然后将分包中的内容,从主包中移走。*///主包pages:|-...//用户端的内容//管理端分包backStagePackage:|-pages:管理端页面|-index/index.vue:管理端首页|-xxxxx/index.vue:管理端第二页|-static:静态资源然后打开manifest.json文件,在mp-weixin节点中的根节点下,添加配置:"optimization":{"subPackages":true}接着打开pages.json配置分包:在和pages同级节点下,添加subPackages字段,值为数组,它用于配置分包。它的每一个元素是一个对象,每个元素及为一个分包。使用管理端分包为例,首先在数组中添加一个对象,对象中拥有:root,pages,name,independent字段。root属性:它的值为分包文件夹的名称,即:backStagePackage。pages属性:它的值为一个数组,每一个元素填写分包中的页面路径即可(不需要加上分包名)。name属性:分包别名,分包预下载时可以使用。independent属性:是否开启独立分包,默认不开启(false)。"subPackages":[{"root":"backStagePackage","pages":["pages/index/index","pages/xxxxx/index"]}]

2022-7-14 117 0
TypeScript

常用编译选项该选项全部都是compilerOption配置中的选项。allowJs:说明:在编译时,默认编译的全是.ts文件,然后在编译输出的文件夹中,存放的只是被编译的.ts转.js文件。例如:在上图中,src中存在index.js文件,我们也需要将该文件进行编译,然后让它也输出的被编译的build文件中。只需要将allowJs设置为true即可。checkJs:说明:将allowJs打开后,如果js文件中的类型设置错误了,默认是不进行提示的,而将checkJS选项设置为true后,在编译js文件时,也会对js文件进行编译检查。removeComments:说明:当为该选项设置成true时,在编译时,将被编译文件中的注释给删除掉。noEmit:说明:在编译时,只进行编译语法检查,不生成编译后的.js文件。noEmitOnError:说明:在编译时,如果存在错误,不生成编译后的.js文件,只有没有错误时,才会生成编译后的js。alwayStript:说明:它的默认值是一个true,当为true时,被编译生成的文件,都是严格模式的.js文件。当为false时,则关闭严格模式。script:说明:它是类型检查的总开关,如果将该选项置为false,则可以根据自己去打开某个具体的子选项。noImplicitAny:说明:当打开该选项时,如果有隐式的any则会报错,必须声明any或者其他类型。//如果不对a和b进行声明类型,那么它就是一个隐式的any,则会报错,我们必须需要对它声明类型,哪怕是any。functionadd(a,b){returna+b;}strictNullChecks:说明:检查null和undefined,如果该值为null或undefined,则不允许去调用其他内容。//假设页面上现在没有a标签leta=document.querySelector('a');console.log(a.style);//由于a是null,所以此时会报错。

2022-7-12 81 0
TypeScript

TypeScript是JavaScript的一个超集,优化了JavaScript中没有静态类型的缺点。并且在编译时,可以发现一些错误,在vscode中,当出错时,未当编译时就会出现红色波浪线。1.安装提示:在安装TypeScript之前,需要先安装Node.npminstall-gtypescript当安装之后,全局中则多了一个tsc命令。2.编写及编译在安装TypeScript之后,我们则可以创建以.ts为后缀的文件了,以.ts为后缀的文件,里面就是TypeScript代码。当TypeScript文件中的代码写完之后,我们需要对它进行编译成JavaScript文件,就像Java一样,需要将.java文件编译成.class。需要在终端中执行以下命令,进行编译。tsc文件名.ts当执行完以下命令后,则生成了一个编译好的.js文件。vscode报错问题:在vscode中,如果不生成tsconfig.json配置文件,在编译TypeScript生成JavaScript文件后,就会报重复定义的错误。解决办法:只需要生成一下该文件即可[无论是用tsc命令生成,还是手动创建一个tsconfig.json文件]。3.编译错误在编译的过程中,会检查你编写的TypeScript代码有没有问题,如果出现了问题,那么在终端中则会显示哪里出现了问题。但是,它并不会影响生成JavaScript文件,就算编译时出现了错误,它依旧会生成JavaScript文件。我们可以在tsconfig.json中把noEmitOnError这个选项解开注释使其生效,这样当TypeScript编译错误时,就不会在生成JavaScript文件了。4.tsc命令1.编译某个文件tsc文件名.ts2.监听某个文件,变化时自动编译tsc文件名.ts--wach3.一次性编译所有文件tsc4.监听所有文件的变化,变化时自动编译tsc--watch5.生成配置文件tsc--init5.配置文件我们可以通过tsc--init命令去生成一个配置文件,在终端运行以下命令。tsc--init当运行完如上命令后,在文件夹中则会生成一个tsconfig.json文件夹。该文件中,存储的都是配置选项,noEmitOnError选项就在其中[TypeScript编译错误时不生成JavaScript]。在该JSON文件中,是可以写注释的,并且它一共有5个大选项。compilerOptions:编译选项,生成配置文件时默认就带该选项。files:单独需要编译的文件,此次编译只会编译里面的文件。include:指定文件夹,此次编译文件夹中的文件。exclude:不编译该文件夹中的内容,默认值为:node_modules…extends:表示继承的其他配置文件。“compilerOptions”说明:编译选项.target:说明:将TypeScript编译成ECMAScript哪个版本?"compilerOptions":{"target":"es2015"或者"target":"es6"}outDir:说明:默认情况下,是将编译后的.js文件放到根目录的,我们可以通过该选项去指定编译生成的.js文件放到哪个位置。假如main.ts放在了src目录下,并且将outDir设置成了./js,那么编译后,这个被编译生成的main.js是放在./js/src/main.js中的。"compilerOptions":{"outDir":"./js"}module:说明:该选项可以选择模块化系统。可选值:CommonJS【require】、Es6【import】、UMD、AMD、System、ES2020、ESNext."compilerOptions":{"module":"CommonJS"}“files”说明:如果在该数组中指定了文件路径,那么此次编译就只会编译元素中的文件。提示:该选项的元素中,只能指定一个单独的.ts文件,不能指定文件夹。"files":["./src/index.ts"]“extends”说明:继承其他配置文件的配置。"extends":"./src/tsconfig.json"“include”说明:每个元素的内容为一个文件夹地址,编译时会编译文件夹中的文件。提示:可以选择通配符,详情看代码注释。"include":[//编译src文件夹下的,所有文件夹[**]中的所有文件[*]"./src/**/*"]“exclude”说明:数组每个元素是一个地址,对这些元素中的地址不进行编译。默认值:node_module…"exclude":["..."]

2022-7-10 73 0
2022-6-12 163 0
Vue

1.优化前先分析依赖//首先安装依赖npminstallwebpack-bundle-analyzer--save-dev//然后在vue.config.js中进行引入constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;//然后添加如下代码configureWebpack:{plugins:[newBundleAnalyzerPlugin({analyzerMode:'server',analyzerHost:'127.0.0.1',analyzerPort:8888,reportFilename:'report.html',defaultSizes:'parsed',openAnalyzer:true,generateStatsFile:false,statsFilename:'stats.json',statsOptions:null,logLevel:'info'}),]}当打包或者运行时,会在本地8888端口展示依赖情况,然后自行分析。2.采用路由懒加载在写路由时,不要将所有的组件都一下加载全,应该使用import()进行懒加载。这样只有当访问这个路由时,才会加载对应的模块。cosntroutes=[{path:"/home",component:()=>import('@/view/Home')//使用import进行懒加载}];3.进行GZIP压缩需要在Webpack中构建gz文件,然后在Nginx中启用gzip。//首先安装依赖npminstallcompression-webpack-plugin@1.1.12//然后在vue.config.js中进行引入constCompressionWebpackPlugin=require('compression-webpack-plugin');//然后添加以下代码configureWebpack:{plugins:[newCompressionWebpackPlugin({filename:'[path].gz[query]',algorithm:'gzip',test:/\.js$|\.json$|\.css/,threshold:10240,//只有大小大于该值的资源会被处理minRatio:0.8,//只有压缩率小于这个值的资源才会被处理})]}然后在Nginx中进行以下配置,启用GZIP。#开启gzip。gzipon;#开启后如果能找到.gz文件,直接返回该文件,不会启用服务端压缩。gzip_staticon;#文件大于指定size才压缩,以kb为单位。gzip_min_length1;#用于识别http协议的版本,早期的浏览器不支持gzip压缩,用户会看到乱码,所以为了持前期版本加了此选项,目前此项基本可以忽略gzip_http_version1.1;#压缩级别,1-9,值越大压缩比越大,但更加占用CPU,且压缩效率越来越低。gzip_comp_level9;#压缩的文件类型。gzip_typestext/cssapplication/javascriptapplication/json;使用CDN引入资源在打包时,会将import导入的东西,打包成js文件,然后该文件就会很大.如果我们的服务器带宽很小,那么还要加载这些资源就很慢,这样的话我们可以使用cdn的方式,去让用户请求其他服务器获取资源。我们需要在index.html中进行使用link或者script标签的方式去引入对应的资源。然后在vue.config.js中进行配置。//Key:和package中的名称一样,value:全局变量名//一定要将Vue引入[通过cdn,也要在这里进行配置],因为有些文件依赖着它。configureWebpack:{externals:{'vue':"Vue",'element-ui':"ELEMENT",'axios':'axios','jquery':'$','vue-router':'VueRouter','vuex':'Vuex'}}

2022-5-30 160 0
2022-5-28 106 0
Vue

1.安装npminstallvee-validate@2.0.02.引入该插件需要使用Vue.use引入,我们可以新建一个plugin文件夹,然后在里面进行引入。importVuefrom'vue';importVeeValidatefrom'vee-validate';此时,我们还没使用Vue.use()进行引入,我们可以先进行配置。constconfig={errorBagName:'errors',//为收集错误的对象起一个变量名,它存在每个组件的this中,如果和页面中的产生冲突,则可以更改这里delay:100,//表示获取输入信息的时间[毫秒]locale:'zh_CN',//验证消息的默认语言,一定要将这里写成zh_CN,否则自定义验证规则返回的验证消息是英文的。strict:true,//表示没有设置规则的表单不进行验证events:'input',//默认[input],input表示当输入时和表单失去焦点时都进行验证,blue表示当失去焦点时在验证。};然后进行引入。Vue.use(VeeValidate,config);3.基本使用此时,我们只能使用vee-validate提供的内置验证规则,用法如下。<!--1.我们必须为表单提供一个name属性,否则vee-validate不知道这个表单是哪一个。2.需要使用v-validate指令,来选择验证规则,我们可以输入单个也可以输入多个,可以使用字符串也可以使用对象形式。2.1(重要):如果使用字符串的方式,则需要在最""里面再写一个单引号将规则包住,否则会将规则名当成一个变量,第一个就是这样。--><inputname="age"v-validate="'required'"->单个规则写法v-validate="'required|between:1,120'"->多个规则写法,每个规则使用|管道符分隔v-validate="{required:true,between:[1,120]}"->对象写法,将需要的规则置true即可,此时不需要在里面包一层单引号了,如果其中的值是多个[例如between],则将值写成数组即可。/><!--1.这里是提示错误信息的,当使用该插件后,每个组件上都拥有了一个errors的计算属性[在config中可以修改该变量名]。2.errors是一个数组,里面存储的是错误信息,我们通过v-show来控制它是否显示,如果没有错误has()则返回一个false,那么该span就不显示。3.如果有错误了,那么has()则会返回一个true,那么我们就通过first()方法,拿到errors数组中的第一条错误信息来展示。4.注意(重要):在has()以及first()中,函数的参数值,都需要填写你校验关联表单的name值。--><spanclass="error-msg"v-show="errors.has('age')">{{errors.first('age')}}</span>所有内置规则:after{target}-比target要大的一个合法日期,格式(DD/MM/YYYY)alpha-只包含英文字符alpha_dash-可以包含英文、数字、下划线、破折号alpha_num-可以包含英文和数字before:{target}-和after相反between:{min},{max}-在min和max之间的数字confirmed:{target}-必须和target一样date_between:{min,max}-日期在min和max之间date_format:{format}-合法的format格式化日期decimal:{decimals?}-数字,而且是decimals进制digits:{length}-长度为length的数字dimensions:{width},{height}-符合宽高规定的图片email-不解释ext:[extensions]-后缀名image-图片in:[list]-包含在数组list内的值ip-ipv4地址max:{length}-最大长度为length的字符mimes:[list]-文件类型min-max相反mot_in-in相反numeric-只允许数字regex:{pattern}-值必须符合正则patternrequired-不解释size:{kb}-文件大小不超过url:{domain?}-(指定域名的)url4.将验证消息修改为中文我们首先将中文包引入进来,也需要将vee-validate下的Validator通过{Validator}方式引入进来。importzh_CNfrom'vee-validate/dist/locale/zh_CN';importVeeValidate,{Validator}from'vee-validate';//把这个代码,将最顶部相同的代码替换掉即可。然后创建一个对象:dict,该对象里有一个messages属性[值也是对象]。然后使用VeeValidate.Validator.localize(语言,dict对象)方法进行调用即可。vardict={messages:{...zh_CN.messages}};VeeValidate.Validator.localize("zh_CN",dict);5.修改字段名:此时,返回的验证消息显示的是phone,我们应该将它替换成显示手机号。我们只需要在dict对象中添加以下属性:attributes[它的值也是一个对象]。该对象中的key,就是你input中对应的name属性值。vardict={messages:{...zh_CN.messages,//在这里可以进行重写required:(field,args)=>`${filed}是一个必填内容!`},attributes:{phone:"手机号",code:"验证码"}};6.自定义验证规则:使用Validator.extend(规则名称,规则配置对象)方法可以自定义验证规则。在对象中,一共有两个必须定义的属性,它们都是一个函数。getMessage(field,args):返回的错误信息。field:字段名称,使用的是dict.attributes中的。args:在规则后携带的值。validate(value,args):验证规则,必须返回一个true或者false,或者是Promise实例。value:控件内输入的内容。该函数如果返回的是true,则代表着验证通过。该函数如果返回的是false,则代表不通过,那么就会执行getMessages函数,进行返回错误信息。//手机号验证规则Validator.extend('mobile',{getMessage:field=>`${field}格式不正确!`,validate:value=>/^[1][3-9][\d]{9}$/.test(value)//test是验证正则的,通过返回true});7.提交时验证是否通过在我们提交表单时,应该去判断所有字段都已经验证通过了。/*在提交时,应该先调用该方法,如果都已经验证通过,则返回一个true,否则返回false。*/constvaliRes=awaitthis.$validator.validateAll();if(!valiRes)return;//.......

2022-5-28 99 0