LsWorld

npm包管理器简介npm 是 Node.js 标准的软件包管理器。现在也可以使用yarn来代替npm作为一个包管理器。 npm常用命令 下载npm 可以管理项目依赖:npm i 或 npm install 它会在 node_modules 文件夹（如果尚不存在则会创建）中安装项目所需的所有东西。 安装单个软件包npm i <package-name> 或 npm install <package-name> 在安装软件包的时候添加--save表明安装并添加条目到 package.json 文件的 dependencies。 --save-dev 安装并添加条目到 package.json 文件的 devDependencies。 区别主要是，devDependencies 通常是开发的工具（例如测试的库），而 dependencies 则是与生产环境中的应用程序相关。 更新所有软件包：npm update 更新指定软件包：npm update <package-name> 运行指定任务： 在项目的package.json...

package.json文件package.json 文件是项目的清单。 它可以做很多完全互不相关的事情。 例如，它是用于工具的配置中心。 它也是 npm 和 yarn 存储所有已安装软件包的名称和版本的地方。 例如Vue项目中的package.json文件: { "name": "test-project", "version": "1.0.0", "description": "A Vue.js project", "main": "src/main.js", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "test": "npm run unit", ...

命令行运行node.jsapp.js为要运行的主程序文件。 node app.js 退出node.js程序console.log(123) process.exit(1) console.log(1234) //1234 将不会输出 exit(1)中 exit()括号中默认的退出码为0，表示成功。 在node.js中导入其他包node.js中使用的模块化语法为common.js，所以在导入文件时使用require，暴露文件则用exports 第一种方式//export.js文件 const obj = { name: '小王' } module.exports = obj //导入文件 const obj = require('./export.js') console.log(obj) //控制台输出 { name: '小王' } 第二种方式//export.js文件 exports.person = { name: '张三', age: 20 } const obj = re...

今天部署博客发现在本地运行的时候也会出现页面迟迟无法出现的问题，结果打开控制台面板一看发现type.js没有使用上。 查看源代码发现https://cdn.jsdelivr.net/npm/typed.js@2.0.11挂了，而matery主题默认使用jsdelivr来引入一些js代码。 现在在控制台中发现了错误，那解决办法就很简单了，在matery主题的源代码中将cdn换成国内加速就可以完美解决副标题不显示的问题了。 问题定位到 Matery 主题中引入 typed.js 的 CDN 地址不可用。 经过一路筛查后发现在主题文件的\layout\_partial\bg-cover-content.ejs中发现了代码。接下来把他替换成https://cdn.bootcss.com/typed.js/2.0.5/typed.js，就可以完美解决问题了 重新启动后发现报错没了，副标题也一如既往的显示了。

Vercel的基本介绍要是用过hexo来搭建的博客的话，在hexo的官方文档中就有介绍过如何将博客的静态页面搭建到Vercel平台中。但Vercel不仅能搭建静态的页面，也可以将自己github账号中的项目所作的页面进行一个展示，可以省去自己使用服务器搭建的费用。这里只对Vercel基础搭建做一个介绍，想了解更多可以查看官方文档Introduction to Vercel – Vercel Docs 注册Vercel进入到Vercel登录页面，这里直接连接你的github账号。 因为我早已经连接过了，其他的步骤就无法演示了。根据提示一步步下去到最后出现下面这个页面就成功了。 搭建使用vue3+vite所建立的的项目在node.js环境下使用npm init vite@latest来创建一个vite项目 这里接下来会有让你选择项目名与框架。如上图可知我目前创建的项目名是vite-project使用的框架为vue，并且使用ts语法。 在项目的根目录中使用npm install命令导入了vite所需要的包。接下来就是启动项目看看项目页面如何。 vite默认开启了端口...

数组Array是大家日常开发中使用的比较多的数据类型，这里就不进行过多赘述了，本文主要介绍一些数组常用的方法与操作，以供在写算法或在开发中更好的解决问题。（这里只做了一些我平常用到较多的方法，更多的方法参考MDN Web Docs (mozilla.org)官方文档） 数组的常见操作创建数组//使用new Array()创建数组 let arr = new Array(1,2,3) console.log(arr) //[1, 2, 3] //使用字面量来创建数组 let arr = [1,2,3] console.log(arr) //[1, 2, 3] 访问数组元素let arr = [1,2,3] console.log(arr[0]) // 1 console.log(arr[3]) // undefined JavaScript中访问一个不存在的元素不会报错，会返回undefined 遍历数组//使用for循环遍历数组 let arr = [1,2,3] for(let i = 0; i <arr.length; i++){ c...

在项目实际开发中，有时候需要对数据进行限制或模糊匹配的时候，正则可以很好的解决这些问题。 正则表达式的基础使用正则表达式的语法：/表达式/ 在javascript中，创建正则表达式的方式有两种，一是用字面量的方式创建，即let 变量名 = /表达式/，另一种是通过RegExp()构造函数的方式创建。 在检测字符串是否符合正则编写规范时，可以使用test()来检测。 let str = '123' let reg1 = /123/ let reg2 = RegExp(/123/) console.log(reg1.test(str)) //true console.log(reg2.test(str)) //true 模式修饰符模式修饰符是在正则基础表达式后面加上后缀，从而实现一些功能。 模式符 说明 g 用于在目标字符串中实现全局匹配 i 忽略大小写 m 实现多行匹配 u 以Unicode编码执行正则表达式 y 黏性匹配，仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引 模式符可以根据需求多个混合使用 let str = 'a...

TypeScript的安装因为TypeScript只是相当于JavaScript的拓展，JavaScript所有语法并对其进行一些语法的增加，安装可以通过Node.js的npm包控制管理进行安装。使用npm i -g typescript进行全局安装。 浏览器目前默认识别不了ts文件，需要通过tsc xxx.ts来进行将ts转变为js，使用tsc xxx.ts -w会自动监听ts文件的变更。 TypeScript配置在根目录创建tsconfig.json对ts进行配置，在命令行中使用tsc或tsc -w来运行配置文件 //tsconfig.json文件 { //"compilerOptions"编译器的选项 "compilerOptions": { //"target"用来指定ts编译为js的版本 "target": "ES6", //"module"指定要使用的模块化的规范 "module": "ES6", //"strict"所有严格检查开...

常用Composition APIsetup组件中所需要用到的数据方法等，均要配置在setup中，setup值为一个函数 有两种返回值： 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用 若返回时一个渲染函数：则可以自定义渲染内容 setup函数会接收到两个参数，第一个为props为组件数据传递，第二个为context上下文 setup不能使用async，但如果父组件中使用Suspense来修饰子组件并用动态引入则可以返回Promise setup会在beforeCreate之前执行一次，this是undefined ref函数原先vue2中的ref写在标签内部作为一个标识一样的存在 使用需要import {ref} from 'vue'引入 数据经过ref加工变成Reflmpl{}进行包装实现响应式 ref函数内部如果为对象等引用数据类型则会额外使用reactive函数 reactive函数用于定义一个对象类型的响应式数据，通过proxy来实现响应式，并通过reflect操作源对象内部的数据调用数据可以不加...

Webpack就是将浏览器识别不了的文件转换为浏览器能识别的文件 webpack4的安装（以下全以webpack4版本进行，之后再用webpack5进行比较）在安装webpack前要确保电脑已经安装了node.js npm i webpack@4 -D -g是全局安装开发者模式的webpack其中-g代表全局安装-D代表开发者模式 npm i webpack-cli@3 -D -g是全局安装开发者模式的webpack-cli其中-g代表全局安装-D代表开发者模式 其他的安装与上同理 如果想局部安装就去掉-g即可。 全局运行webpack可以直接在命令行输入webpack就可进行打包 没有全局安装，但局部安装了。局部运行webpack需要在命令行输入npx webpack才能进行打包 webpack的配置文件webpack.config.js为webpack的配置文件，当运行webpack会加载里面的配置 //webpack.config.js 模块化默认采用采用commonjs //resolve用来拼接绝对路径的方法 const { resolve } =...

mustache模板引擎模板引擎是将数据变为视图的最优雅解决方案，用{{}}来进行表示 mustache官方git: janl/mustache.js: Minimal templating with in JavaScript (github.com) 使用正则表达式来实现简单的模板替换var templateStr = '<h1>标题{{title}},内容{{content}}</h1>' var data = { title: '模板', content: '了解' } // 正则中用\进行转义 \w搜索字母 /g表示全局搜索 //replace方法接收到参数 var replaceStr = templateStr.replace(/\{\{(\w+)\}\}/g,function(findStr,$1){ console.log(f...

javascript的数据类型： 使用typeof来判断数据类型console.log(typeof '字符串')//输出 string console.log(typeof 123)//输出 number console.log(typeof true)//输出 boolean console.log(typeof null)//输出 object null输出object是历史遗留问题 let a console.log(typeof a)//输出 undefined const s = Symbol(1) console.log(typeof s)//输出 symbol const bigInt = 132n console.log(typeof bigInt)//输出 bigint const fn = function(){ console.log('函数') } console.log(typeof fn)//输出 function const arr = [] console.log(typeof arr)//输出 object...