怎么安装VUE的官方插件,vue-devtools。在控制台直接追踪查看vue的变化

第一种方法：需正常打开chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用；

第二种方法：github下载插件，npm包安装依赖，拖入浏览器扩展程序。具体 *** 作如下：

1、下载chrome扩展插件。在github上下载压缩包并解压到本地。

2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。

3、 打开shells>chrome>manifest.json并把json文件里的persistent：false改成true。

4、扩展chrome插件。打开chrome浏览器，打开更多工具>扩展程序；再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入。

5、测试安装成功。在插件的目录下执行npm run dev，这个时候的插件就可以运行了。

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 集合了大量由社区贡献的插件和库。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：