1,新建項目

• 打開Visual studio code
• 打開一個你想要創建項目的文件夾
• 打開集成終端：查看 –> 集成終端 或者直接按 ctrl+\ `

如果沒有安裝vue-cli，在終端輸入：

npm install \-g vue-cli
全局安裝vue-cli

然后新建項目

vue?init?webpack?projectName

projectName換為你想要的名字。這里我建立的項目名為 ex1
然后一直按確認或輸入y按確認，等待項目初始化，如下圖

項目完成后，運行如下命令
此時，打開你最喜歡的瀏覽器，輸入上圖的地址
你應該能看到下圖所顯示的

2.完成項目
這時，你的項目的目錄結構應該如下圖所示
我們目前只關心目錄src文件下的內容

接下來我們將vue.js官網的樹形視圖例子整合到我們的項目中。

1)在components目錄下新建一個文件夾tree

2)?在新建的tree文件夾下新建一個文件tree.vue

3) tree.vue的代碼如下：(注意每修改一個文件按 ctrl + s 保存)
"bold:?isFolder"
??????v-on:click="toggle"
??????@dblclick="changeType">
??????{{?model.name?}}"isFolder">[{{?open???'-'?:?'+'?}}]

• "open"?v-if=

"isFolder">????????class="item"
????????v-for="(child,?index)?in?model.children"
????????:key="index"
????????:model="child">"add"?@click="addChild">+

4) app.vue的代碼如下：

"app">"data">

如果一切正常，運行結果應該如下圖
全部展開后如下圖:

如果不喜歡將全部代碼放在一個文件里面，可以在tree目錄下新建兩個文件

tree.css?tree.html

然后把tree.vue中包含在template里面的代碼剪切進tree.html
，把style里面的但剪切進tree.css 。
然后tree.vue的template和style部分分別變為如下

"./tree.html">

總結

以上是生活随笔為你收集整理的vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。