模块有系统模块和自定义模块，系统模块都是预装好的，直接require引入即可，而自定义模块，需要自己书写。自定义模块有三个语法：require 引入module 模块export 导出node的模块，是没有所谓的全局作用域的，所有的值如果需要被使用，就需要使用export导出，但是export只能导入单个变量：export.a = 1; export.b = 1;如果内容一多，这样就不太方便，所以一般导出都用modulemodule.export = { a : 1, b : 1 }导出后就需要引用，引用的时候需要注意模块的存放目录，比如存放在node的系统目录和项...
cmd命令：e: 可以直接切换到e盘盘符cd xxxx/xxx 进入到项目目录node xxx.js 执行程序vscode 建议安装code runner插件，可以直接运行node的jshttp模块使用创建一个server.js文件。const http = require("http"); //创建服务器http // request 请求的信息 // response 响应给浏览器的信息 var server = http.createServer((request, response) => { console.log("有人来了&q...
最近写项目遇到一个问题，很头疼，几天了，问了好些大佬，都没有找到问题的解决方案，但是，最后还是被我找到了，可喜可贺...问题有一个home页，home页里面有router-link元素进行子路由切换，为了减少资源损耗，所以直接使用了keep-alive进行路由页缓存，假设有三个子路由abc，a路由页面有两个子路由a-1和a-2，默认是a-1显示。当我们进入到a路由是，默认显示a-1，然后我们切换到a-2，然后路由push返回到home页，再次进入到a页面时，你会发现，a路由此时显示的a-2而不是a-1，但浏览器地址是a-1的地址，此时，我们可能没办法切换到a-1了。问题图为什么主要因为k...
keep-alive之前也用的比较玄学吧，后来发现，keep-alive只能缓存当前级页面，也就是说：如果keep-alive缓存了A和B这些同级的路由页面或者组件，那是没问题的，但是如果A页面下还有子级路由或者子组件切换，由于嵌套太深，一般是缓存不到的，所以又需要使用一次keep-alive。但是在使用keep-alive的时候遇到一个问题啊，这个问题很烦。虽然keep-alive缓存后，页面的滚动条位置也会相对应的缓存到，但是，正因为这个位置问题，导致A页面如果滚动了，在进入他的子路由页面的时候，子路由页面的滚动条位置会和A页面保持一致，这就很头疼了。找了半天发现一个绝妙的方式：me...
安装npm install --save-dev webpack-bundle-analyzer配置webpack.base.conf.js没有这个文件就手动创建，和package.json文件同级别module.exports = vuxLoader.merge(webpackConfig, { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: ...
gravatar的头像很容易获取，他的格式可以理解为三段，第一段为基本地址，第二段为用户邮箱，第三段为头像的参数。这里拿我自己的头像地址来讲：https://gravatar.loli.net/avatar/947695cdd998ee8dd50e153e12b35ff1?s=70其中https://gravatar.loli.net/avatar/为第一段。第二段为947695cdd998ee8dd50e153e12b35ff1；这是一个加密的邮箱地址，加密方式是md5。第三段为?s=70用于get请求是发送头像要求。我们只需要修改第二段就可以获取不同人的头像，方法也很简单，找一个md...
最近沉迷Jetbrains Mono字体，首先是他字符好看，16px的大小视觉效果堪称一流，配合Atom One Dark主题配置，完美使用，代码显示优雅漂亮。然后我发现了一款新的字体，由微软出的，名为连字特性的字体;也就是说，一些一元运算符在书写的时候，可以缩写为更短的字符，三个等于号变为三横线符号，还有数学的大于等于符号那些上个效果图：下载地址：githubvs code使用字体安装后，在设置里面的控制字体系列添加上'Cascadia Code'如果只需要大于号等于号连字效果而不想改变原来的字符字体，可以丢到第二位，第一位放你自己喜欢的字体名字。然后搜索Font ...
keep-alive作为vue的缓存标签，有时候也会遇到一些问题，比如，某些页面我们不想缓存，以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。但现在不一样了，以前的那种方法并不适合现在了，因为keep-alive自带了黑名单和白名单，在白名单中的路由或者组件将会缓存，黑名单中的则不会缓存。例子 <keep-alive include="a,b" exclude="c,d"> <router-view/> </keep-alive>多个组件用英文逗号隔开，单个就写...
用Layout的时候，我设置的是一行三个元素显示，但是有时候，遍历的对象可能无法满足一行三个显示，结果发现col元素会把拉伸一部分宽度。这就很尴尬了，我在使用其他框架的这种布局的时候都没遇到这种情况，没办法，只能用死办法，我给你补上几个空col了那么，如何计算需要补充几个呢？假设我们要遍历的数组名为：oneArr创建一个计算属性：fillArr() { const remainder = Math.ceil(this.indusArr.length % 3); if (remainder !== 0) { return 3 - remainder;...
以前的我，很喜欢用vuex来做一个元素的开关存储，因为简单粗暴，我不用考虑组件之间要怎么才能传参，怎么去更新，只需要设置一个变量，getters获取，mutations设置一下，一个开关变量就做好了。但是随着东西越来越多，我发现，vuex重复书写的代码非常多，我觉得这应该是以后vuex优化的一大方向，所以，我有点不太想用vuex来存储所有组件的开关状态了。于是我想到了props，父组件向子组件传参的方式传替布尔值开关。再利用sync修饰符，通过预设的更新方法更新内容。父组件<Child :switch.sync="open"> <script>...
今天写vue组件的时候碰到一个问题，我创建了一个子组件，这个子组件会通过父组件传过来的数组对象进行遍历，然后生成多个筛选菜单，这不是一个菜单，而是有多个，比如地区菜单，分类菜单，标签菜单，反正很多。每个菜单都要有对应的active状态，我才能知道他选中了没有，所以又传给子组件一个对象，对象里面包含了所有的菜单id的键值对，但是值是空的，等待子组件状态发生变化，再修改对象中的值。本来我是想省点事，不用vuex，然后利用对象的特性，引用类型，子组件可以直接修改对象里的属性，我父组件也能监控得到，但是问了下群友，说这种方式到时候很乱，所以我又改用了官方建议的方式，用emit。为此就用了sync...
原来如果要遍历一个字符串用的是for循环，通过输出下标的方式遍历每个字符。但是如果字符是大于0xFFFF的unicode字符，那么就无法正确输出了，所以现在推荐使用新的方法遍历。for of遍历用法和for in一样for (let code of "for"){ console.log(code); } //f //o //r查找方法原来的字符只有一个indexOf方法用于查找，现在新增三个方法：startsWith()它是用于判断字符的头部是否存在对应的字符，并返回布尔值，有两个参数，第一个是要查找的字符，第二个是起步的位置它这个可以理解为正则的开头匹配吧！...
项目经常要用到sass，这个东西，你翻墙都不一定能装上去，所以很烦，只能换源的方式安装。npm 换源npm config set registry https://registry.npm.taobao.org/ // 设置npm镜像源为淘宝镜像 npm config get registry // 查看npm当前镜像源yarn 换源yarn config set registry https://registry.npm.taobao.org/ // 设置yarn镜像源为淘宝镜像 yarn config get registry // 查看yarn当前镜像源
在使用了amfe-flexible自动px转rem的插件后。遇到过这个问题，发现无解啊，只要在组件的style里面书写大写的Px单位，vetur都会给你自动转成小写，很尴尬，特别是在用scss的情况下，组件内通过大小单位来让元素大小不自动转rem，无法完成，除非你关闭自动格式化，但是那是不可能的，太难了。有种鱼和熊掌不可兼得的感觉。但是作为一个成年人，怎么可能要做选择，我都要...这个办法也是我灵光一现，突然有的，我说下我的思路。[hide]首先自动转换时因为插件的功能，针对.vue格式的文件，所以在vue文件里面怎么弄，都很难达到理想的需求。那么，如果我们在其他文件里面呢？宾狗！！！是...
es6的解构，解构的是一个对象才行，如果不是对象，则先把右边的内容转成对象再进行解构。数组和对象的解构比较简单，这里就不多说了，主要讲讲另外几个对象类型的解构：string类型的解构解构一段文本内容，文本内容会被转换成类似数组的对象。let [a,b,c] = "one"; console.log(a); // o console.log(b); // n console.log(c); // e数值和布尔类型的转换这两个和字符不同，他们的转换后不是数组，而是一个继承了Number或者Boolean的所有方法的对象，可以尝试理解为是一个继承了他们类型的所有方法...
入正后发现官方的这个版本主题是不保存配置了，相对于以前的版本，这次改了好多东西，很多之前的css错位，无奈只能慢慢找方法。本教程只适合购买正版的用户，因为app.js没有被压缩存储主题配置默认都是存储在本地存储的，key值为_HYPER_CONFIG_；所以只能自己去找对应的方法了，然后发现有一段代码：/** * Preserves the config */ LayoutThemeApp.prototype._saveConfig = function (newConfig) { $.extend(this._config, ne...
vue使用better-scroll制作左右菜单联动better-scroll是一个纯js的插件，官方推荐配合vue这种纯前端开发使用，在vue中使用需要注意一些地方，比如初始化的时机，html的布局，事件的触发机制安装我现在都是用yarn 方便一些，未来的安装包管理器yarn add better-scrollyarn不写--save默认就是save，如果要--save-dev 如下写法yarn add better-scroll --dev安装完毕后可以在main.js文件中作为全局调用，也可以在对于的组件内调用，我是在组件中的，所以在组件的script元素中import<sc...
当我们给元素做了flex后，flex内的子元素宽度自适应，但是当我们给子元素设置文本溢出的时候，发现时候无效的，原因是因为他们的宽度没有限制，也就是说原始的宽度无限制，那么这个原始宽度又怎么说呢？他有一个优先级：优先级：flex-basis > width > 内容宽度。我们可以通过设置max-width或者min-width来限制他的宽度，但是并不是很合适，因为这两个只是一个区间，而我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。我们给这个flex子元素设置width:0;即可，设置一个极小的宽度。
之前我的用法就是，哪个组件需要引入这个变量就import引入，现在感觉有点麻烦，就想能不能做一个全局的，所有组件都可以直接引入这个scss文件中的内容。首先我们需要安装一个插件：style-resources-loadervue add style-resources-loader回车后会有提示四个选项，我们scss就选择scss然后回车。安装完毕后在项目根目录创建一个vue的配置文件，有就不用创建，直接用。创建vue.config.js文件，将下面的代码丢进去，自己改下路径地址：const path = require("path"); module.exports...
最近评论