Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS 作者: Chuwen 时间: 2022-05-21 分类: JavaScript 评论 先说答案,参考的是:https://github.com/laravel-mix/laravel-mix/issues/1942 ## 序言 最近在筹划着本博客新主题设计,想运用现代化前端技术,再加之对 Laravel mix 有一定的使用经验,所以选择了 Laravel mix 作为脚手架 ## 问题 `webpack.mix.js` 配置: ```js const mix = require('laravel-mix'); require('mix-tailwindcss'); mix.disableSuccessNotifications() .ts('src/app.ts', 'theme/assets') .setPublicPath('theme/assets') .sass("src/assets/sass/app.scss", "theme/assets") .tailwind('./tailwind.config.js') .webpackConfig({ module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ } ] } }) mix.browserSync({ proxy: '127.0.0.1:3792', files: ["theme/**/*.php", "src/*.js", "src/*.css"], open: false }) ``` `tailwind.config.js` 配置: ```js module.exports = { content: require('fast-glob').sync([ './src/**/*.{html,js,ts}', './node_modules/tw-elements/dist/js/**/*.js', './theme/**/*.php' ]), theme: { extend: {}, }, plugins: [ require('tw-elements/dist/plugin') ], } ``` 使用上述的配置,然后运行 `npm run watch`,就看到终端一直闪烁着编译结果,然后电脑风扇呼呼狂啸:  ## 解决方案 还好我用 Google + 英文搜索(用的蹩脚英文 😂),然后找到了这个 **issues**: https://github.com/laravel-mix/laravel-mix/issues/1942 翻啊翻,发现这个人给出的解决方案是可行的:https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038 1. 首先安装 `glob` - npm:`npm install fast-glob -D` - yarn:`yarn add fast-glob -D` 2. 然后将 `tailwind.config.js` 改为: ```js module.exports = { // 看这里 content: require('fast-glob').sync([ './src/**/*.{html,js,ts}', './node_modules/tw-elements/dist/js/**/*.js', './theme/**/*.php' ]), theme: { extend: {}, }, plugins: [], } ``` 然后就完美解决了
Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd 作者: Chuwen 时间: 2021-11-30 分类: JavaScript 评论 Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd  当我百思不得其解的时候,想到自己改动了 `freeMode` 参数部分,然后导致手动滑动的时候,就报出了这个错误。 原因是因为是按模块导入的,没有导入 `freeMode` 模块,只需要导入并使用即可: ```js import 'swiper/css'; import Swiper, {Autoplay, FreeMode} from 'swiper'; Swiper.use([Autoplay, FreeMode]); ```
解决 Swiper.js 无限滚动(跑马灯)手动滑动后会干扰移动效果 作者: Chuwen 时间: 2021-11-30 分类: JavaScript 评论 ### 预期效果 向左、向右滑动后,松开鼠标/手,必须按照初始移动方向移动,并且移动速度不能有太大的变化 ### 解决办法就是: 设置 `freeMode.momentumRatio` 设置的小一点,比如 `0.01` 设置 `freeMode.momentumBounce` 为 `false` 在线预览:https://codepen.io/printnow/pen/ZEXEajW ** freeMode** 参数: | 参数 | 类型 | 默认值 | 备注 | | ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ | | [enabled](https://swiperjs.com/swiper-api#param-freeMode-enabled) | `boolean | FreeModeOptions` | 启用自由模式功能。对象的自由模式参数或布尔值为 `true` 以启用默认设置。 | | [minimumVelocity](https://swiperjs.com/swiper-api#param-freeMode-minimumVelocity) | `number` | 0.02 | 触发自由模式动量所需的最小接触移动速度 | | [momentum](https://swiperjs.com/swiper-api#param-freeMode-momentum) | `boolean` | true | 如果启用,则在释放滑块后,滑块将继续移动一段时间 | | **[momentumBounce](https://swiperjs.com/swiper-api#param-freeMode-momentumBounce)** | `boolean` | true | 如果要在自由模式下禁用动量反弹,请设置为 `false` | | [momentumBounceRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumBounceRatio) | `number` | 1 | 值越大,动量反弹效应越大 | | **[momentumRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumRatio)** | `number` | 1 | 释放滑块后,该值越大,动量距离越大 | | [momentumVelocityRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumVelocityRatio) | `number` | 1 | 释放滑块后,该值越高,动量速度越大 | | [sticky](https://swiperjs.com/swiper-api#param-freeMode-sticky) | `boolean` | false | 设置为 `true` 可在自由模式(`freeMode`)下启用捕捉幻灯片位置 | ### JS 代码: > 如果你是按照模块导入的,一定要导入 `FreeMode` 模块! ```js import 'swiper/css'; import Swiper, {Autoplay, FreeMode} from 'swiper'; Swiper.use([Autoplay, FreeMode]); let itemCount = parseInt(u('.swiper-wrapper').data('item-count')); const swiper = new Swiper("#reviews-list", { width: window.innerWidth, resistanceRatio: 0, speed: 10000, observer: true, observeParents: true, slidesPerGroup: 1, // autoplay autoplay: { delay: 0, // 每个图片移动完成后间隔 disableOnInteraction: false // 触摸后是否停止自动移动 }, freeMode: { enabled: true, momentumBounce: false,//主要是这2个参数 momentumRatio: 0.01//主要是这2个参数 }, // 不贴合 // loop loop: true, // 循环 // grid centeredSlides: true, slidesPerView: 'auto',//5 spaceBetween: 25, loopedSlides: itemCount, loopAdditionalSlides: itemCount, }); ``` #### HTML 代码例子: ```html Swiper.js 无限跑马灯 评论1 评论2 评论3 评论4 评论5 评论6 评论7 评论8 评论9 评论10 ```
Vue.js 组件 script 分离 作者: Chuwen 时间: 2021-10-14 分类: Vue.js 评论 ## 需要 通常情况下,在单 `.vue` 文件开发很方便,但是当业务逻辑起来了,那么经常需要修改 `script` 和 `template` 部分,用编辑器分屏也不是那么好操作,故有了**组件 script 分离** ## 例子 ### `TableList.vue` ```vue 测试 {{test}} ``` ### `index.js` > 在 `TableList.vue` 同级创建个如 `index.js` 文件 ```js export default { name: "TableList", components: { 'pagination': Pagination }, data(){ return { test: 'test' } } } ```
Vue.js 下拉框组件当点击菜单栏外的时候关闭菜单 作者: Chuwen 时间: 2021-08-23 分类: Vue.js,JavaScript 评论 ## Menu.vue > 菜单组件 >  ``` ```