遂宁市建设银行网站,免费做动态图片的网站,专注律师微信网站建设,山东公司网站开发1,新建项目打开Visual studio code打开一个你想要创建项目的文件夹打开集成终端#xff1a;查看 – 集成终端 或者直接按 ctrl\ 如果没有安装vue-cli#xff0c;在终端输入#xff1a;npm install \-g vue-cli全局安装vue-cli然后新建项目vue init webpack projectNamep… 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.vue3) tree.vue的代码如下(注意每修改一个文件按 ctrl s 保存)bold: isFolder v-on:clicktoggle dblclickchangeType {{ model.name }}isFolder[{{ open ? - : }}]open v-ifisFolder classitem v-for(child, index) in model.children :keyindex :modelchildadd clickaddChild4) app.vue的代码如下appdata如果一切正常运行结果应该如下图全部展开后如下图:如果不喜欢将全部代码放在一个文件里面可以在tree目录下新建两个文件tree.css tree.html然后把tree.vue中包含在template里面的代码剪切进tree.html把style里面的但剪切进tree.css 。然后tree.vue的template和style部分分别变为如下./tree.html
