vscode打开vue项目_如何用VSCode实现一个vue.js项目？ - Go语言中文社区

vscode打开vue项目_如何用VSCode实现一个vue.js项目？

1,新建项目

  • 打开Visual studio code
  • 打开一个你想要创建项目的文件夹
  • 打开集成终端：查看 –> 集成终端 或者直接按 ctrl+ `

如果没有安装vue-cli，在终端输入：

npm install -g vue-cli
全局安装vue-cli

然后新建项目

vue init webpack projectName

projectName换为你想要的名字。这里我建立的项目名为 ex1
然后一直按确认或输入y按确认，等待项目初始化，如下图

a7ccafe95b78459b994354a7b8eb2892.png项目完成后，运行如下命令d01dbcee198267e02a58312f7cde7686.png77ffdd1a8e3b9fa4348ec5edc5d32b3a.png
此时，打开你最喜欢的浏览器，输入上图的地址
你应该能看到下图所显示的cc8df7f19442047b94c5f8738a8223a7.png

2.完成项目
这时，你的项目的目录结构应该如下图所示80336bd59c94129eb3eda2aab23cea1e.png
我们目前只关心目录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">





如果一切正常，运行结果应该如下图cc7f6e58c49aebdfab33b0f359dc8dec.png
全部展开后如下图:06b881a9955ea103098142bedcbfad34.png

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

tree.css tree.html

然后把tree.vue中包含在template里面的代码剪切进tree.html
，把style里面的但剪切进tree.css 。
然后tree.vue的template和style部分分别变为如下

"./tree.html">
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_33518565/article/details/113323199
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2021-05-21 21:03:36
  • 阅读 ( 657 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！