- 博客(17)
- 收藏
- 关注
原创 关于在vsCode中,使用‘-‘作为连字符的类名无法双击选中的解决办法
1、打开 VS Code 设置:可以通过菜单栏的 “文件”(File)-> “首选项”(Preferences)-> “设置”(Settings) 或者使用快捷键 Ctrl + ,(Windows/Linux)或 Cmd + ,(Mac)打开设置。在 VS Code 中,默认情况下,双击选中类名的功能会根据编辑器中的字词分隔符(Word Separators)来确定。如果你想要使用 class-name 这样的写法,并且希望可以双击选中类名,可以通过修改 VS Code 的设置来实现。
2023-08-08 10:17:14 1035
原创 使用nodejs写接口
/ 定义GET请求的路由 app . get('/api' ,(req , res) => {');});// 定义POST请求的路由 app . post('/api' ,(req , res) => {});// 启动服务器 app . listen(3000 ,() => {});这个代码创建了一个Express应用程序,并定义了两个路由:一个用于处理GET请求,另一个用于处理POST请求。当GET请求到达时,服务器将返回"Hello World!
2023-02-22 10:58:43 10812 4
原创 TypeScript
一、邂逅TypeScriptTS的编译环境注意:默认情况下,所有的ts文件都是在同一个作用域下编写的,如果想把每一个ts文件当做一个单独的作用域的时候,可以使用export {},这样这个文件就是一个单独的作用域,当然,这只是其中的一种方式npm install typescript -g安装typescript之后自动就安装了tsc。然后就可以通过tsc typescript.ts命令 把typescript.ts转成js代码ts的运行环境方式二:通过ts-
2021-07-21 14:05:36 764
原创 模块化开发
常见的模块化规范:CommonJS、AMD、CMD,还有ES6的ModulesCommonJS导出导入注意:直接在js文件中使用CommonJS的导入和导出并不能实现模块化,CommonJS可以使用webpack对上边的代码做一个支撑ES6导出(export)导入(import)导入只有 export defult 和 import * as aaa from 的时候不用加大括号...
2021-07-18 15:36:29 106
原创 VUEXvuex
一、什么是状态管理?二、vuex 的基本使用注意:vuex里的数据都是响应式的1、安装vuexnpm install vuex@next注意:vuex@next的意思是安装最新版本的vuex2、创建Store3、在组件中使用store三、单一状态树注意:虽然一个应用可以创建多个store,但是建议只创建一个store实例三、vuex的五大核心1、state注意,state属性为一个函数返回一个对象 和data一样使用opctionsAPI compu
2021-07-15 15:01:42 250
原创 三、css-loader以及style-loader的使用
1、什么是loader?loader 可以用于对模块的源代码进行转换;我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的;在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能;2、css-loader和style-loader的安装方法:npm install css-loader -D 安装css-loader方法:npm install style-loader -D 安装style-loader3、css
2021-07-12 15:02:45 803
原创 composition API(三)
一、生命周期钩子注意:生命周期可以注册多个二、provide和injectprovide()有两个参数 第一个是传过去的key,第二个是传过去的值inject()可以有两个参数 第一个是传过来的key,如果传来的没有值 第二个参数可以设置默认值建议:传过去的值一般都用readonly()包裹 这样的话子孙组件就没办法修改这个值了...
2021-07-12 15:02:11 99
原创 BOM对象
一、BOM对象1、Window代表的是整个浏览器的窗口,同事Window也是网页中的全局对象2、Navigator代表的是当前浏览器的信息,可以通过该对象来识别不同的浏览器3、Location代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面4、History代表浏览器的历史记录,可以通过该对象操作浏览器的历史记录(该对象不能获取到具体的历史记录,只能操作浏览器页面向前或者向后。而且该操作只在当次访问是有效)5、Screen代表用
2021-07-12 15:01:36 98
原创 VUE ROUTER---路由
一、认识和安装vue-routervue-router是基于路由和组件的路由用于设定访问路径, 将路径和组件映射起来.在vue-router的单页面应用中, 页面的路径的改变就是组件的切换安装vuerouter:npm install vue-router@4细节:@4代表的是安装vuerouter4最新的版本二、路由的使用步骤三、路由的默认路径四、router-link通过.router-link-active这个类名可以给router-link这个内置组件样式
2021-07-06 16:15:10 1028
原创 composition API
一、composition API的基本使用**为了开始使用Composition API,我们需要有一个可以实际使用它(编写代码)的地方;在Vue组件中,这个位置就是 setup函数。setup其实就是组件的另外一个选项只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项比如methods、computed、watch、data、生命周期等等**1、setup函数的基本使用setup函数的基本使用包括两部分:他的参数和返回值注意:setup()函数中不能使用thi
2021-06-23 20:03:19 663
原创 vue3-动画之结合第三方库的使用
一、animate.css1、什么是animate.css?Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目,对于强调、主页、滑动、注意力引导 非常有用2、如何使用animate.css?第一步:安装animate.css方法:npm install animate.css第二步:导入animate.css库方法:import "animate.css"注意:建议在main.js文件中导入第三部:使用animation动画或者animate提供的类
2021-06-21 14:49:30 1631
原创 vue3动画的基本使用
一、vue的transition动画1、transition的基本使用注意:transition组件包裹单个元素或者组件2、transition组件的原理3、过渡动画的class注意:如果transition组件没有设置name属性,那么class默认使用 v-4、class的命名规则和添加时机注意:如果我们使用的是一个没有name的transition,那么所有的class是以 v- 作为默认前缀;如果我们添加了一个name属性,比如 ,那么所有的class会以 why
2021-06-19 19:15:38 1356 1
原创 四、webpack5最新打包资源额方式-assetmoduletype(资源模块类型)
asset module type我们当前使用的webpack版本是webpack5: 在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader 、url-loader、file-loader;在webpack5开始,我们可以直接使用资源模块类型(asset module type),来替代上面的这些loader;资源模块类型(asset module type),通过添加 4 种新的模块类型,来替换所有这些 loader: asset/resource 发送一个单独
2021-05-28 14:54:10 673
原创 三、loader----file-loader和url-loaderr(加载图片的loader)
1、file-loader**实际开发中,引入图片一般有两种,img和background-image,1.1、background-image设置背景图这里的类名hulu1改为了hulu;然后安装file-loader方法:npm install file-loader -D配置:1.2 img图片引入**注意img引入的时候必须像上图这样把图片当做一个模块,先导入在赋值给img.src**配置方法和background-image一样,不需要重复配置。然后执行命令
2021-05-27 21:16:40 475
原创 一、webpack的全局安装和局部安装以及使用
1、webpack的使用前提webpack的运行环境是依赖Node环境的,所以电脑上必须有node。安装node 14.15.5版本,npm 6.14.11版本2、webpack和webpack-cli全局安装和使用**方法:npm install webpack webpack-cli -g**安装好之后就可以在终端运行webpack,当我们运行webpack的时候,webpack会找当前目录下的src/index.js作为入口,如果项目中没有这个文件夹那么就会报错。出口文件默认为dist文件夹
2021-05-26 18:55:31 4196 1
原创 二、webpack的配置文件-wenpack.config.js--指定入口文件和出口文件
3、webpack的配置文件(这个文件可以指定入口文件和出口文件)3.1手动创建一个webpack.config.js文件,并指定出入口文件创建完成使用 npm run build就可以打包完成了。当然这个文件的名字也可以设置成其他的名字:...
2021-05-26 13:25:29 264
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人