要安裝 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