Chrome安裝Vue.js devtool F12無效


 

 

要安裝 vue-devtools-4.1.4_0

鏈接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取碼: 4btc

vue-devtools-4.1.4_0復制一份,然后修改后綴變成vue-devtools-4.1.4_0.rar

解壓vue-devtools-4.1.4_0.rar 

打開manifest.json 

把"persistent": false 修改 "persistent": true 

打開chome 的擴展程序

把vue-devtools-4.1.4_0 文件夾拉到擴展程序里面

安裝完成后重新打開一個瀏覽器窗口,瀏覽器的url地址的網頁里面含有vue,按F12就可以展示的了

比如在chome 里面安裝  JetBrains IDE Support ,這個可以連接idea

*****要用vue功能的話,要先在電腦上安裝nodejs

安裝完成nodejs后cmd檢查,可以用以下的命令

node -v        node版本
npm -v          查看npm版本(插件管理工具)

因為外網下載慢,要把下載指向淘寶鏡像(類似於阿里雲的maven)

 npm config set registry https://registry.npm.taobao.org         配置淘寶鏡像

npm install nrm -g 下載npm插件
nrm ls 查看所用的鏡像

 

后在idea 里面創建一個Static Web項目

在Terminal里面敲打命令

npm init -y 在idea 里面安裝初始化
npm install vue -save 本地安裝(也可用后面的命令                 npm install vue -global  全局安裝vue)

重新idea 即可

 hello.html代碼如下

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">  <button @click="num++"></button>
    <h1>{{name}} 非常帥  <br/>
        {{num}} 位女神為其着迷
    </h1>

    調試需要安裝在chome安裝JetBrains IDE Support
    調試node,chome安裝,vue-devtools-4.1.4_0

</div>
<script src="node_modules/vue/dist/vue.js">
</script>
<script>
    const  app=new Vue({
       el:"#app",   //element,vue作用的標簽
        data:{
           name:"胡歌",
            num:1
        }
    });
</script>
</body>
</html>

在chome瀏覽http://localhost:63342/項目名稱/hello.html

如  http://localhost:63342/vue-demo/hello.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM