如何用VSCode实现一个vue.js项目?
时间:2022-07-26
本文章向大家介绍如何用VSCode实现一个vue.js项目?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1,新建项目
- 打开Visual studio code
- 打开一个你想要创建项目的文件夹
- 打开集成终端:
查看 –> 集成终端
或者直接按 ctrl+ `
如果没有安装vue-cli,在终端输入:
npm install -g vue-cli
全局安装vue-cli
然后新建项目
vue init webpack projectName
projectName换为你想要的名字。这里我建立的项目名为 ex1 然后一直按确认或输入y按确认,等待项目初始化,如下图
项目完成后,运行如下命令
此时,打开你最喜欢的浏览器,输入上图的地址 你应该能看到下图所显示的
2.完成项目 这时,你的项目的目录结构应该如下图所示
我们目前只关心目录src文件下的内容
接下来我们将vue.js官网的树形视图例子整合到我们的项目中。
1)在components目录下新建一个文件夹tree
2) 在新建的tree文件夹下新建一个文件tree.vue
3) tree.vue的代码如下:(注意每修改一个文件按 ctrl + s 保存)
<template>
<li>
<div
class="bold: isFolder"
v-on:click="toggle"
@dblclick="changeType">
{{ model.name }}
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<tree
class="item"
v-for="(child, index) in model.children"
:key="index"
:model="child">
</tree>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</template>
<style>
body {
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;
}
</style>
<script>
import Vue from 'vue'
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 = !this.open;
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
}
</script>
4) app.vue的代码如下:
<template>
<div id="app">
<ul>
<tree :model="data"></tree>
</ul>
</div>
</template>
<script>
import tree from "./components/tree/tree.vue"
export default {
name: 'App',
components:{
tree
},
data(){
return{
data:data
}
}
}
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
</script>
<style>
</style>
如果一切正常,运行结果应该如下图
全部展开后如下图:
如果不喜欢将全部代码放在一个文件里面,可以在tree目录下新建两个文件
tree.css tree.html
然后把tree.vue中包含在template里面的代码剪切进tree.html ,把style里面的但剪切进tree.css 。 然后tree.vue的template和style部分分别变为如下
<template src="./tree.html"></template>
<style src="./tree.css"></style>
- 和开发同学讨论的一个技术问题(r8笔记第73天)
- 剖析Oracle中oerr命令(r8笔记第70天)
- 甜品店切蛋糕问题(动态规划,Go语言实现)
- SQL—复制表结构及其数据
- python连接SQL报错:1366, "Incorrect string value: '\xF0\x9F\x98\x81'
- PCIE的简单配置(r8笔记第82天)
- 7个深度神经网络可视化工具,不可错过!
- Pwnhub之奇妙的巨蟒 Writeup
- WINDOW 安装mysql5.7数据库,并设置密码及相关报错
- go channel 通信通道
- SQl 语句(常见) 新建,删除,修改表,新增字段,修改默认值
- SQL处理表结构的基本方法整理(创建表,关联表,复制表)
- Go web之旅(路由篇)
- Golang插入排序
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法