Vue插件安装详细步骤（Vuex）

已于 2023-11-11 21:05:15 修改
阅读量1.1k 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-11-11 20:27:46 首次发布
原文链接：https://blog.csdn.net/qq_47305413/article/details/125646446
版权

1、插件安装网址

https://chrome.zzzmh.cn/index

推荐使用最新版本的 Google Chrome 浏览器

最新版浏览器下载更新地址：https://www.google.cn/intl/zh-CN/chrome/

极简插件下载：https://chrome.zzzmh.cn

插件安装教程：https://chrome.zzzmh.cn/help/setup

在这里插入图片描述

安装完后，运行含Vue的代码发现，控制台显示插件没安装，对次解决方法看另外一篇

2、打开网址

在这里插入图片描述

把解压包里面的crx 文件直接拖拽到浏览器中空白位置，安装成功之后 重启浏览器。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意 vue开发者工具 你得运行一个vue项目才会出来 !!!

在谷歌浏览器地址中输入： chrome://extensions/

如果没有显示 添加扩展工具的话 请把左侧的开发者模式打开

在这里插入图片描述

参考文章链接：

如何在谷歌中安装VUEX调试工具（谷歌浏览器中安装 vue调试工具 vue-devtools）

https://www.pianshen.com/article/22882520503/

天空～之城
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谷歌Vuex插件Vue.js devtools安装后控制台不显示的问题
xiaohu_haha的博客
03-20 2562
插件安装后，打开浏览器右上角有灰色的图标显示但是打开控制台却没有vue的提示，这种情况是因为你打开的只是一个谷歌浏览器页面，此页面并不是项目的页面，就会只有右上角显示灰色图标，如果页面是打开的项目页面，右上角图标会变成彩色，并且F12后控制台会有Vue的标题。
vuex-persistence:vuex的本地化存储和跨窗口同步state插件,同时适用于electron环境
05-13
功能介绍 vuex的本地化存储和跨窗口同步state插件 安装步骤 安装插件执行如下 npm i -S vuex-persistence vuex中使用 import myPlugin from 'vuex-persistence' export default new Vuex.Store({ plugins: [myPlugin()], strict: process.env.NODE_ENV !== 'production' })
Google Chrome谷歌浏览器安装Vue插件vue-devtools
weixin_55705383的博客
01-25 845
具体网址为随后在搜索按钮里搜索vue得到下图结果并点击。
vue扩展工具安装-vue-devtools，web网页开发
m0_60635001的博客
03-18 850
二、安装//切换到此目录下// 切换到主分支// 输入npm install 恢复// 安装过程出现错误可能是缓存问题，清除缓存就好了// 打包上线 生成dist目录// 出现以下成功DONE Compiled successfully in 13911ms 下午3:48:22修改配置shells>manifest.json> persistent 改为true。
Vue 学习(十一、 状态管理模式-Vuex 和 调试工具-Devtools)
Ares5k
02-17 2868
状态管理模式-Vuex 和 调试工具-Devtools
pdf.js pdf在线预览组件，支持IE,chrome
12-11
pdf.js pdf在线预览组件，支持IE,chrome多个浏览器，支持下载、打印功能。
vue-crx:使用Vue进行Chrome扩展开发的模板
05-14
使用Vue开发Chrome插件的模板 最近看了一些Chrome 插件开发的内容, 想要使用Vue的单文件来编写，但是没有现成的webpack打包方式，自己写了一个，第一次自己编写webpack的配置文件 目录结构 │ .babelrc.js │ .gitignore │ package-lock.json │ package.json │ webpack.config.js │ ├─src │ │ manifest.json │ │ │ ├─background │ │ background.js │ │ │ ├─content │ │ content.js │ │ │ ├─option │ │ App.vue │ │ option.html │ │ option.js │
Chrome 浏览器安装Vue2、Vue3插件方法 (详细有效)
qq_50497708的博客
12-11 1万+
以vue3插件为例：下载完解压。将下面的文件拖到扩展程序的页面。
浏览器安装vue调试插件（极简单）
weixin_40496191的博客
02-27 1万+
准备材料：谷歌浏览器、vue-devTool.crx 打开浏览器的右上角的设置–>更多工具–>扩展程序 打开开发者模式 然后重启浏览器，继续打开浏览器的右上角的设置–>更多工具–>扩展程序 将vue-devTool.crx工具拖入浏览器 随便打开一个vue项目，然后f12，可以看到vue已经 存在，并且可以通过vue插件，查看页面中的各种数据参数，说明成功了！！！ ...
Chrome（谷歌浏览器）安装Vue插件vue-devtools（图文详细教程）
热门推荐
小钻风的博客
03-12 4万+
使用Vue开发项目时，常会用到一款谷歌浏览器插件，vue-devtools 安装成功后，运行本地Vue项目，打开浏览器控制台就如下： 其中可以便捷的查看vueX的数据以及组件结构等，非常方便， 安装步骤如下： 1、首先给大家提供一个git地址，虽然官网也有地址(https://github.com/vuejs/vue-devtools.git)，我认为不太好用 给大家提供另一个git地址： https://gitee.com/zhang_banglong/vue-devtools.git 打开里面就如
安装Vue浏览器插件vue.Devtools（小白无压力教程）
SYQ15544423296的博客
08-01 2512
极简插件是一个优质Chrome插件扩展收录下载网站，收录热门好用的Chrome插件扩展，国内最方便的插件下载网站。（这里可以先点击小狮子，找到vue把他的图标定在浏览器上，接着打开你的项目地址，就可以看到了）3、接着打开你的默认浏览器，我的是Google,选中设置，打开扩展应用， 打开管理扩展程序，5、注意需要重启电脑，或者打开新的网页，把前端代码地址重新打开就会成功应用，4、接着打开开发者模式，添加刚刚的应用程序vue.js.Devtools。2、下载安装包后，解压文件夹， 会生成2个文件。
vue-dor:Vue-Cli
05-11
vue-book 项目简介: 属于一个电商网站,首页展示页面,列表页也是展示页面,但用到了下拉刷新,点击列表页中的每个小商品跳转到详情页,通过详情页 的添加功能,从而把数据添加到购物车,点击底部购物车,跳转到购物车页面.在购物车页面简单实现加减功能. 功能 主要采用vue-cli框架,结合vuex +vue router +es6 ,这个项目虽然很小,但是五脏俱全,很适合掌握了vue基础知识点之后,练习的小项目,新手学习起来比较简单. 项目预览地址 全局组件 懒加载:"vue-lazyload": "^1.2.4", 首页 1 轮播图用的插件 "vue-awesome-swiper": "^3.1.3",具体api 跟swiper的api一样 2 在banner 数据和推荐数据没用请求到的时候用了loading组件,纯css3编写 3 步骤2中的数据请求都是异步,为了判断两者是否都拿到数据
vue-notify:Notifaye是VueVuex插件，它添加了动态和静态通知功能
04-09
Vue通知 Vue生态系统的通知系统（Vue + Vuex） Vue-Notify为Vue提供了一个易于使用的插件，该插件利用了Vuex存储的可扩展性，并提供了创建和管理动态和静态通知队列的功能。 此插件的想法是与样式/组件无关。 可以选择使用内置的样式或组件，但是插件的核心功能是提供底层的方法/结构，并将样式/动画等留给开发人员。 特征 带有计时器的通知，可以针对每个队列或每个通知配置 可通过CSS或类设置样式 多个通知队列 动态或静态通知（用于吐司风格和钟形/柜台式通知） 高级队列选项，例如“绝望”，“提早删除”，“删除最旧的”，“删除最年轻的”，“扩展” 可通过Vuex存储（this。$ store）和您自己的方法或通过Vue-Notify插件及其提供的方法（this。$ notify）访问队列。 要求 所需的包 Vue 2+ 威克斯 安装 步骤1） npm install
vue-cli4.x创建企业级项目的方法步骤
11-20
安装脚手架（vue-cli） $ npm install @vue/cli -g //全局安装最新的脚手架 创建项目 $ vue create vue-demo 在创建项目的时候可以使用 $ vue ui 来进行创建，两种方式在创建的时候，直接选择上router和vuex，来进行项目创建 移动端Vant # 通过 npm 安装 $ npm i vant -S # 通过 yarn 安装 $ yarn add vant 我这里都是使用的按需引入，用了 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
Leadshop开源商城小程序源码 – 支持公众号H5
11-01
Leadshop是一款出色的开源电商系统，具备轻量级、高性能的特点，并提供持续更新和迭代服务。该系统采用前后端分离架构（uniapp+yii2.0），以实现最佳用户体验为目标。 前端部分采用了uni-app、ES6、Vue、Vuex、Vue Router、Vue CLI、Axios和Element UI等技术。而后端则选用了Yii2框架，结合Jwt、Mysql和Easy-SMS等工具。 值得一提的是，Leadshop还提供了可视化DIY拖拽装修功能，使用户能够自由定制界面，进一步提升了用户体验。 如果您对Leadshop感兴趣，可以通过体验公众号”LEADSHOP”来了解更多信息。 安装Leadshop非常简单，只需按照以下步骤操作： 首先确保您的环境中已安装Nginx伪静态、PHP7.4和Mysql5.7+，同时请删除禁用函数symink。 接着，在Nginx配置文件的location部分添加如下代码： location / { try_files $uri uri//index.phpuri//index.phpis_args$args; }
vue2-element:使用vue2 + Vuex + Router重建饿了么点餐系统和vue插件简析
03-11
饿了么点餐系统vue2.0，vuex，vue-router，axios，webpack，eslint，更好的滚动演示扫二维码在手机上查看效果更好项目截图要是能给作者买杯咖啡就更好了（谢谢^-^）安装步骤# install dependenciesnpm install# ...
vue echarts 柱状图 堆叠柱状图
最新发布
Z18834071903的博客
04-26 280
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 596
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 472
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
浏览器持久存储vuex状态
07-13
要在浏览器中持久存储 Vuex 状态，你可以使用插件 vuex-persistedstate。这个插件可以将 Vuex 的状态保存到本地存储中，然后在页面重新加载时自动恢复状态。 首先，你需要安装 vuex-persistedstate 插件。可以使用 npm 或 yarn 进行安装： ``` npm install vuex-persistedstate ``` 然后，在你的 Vuex store 文件中，导入插件并将其添加到 Vuex 的配置中。例如： ```javascript import createPersistedState from 'vuex-persistedstate'; import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ // ...其他配置项 plugins: [createPersistedState()], }); ``` 这样，在每次状态发生变化时，vuex-persistedstate 插件会自动将状态保存到本地存储中。当页面重新加载时，它会从本地存储中恢复状态并将其应用到 Vuex store。 注意，为了保护用户隐私和安全，建议仅在需要的情况下将敏感数据存储在本地存储中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值