vscode中打开vue项目是html,用vscode实现vue.js项目的一个完整过程

1,新建项目

打开Visual studio code

打开一个你想要创建项目的文件夹

打开集成终端&＃xff1a;查看 –> 集成终端 或者直接按 ctrl&＃43;&＃96;

如果没有安装vue-cli&＃xff0c;在终端输入&＃xff1a;

npm install -g vue-cli

全局安装vue-cli

然后新建项目

vue init webpack projectName

projectName换为你想要的名字。这里我建立的项目名为 ex1

然后一直按确认或输入y按确认&＃xff0c;等待项目初始化&＃xff0c;如下图

项目完成后&＃xff0c;运行如下命令

此时&＃xff0c;打开你最喜欢的浏览器&＃xff0c;输入上图的地址

你应该能看到下图所显示的

2.完成项目

这时&＃xff0c;你的项目的目录结构应该如下图所示

我们目前只关心目录src文件下的内容

接下来我们将vue.js官网的树形视图例子整合到我们的项目中。

1)在components目录下新建一个文件夹tree

2) 在新建的tree文件夹下新建一个文件tree.vue

3) tree.vue的代码如下&＃xff1a;(注意每修改一个文件按 ctrl &＃43; s 保存)

v-for&＃61;"(child, index) in model.children"

:key&＃61;"index"

:model&＃61;"child">

font-family:Menlo, Consolas, monospace;

color:#444;

}

.item {

cursor:pointer;

}

.bold {

font-weight:bold;

}

ul {

padding-left:1em;

line-height:1.5em;

list-style-type:dot;

}

export default {

name: "tree",

props: {

model: Object

},

data: function () {

return {

open: false

}

},

computed: {

isFolder: function () {

return this.model.children &&

this.model.children.length

}

},

methods: {

toggle: function() {

if (this.isFolder) {

this.open &＃61; !this.open;

}

},

changeType: function () {

if (!this.isFolder) {

Vue.set(this.model, &＃39;children&＃39;, [])

this.addChild()

this.open &＃61; true

}

},

addChild: function () {

this.model.children.push({

name: &＃39;new stuff&＃39;

})

}

}

}

4) app.vue的代码如下&＃xff1a;

export default {

name: &＃39;App&＃39;,

components:{

tree

},

data(){

return{

data:data

}

}

}

var data &＃61; {

name: &＃39;My Tree&＃39;,

children: [

{ name: &＃39;hello&＃39; },

{ name: &＃39;wat&＃39; },

{

name: &＃39;child folder&＃39;,

children: [

{

name: &＃39;child folder&＃39;,

children: [

{ name: &＃39;hello&＃39; },

{ name: &＃39;wat&＃39; }

]

},

{ name: &＃39;hello&＃39; },

{ name: &＃39;wat&＃39; },

{

name: &＃39;child folder&＃39;,

children: [

{ name: &＃39;hello&＃39; },

{ name: &＃39;wat&＃39; }

]

}

]

}

]

}

如果一切正常&＃xff0c;运行结果应该如下图

全部展开后如下图:

如果不喜欢将全部代码放在一个文件里面&＃xff0c;可以在tree目录下新建两个文件

tree.css tree.html

然后把tree.vue中包含在template里面的代码剪切进tree.html

&＃xff0c;把style里面的但剪切进tree.css 。

然后tree.vue的template和style部分分别变为如下