js如何實作側邊廣告_如何用VSCode實作一個vue.js項目？

1,建立項目

• 打開Visual studio code
• 打開一個你想要建立項目的檔案夾
• 打開內建終端：

  檢視 –> 內建終端

  或者直接按 ctrl+\ `

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

npm install \-g vue-cli

全局安裝vue-cli

然後建立項目

projectName換為你想要的名字。這裡我建立的項目名為 ex1

然後一直按确認或輸入y按确認，等待項目初始化，如下圖

項目完成後，運作如下指令

此時，打開你最喜歡的浏覽器，輸入上圖的位址

你應該能看到下圖所顯示的

2.完成項目

這時，你的項目的目錄結構應該如下圖所示

我們目前隻關心目錄src檔案下的内容

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

• "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.vue中包含在template裡面的代碼剪切進tree.html

，把style裡面的但剪切進tree.css 。

然後tree.vue的template和style部分分别變為如下