用vscode實現vue.js項目的一個完整過程

1,新建項目 打開Visual studio code 打開一個你想要建立項目的文件夾 打開集成終端：查看 –> 集成終端 或者直接按 ctrl+`

若是沒有安裝vue-cli，在終端輸入：

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

而後新建項目

vue init webpack projectName 1 projectName換爲你想要的名字。這裏我創建的項目名爲 ex1 而後一直按確認或輸入y按確認，等待項目初始化，以下圖

項目完成後，運行以下命令

此時，打開你最喜歡的瀏覽器，輸入上圖的地址 你應該能看到下圖所顯示的

2.完成項目 這時，你的項目的目錄結構應該以下圖所示

咱們目前只關心目錄src文件下的內容

接下來咱們將vue.js官網的樹形視圖例子整合到咱們的項目中。

1）在components目錄下新建一個文件夾tree

2. 在新建的tree文件夾下新建一個文件tree.vue

3. tree.vue的代碼以下：（注意每修改一個文件按 ctrl + s 保存） 1 2 3 4 5

<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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 若是一切正常，運行結果應該以下圖

所有展開後以下圖:

若是不喜歡將所有代碼放在一個文件裏面，能夠在tree目錄下新建兩個文件

tree.css tree.html 1 而後把tree.vue中包含在template裏面的代碼剪切進tree.html ，把style裏面的但剪切進tree.css 。 而後tree.vue的template和style部分分別變爲以下

<template src="./tree.html"></template>

<style src="./tree.css"></style>