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: [], } ``` 然后就完美解决了
Vue 3 渲染后端返回的标签 | component 标签的使用 和 compile 的使用 作者: Chuwen 时间: 2022-05-13 分类: WEB开发 评论 ## 缘由 项目中有一个需求，需要动态渲染后端返回的 HTML，如下所示，下述的**每一个** `svg` 是后端动态返回的 ```html <template> <div class="class-name"> <!--这里的每一个 svg 都会从 API 返回渲染--> <svg></svg> <svg></svg> <svg></svg> </div> </template> ``` 试过这样，但是不会渲染出来： ```html <template> <div class="class-name"> <template v-html="svg1"></template> <template v-html="svg2"></template> <template v-html="svg3"></template> </div> </template> ``` ## 解决方案 通过浏览 Vue.js 文档，发现如下文章： - [渲染函数 - 模板编译](https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6 "模板编译") - [内置特殊元素 - component](https://staging-cn.vuejs.org/api/built-in-special-elements.html#component) - [在 Vue.js 中使用 Vue.compile](https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3) ### `<component>` 是 Vue 内置特殊元素 > `<component>` 和 `<slot>` 具有类似组件的特性，也是模板语法的一部分。它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。 所以，使用 `<component>`、`Vue.compile` 就实现了我想要的功能 gist: https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b ```vue <template> <h2>实现效果</h2> <div class="class-name"> <component :is="getSvg" :style="svg_style"></component> <component :is="getSvg" :style="svg_style"></component> <component :is="getSvg" :style="svg_style"></component> </div> <h2><code>getSvg</code> 输出结果：</h2> <pre v-text="getSvg"></pre> <h2><code>svg</code> 输出结果：</h2> <pre v-text="svg"></pre> </template> <script> import { compile } from "vue"; export default { name: "App", components: {}, data() { return { svg_style: { width: "64px", height: "auto" }, svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2045" width="512" height="512"> <path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path> <path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z" fill="#087E6A" p-id="2047"></path> <path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z" fill="#087E6A" p-id="2048"></path> </svg>`, }; }, computed: { getSvg() { return compile(this.svg); }, }, }; </script> <style> .class-name * { display: block; } </style> ``` <iframe src="https://codesandbox.io/embed/sparkling-fog-2ycfeb?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="sparkling-fog-2ycfeb" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>
Laravel 使用 Pipeline 实现 AOP（我不太清楚是否真属于 AOP 我也是一知半解，如有误请指正！） 作者: Chuwen 时间: 2022-05-05 分类: PHP 评论 ### 参考链接： 1. https://learnku.com/laravel/t/7543/pipeline-pipeline-design-paradigm-in-laravel 2. https://learnku.com/articles/44435 gist : https://gist.github.com/PrintNow/cbfe2db1b809bf72328a97ad9bd4449b --- ```php <?php //Tinker away! // Laravel 使用 Pipeline 实现 AOP（我不太清楚是否真属于 AOP 我也是一知半解，如有误请指正！） // 参考链接： // 1. https://learnku.com/laravel/t/7543/pipeline-pipeline-design-paradigm-in-laravel // 2. https://learnku.com/articles/44435 interface Pipe { public function handle($content, Closure $next); } class RemoveBadWords implements Pipe { public function handle($content, Closure $next) { echo "替换敏感词" . PHP_EOL; // TODO 替换敏感词为 * return $next($content); } } class ReplaceWords implements Pipe { public function handle($content, Closure $next) { echo "替换单词" . PHP_EOL; $content = str_replace('you', 'PHP', $content); return $next($content); } } $input = 'I Love you'; $output = app(\Illuminate\Pipeline\Pipeline::class) ->send($input) ->through([ RemoveBadWords::class, ReplaceWords::class, ]) ->then(function ($content) { return $content; }); echo "最终处理结果：$output"; ``` ## 运行结果 