一. 安裝node.js

打開node.js的官網(wǎng)下載：http://www.itdecent.cn/p/b35a67949f78
按照提示安裝即可，然后安裝淘寶鏡像，這樣下載速度會快一點

npm install -g cnpm --registry=https://registry.npm.taobao.org

二. 安裝vue

進入工作目錄，執(zhí)行

cnpm install vue -g

然后安裝vue-cli腳手架

cnpm install vue-cli -g

如此準備工作就完成了。

三. 創(chuàng)建新項目

目前博主準備搭建一個偽音樂搜索網(wǎng)站，執(zhí)行：

vue init webpack MusicWeb

回車之后需要填寫一些配置信息，可根據(jù)自己需要填寫

創(chuàng)建項目

啟動

進入本地服務(wù)器

四. 輸出HelloWorld

按照傳統(tǒng)，使用之前我們先嘗試輸出HelloWorld語句
如圖，創(chuàng)建vue項目自動生成了各種文件：

• build：最終發(fā)布代碼的位置，初學不用改動。
• config：配置文件，如端口號，初學不用改動。
• node_modules：node.js執(zhí)行npm install后安裝的各種第三方庫，一般也不需要改動。
• static：靜態(tài)資源文件夾，存放圖片等。
• 其他：博主我也是初學，不清楚是啥，不要亂改動就行。

最后就是我們的開發(fā)目錄----src

src目錄下有：

• assets：放置一些圖片，如圖的logo.png就是vue第一次啟動的綠色logo
• components：存放了組件，可以不用，但為了降低代碼的耦合度和功能的獨立性，最好把某些單獨的功能封裝在模板中。
• router：里面有一個index.js文件，是項目路由。
• App.vue：主文件，項目入口，可以把組件寫到里面而不用components目錄。
• main.js：項目核心文件。
  了解各種文件的作用之后我們開始嘗試輸出HelloWorld語句。
  先打開 App.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

上面是App.vue中的源碼，仔細觀察發(fā)現(xiàn)，其實vue框架的結(jié)構(gòu)遵循如下的模板：

<template> 
    HTML代碼
</template>

<script>
export default {
    js代碼
}
</script>

<style>
    css樣式
</style>

可以看到template模板中寫了一個div標簽，下面有img標簽和一個<router-view/>，img標簽顯示的login，那么<router-view/>顯然就是顯示其他的文字了，接下來打開route/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

上面是index.js的源碼，里面沒有HTML代碼，而是引用一個“HelloWorld”模板，接下來打開components/HelloWorld.vue，里面代碼比較長，但都是我們比較熟悉的HTML代碼，看來Vue的啟動畫面就編寫在這里了

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    略......
  <div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
  略......
</style>

我們改動msg的信息：

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld'
    }
  }
}
</script>

”