找出vue里已经导入但是未使用的组件

biaoxiaoduan 发布于2019-08-23 10:28 / 2523人阅读

摘要：于是我就编写了这个文件来找出已经导入但是未使用的组件。如果你没用过，但是想使用。

这是什么

在使用vue的时候，有时候由于种种原因会使我们导入一些组件，最终却没有使用它。
于是我就编写了这个php文件来找出已经导入但是未使用的组件。

为什么是php

JavaScript不能访问本地文件，node.js我不会。
如果你没用过php，但是想使用。可以自己搭建一个php环境，Windows下个wamp可以一键安装。

怎么使用

复制底部代码，编辑check.php文件的第一行，替换""里的内容为你的src路径

const PATH = "你的vue项目的src路径";

保存为check.php到www目录下，然后游览器访问http://localhost/check.php

代码

 $v) {
            if (is_array($v)) {
                getPath($v, $path . "/" . $k);
            } else if (is_string($v) && strpos($v, ".vue") !== false) {
                searchNoUseComponents($path . "/" . $v);
            }
        }
    }
}

// 把驼峰改成短横线分隔命名
function humpToLine($str)
{
    $str = lcfirst($str);
    $str = preg_replace_callback("/(([A-Z]|[0-9]){1})/", function ($matches) {
        return "-" . strtolower($matches[0]);
    }, $str);
    return $str;
}

// 寻找vue内导入却未使用的组件
function searchNoUseComponents($path)
{
    if (file_exists($path)) {
        $flag = 0;
        $myFile = fopen($path, "r");
        $components = [];
        $originComponents = [];
        while (!feof($myFile)) {
            $line = fgets($myFile);
            if (strpos($line, "components: {}") !== false) {
                break;
            } else if (strpos($line, "components: {") !== false) {
                $flag = 1;
            } else if ($flag == 1 && strpos($line, "}") === false) {
                $components[] = humpToLine(trim(trim($line), ","));
                $originComponents[] = trim(trim($line), ",");
            } else if ($flag == 1 && strpos($line, "}") !== false) {
                break;
            }
        }
        fclose($myFile);
        $res = fopen($path, "r");
        $vue = fread($res, filesize($path));
        foreach ($components as $k => $v) {
            if (strpos($vue, "<" . $v) === false) {
                echo ltrim($path, PATH) . " 内组件 " . $originComponents[$k] . " 导入但是未使用" . "
";
            }
        }
    }
}

https://github.com/wangshanta...

云服务器海外云主机 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96377.html

找出vue里已经导入但是未使用的组件

摘要：于是我就编写了这个文件来找出已经导入但是未使用的组件。如果你没用过，但是想使用。这是什么在使用vue的时候，有时候由于种种原因会使我们导入一些组件，最终却没有使用它。于是我就编写了这个php文件来找出已经导入但是未使用的组件。为什么是php JavaScript不能访问本地文件，node.js我不会。如果你没用过php，但是想使用。可以自己搭建一个php环境，Windows下个w...

xiaodao 2019-07-01 10:23 评论0 收藏0
webpack实战

摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。原文链接：webpack实战，原...

cyrils 2019-08-22 17:32 评论0 收藏0
预计今年发布的Vue3.0到底有什么不一样的地方？

摘要：模板语法的将保持不变。基于的观察者机制目前，的反应系统是使用的和。为了继续支持，将发布一个支持旧观察者机制和新版本的构建。 showImg(https://segmentfault.com/img/remote/1460000017862774?w=1898&h=796); 还有几个月距离vue2的首次发布就满3年了，而vue的作者尤雨溪也在去年年末发布了关于vue3.0的计划，如果不...

fnngj 2019-08-23 14:40 评论0 收藏0
Vue脚手架的简单使用

摘要：提前申明注意自己对脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方一种项目构建工具，可以将和压缩成一个文件。之后使用项目名进入项目根目录，使用来自动安装项目依赖。提前申明注意：自己对vue脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方 webpack 一种项目构建工具，可以将css和js压缩成一个文件。此外，可以提供测试用服务器。使用webpa...

Genng 2019-08-22 18:35 评论0 收藏0