vue tool 安装后在浏览器中不显示

Question

我跟着黑马在学习vue2 + vue3 其中他们使用到调试工具“vue tool”我将其成功安装后，在浏览器中还是无法看到。

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

首先，让我们看看您是否正确安装了 Vue Tool。您可以从该项目的GitHub仓库下载最新版本的 Vue Tool（https://github.com/vuejs/tools），然后将它添加到项目的 node_modules 文件夹中。

然后，请检查您的浏览器设置，确保 Vue 已经启用了。例如，如果在 Chrome 中启用了 Developer Tools，则在 macOS 或 Linux 上启用开发者工具可能也会有所帮助。可以在以下页面找到详细的设置指南：https://developer.chrome.com/docs/devtools/

此外，确保您已经安装了 Node.js，并且已经成功引入了 Vue CLI（如果尚未引入）。您可以按照以下步骤操作：

1. 在命令行中输入以下命令来安装 Vue CLI：

npm install -g @vue/cli

1. 接下来，按照提示安装 Vue Tool。在项目根目录下创建一个名为 vue官房 的文件夹，并打开终端。

mkdir vue官房
cd vue官房
npm install -g @vue/cli-plugin-tour

1. 使用以下命令启动 Vue官房（注意：此命令需要在 Windows 上运行）：

vue官房 --init

1. 现在，如果您仍然无法在浏览器中看到 Vue Tool，您可以尝试检查您的 HTML 文件。通常，Vue 会在 .vue 文件中内置调试工具，例如 <script> 标签中的 Vue.use(Tour). 如果您找不到这些组件，请查阅 Vue 官方文档以了解如何使用它们。

<script>
import Tour from '@vue/cli-plugin-tour';
</script>

1. 创建一个新 Vue 组件，例如一个新的 Vue 文件：

// main.js

export default {
  name: 'MyComponent',
  render() {
    return <div id="app">Hello World</div>;
  },
};

1. 打开终端，并导航到项目的 public/index.html 文件所在的目录。运行以下命令：

cd public
npx serve

1. 按照提示验证新的页面。应该可以看到您的 Vue 应用程序的缩略图，这表明 Vue 已成功添加到浏览器环境中。
2. 如果上述方法都无法解决问题，请联系项目管理员或导师以获取更多帮助。

希望以上建议能帮到您。祝您学习顺利！