vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目?
生活随笔
收集整理的這篇文章主要介紹了
vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目?
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1,新建項目
- 打開Visual studio code
- 打開一個你想要創建項目的文件夾
- 打開集成終端:查看 –> 集成終端 或者直接按 ctrl+\ `
如果沒有安裝vue-cli,在終端輸入:
npm install \-g vue-cli
全局安裝vue-cli
然后新建項目
vue?init?webpack?projectNameprojectName換為你想要的名字。這里我建立的項目名為 ex1
然后一直按確認或輸入y按確認,等待項目初始化,如下圖
項目完成后,運行如下命令
此時,打開你最喜歡的瀏覽器,輸入上圖的地址
你應該能看到下圖所顯示的
2.完成項目
這時,你的項目的目錄結構應該如下圖所示
我們目前只關心目錄src文件下的內容
接下來我們將vue.js官網的樹形視圖例子整合到我們的項目中。
1)在components目錄下新建一個文件夾tree2)?在新建的tree文件夾下新建一個文件tree.vue
3) tree.vue的代碼如下:(注意每修改一個文件按 ctrl + s 保存)
"bold:?isFolder"
??????v-on:click="toggle"
??????@dblclick="changeType">
??????{{?model.name?}}"isFolder">[{{?open???'-'?:?'+'?}}]
- "open"?v-if=
????????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部分分別變為如下
總結
以上是生活随笔為你收集整理的vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 在苹果笔记本如何使用python_mac
- 下一篇: android 获取加速度传感器值,An