一. 安裝node.js
打開node.js的官網(wǎng)下載：http://www.reibang.com/p/b35a67949f78
按照提示安裝即可苍糠，然后安裝淘寶鏡像挣输，這樣下載速度會快一點(diǎn)
npm install -g cnpm --registry=https://registry.npm.taobao.org
二. 安裝vue
進(jìn)入工作目錄侮叮，執(zhí)行
cnpm install vue -g
然后安裝vue-cli腳手架
cnpm install vue-cli -g
如此準(zhǔn)備工作就完成了较解。
三. 創(chuàng)建新項(xiàng)目
目前博主準(zhǔn)備搭建一個偽音樂搜索網(wǎng)站，執(zhí)行：
vue init webpack MusicWeb
回車之后需要填寫一些配置信息寸痢，可根據(jù)自己需要填寫
創(chuàng)建項(xiàng)目
等待執(zhí)行結(jié)束呀洲，根據(jù)提示啟動：
啟動
訪問本地的8080端口：http://localhost:8080/#/
進(jìn)入本地服務(wù)器
出現(xiàn)如圖界面便啟動成功了
四. 輸出HelloWorld
按照傳統(tǒng)，使用之前我們先嘗試輸出HelloWorld語句
如圖，創(chuàng)建vue項(xiàng)目自動生成了各種文件：
- build：最終發(fā)布代碼的位置道逗，初學(xué)不用改動兵罢。
- config：配置文件，如端口號滓窍，初學(xué)不用改動卖词。
- node_modules：node.js執(zhí)行npm install后安裝的各種第三方庫，一般也不需要改動贰您。
- static：靜態(tài)資源文件夾，存放圖片等拢操。
- 其他：博主我也是初學(xué)锦亦，不清楚是啥，不要亂改動就行令境。
最后就是我們的開發(fā)目錄----src
src目錄下有：
- assets：放置一些圖片杠园，如圖的logo.png就是vue第一次啟動的綠色logo
- components：存放了組件，可以不用舔庶，但為了降低代碼的耦合度和功能的獨(dú)立性抛蚁，最好把某些單獨(dú)的功能封裝在模板中。
- router：里面有一個index.js文件惕橙，是項(xiàng)目路由瞧甩。
- App.vue：主文件，項(xiàng)目入口弥鹦，可以把組件寫到里面而不用components目錄肚逸。
- main.js：項(xiàng)目核心文件。
了解各種文件的作用之后我們開始嘗試輸出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中的源碼朦促，仔細(xì)觀察發(fā)現(xiàn)，其實(shí)vue框架的結(jié)構(gòu)遵循如下的模板：
<template>
HTML代碼
</template>
<script>
export default {
js代碼
}
</script>
<style>
css樣式
</style>
可以看到template模板中寫了一個div標(biāo)簽栓始，下面有img標(biāo)簽和一個<router-view/>务冕，img標(biāo)簽顯示的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>
”
