- 博客(43)
- 收藏
- 关注
原创 SvelteKit - 2.基础知识
假设如果你不想在second/a 中用 second/layout.svelte 的布局文件,那么我们就可以在 a/page.svelte 中添加 @about 符号,定位到 about/layout.svelte 布局文件。模块 layout:如果你想在特定的子文件里面进行添加,比如 /about 路由,那么我们可以添加在 /about/layout.svelte ,那么这个 layout 文件只作用在 /about 路由下面。在src/routes下面创建;承接单个页面的内容。
2024-07-29 09:14:26 156
原创 svelte - 2. 数据绑定 / 基本组件
每个块级标签都可以对 clientWidth、clientHeight、offsetWidth 以及 offsetHeight 属性进行绑定(只读)感觉是跟 vue 差不多的,官网的示例是在 onMount 生命周期设置 canvas 的。:勾选复选框(xxx是boolean类型)、按 shift + 鼠标选择多个内容。: 绑定值(xxx是数字)可以让一个div可输入。感觉跟原生的区别不大。
2024-07-23 09:12:56 260
原创 svelte - 1. 基础知识
由于 Svelte 的反应性是由赋值语句触发的,使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。:调用event.preventDefault() ,在运行处理程序之前调用。: 优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)。:调用 event.stopPropagation(), 防止事件影响到下一个元素。直接类似这样,在行内写 on.click=“{() => {}}”(2)子组件 nested.svelte。
2024-07-22 16:21:27 1097
原创 element-ui 源码 - 0. 项目启动
因为 package.json 中 node-sass 用的 4.11.0,查看yarn.lock 用的 4.14.1。如果 clone 太慢 就加上 --depth=1。官方建议用 yarn install。
2024-06-20 17:58:06 204
原创 vue3 nuxt3子组件使用emit报warningExtraneous non-emits event listeners were passed to compont but could...
Extraneous non-emits event listeners (chooseRadio) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare i
2023-11-22 14:18:02 437
转载 git checkout 提示 “error: The following untracked working tree files would be overwritten by checkout”
git
2022-07-04 16:15:24 1982
原创 webpack基础(10).拆分环境变量和生产环境配置
一、公共路径可以看到根据前几掌的学习,dist/app.html 引用的资源都是通过相对路径来引用的。如果想要使用 CDN 的路径或者当前服务器的路径,来作为link上面的路径前缀,就可以使用publicPath。publicPath:可以用来指定应用程序中所有资源的基础路径。webpack.config.jsexport default {// ... output: { // ... publicPath: 'http://localhost:8080/' }}打
2022-05-11 21:54:53 624
原创 webpack基础(9).缓存
webpack打包后,会生成一个 dist 目录,打包后的内容就会放置在这个目录下。只要 dist 目录中的内容部署到了 server 上,client (通常指浏览器)就能够访问这个server 的网站及其资源。然鹅获取资源这一步是比较耗费时间的,因此浏览器使用了缓存技术,降低网络流量,让页面加载更快。但是,如果我们部署的时候不更新文件名,浏览器就可能会认为这个文件没有修改,就会使用这个文件的缓存版本。这样就没有用到我们的新代码。因此,本章通过必要的配置,确保 webpack 编译生成的文件既能够
2022-05-10 21:20:54 524
原创 webpack基础(7).使用babel-loader
Webpack 自带加载 js模块 的功能,但是他只能做 js模块化 的打包,并不能转换 js 里面的代码,比如将 ES6 转换成 ES5。有时候我们的代码还能运行,这纯靠浏览器的解析。如果浏览器版本比较低的话,运行的时候就会发生错误。因此,我们写代码的时候是需要转化的,这个转换的工具,就是babel。babel 和 webpack 的结合,就需要一个 babel-loader。一、babel-loader安装npm install -D babel-loader @babel/core @b
2022-05-07 22:01:03 2131
原创 webpack基础(6).资源管理(loader)
一、什么是loaderwebpack只能理解 js 和 json 文件,这是webpack自带的能力。loader可以让webpack处理其他类型的文件,并对其转换成有效的模块,让应用程序使用,以及添加到依赖图中。loader的属性:在webpack的配置中,loader有两个属性。test: 表示哪些文件会被转换。use: 表示使用什么 loader 进行转换。例子:const path = require('path');module.exports = { output: {
2022-05-06 21:30:53 389
原创 webpack基础(4).mode选项
在前几章的学习中,我们有很多的手动操作的地方。比如访问html需要手动复制路径访问;更新了文件之后,需要手动执行编译命令,而且只能手动刷新浏览器才能看到新的效果…mode: development 使webpack的编译模式改为开发环境使用source map编译后看到bundle.js中显示的代码,它和源代码并不一致,因此并不易于调试和查看。这时候可以用source map让编译后的代码和源文件内容一样,且精准锁定出错代码的位置:devtool: inline-source-mapwa
2022-04-28 21:16:32 318
原创 Webpack基础(3). 自动引入资源(webpack插件)
一. 什么是插件随着应用程序的增长,如果继续手动地在 index.js 里面引入插件就会越来越困难,因此我们想要自动引入插件,那么就可以使用 webpack插件 。webpack插件什么是插件呢?webpack 就像一条生产线,要经过一系列的处理流程后,才能将入口文件转换为输出的结果。例如上一篇中,入口文件 index.js,需要依赖于 hello-world1.js 和 hello-world2.js 两个 js 文件,而依赖的这两个 js 文件可能还会依赖于其他的 js 文件以及 css 文件,
2022-04-26 21:15:26 1915
原创 Webpack 基础(2).小试webpack
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、安装Nodejs二、安装Webpack三、自定义Webpack配置总结一、安装Nodejswebpack是基于node来开发的,所以先安装node.js的环境。node.js选择版本。node.js官网地址常识科普:LTS (Long Terms Support):长期支持,推荐使用。(安装有问题的话,步骤可以看看别的博客)安装完了,看一下 node.js 和 npm 的版本号node -vnpm -v.
2022-04-25 20:59:44 1135
原创 vue中定时请求数据 --- setInterval
问题发现我是在mounted用setInterval给方法定时,需要注意的是setInterval的指向这样可以:data() { return { timer: null }},mounted() { // *5分钟定时刷新投诉条数 this.timer = setInterval(() => { this.getCount(); }, 300000) }, beforeDestroy() { clearInterval(this.ti
2022-02-24 15:20:05 2122
原创 使用css修改svg颜色
直接用css控制svg标签下g标签的stroke属性:svg g { stroke: red;}另法:如果svg可以自己在代码里面操控,也可以直接在svg标签下的g标签加stroke=”red“,像这样:
2022-02-09 14:00:14 9791 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人