小編給大家分享一下vue構(gòu)建單頁面應(yīng)用的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為惠城企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，惠城網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

具體如下

步驟：

1.使用vue-cli創(chuàng)建項(xiàng)目
2.使用vue-router實(shí)現(xiàn)單頁路由
3.用vuex管理我們的數(shù)據(jù)流
4.使用vue-resource請求我們的node服務(wù)端
5.使用.vue文件進(jìn)行組件化的開發(fā)

一、目錄結(jié)構(gòu)：

二、搭建項(xiàng)目

先安裝 vue-cli： sudo npm install -g vue-cli

使用vue-cli構(gòu)建初始化項(xiàng)目：vue init webpack project（創(chuàng)建webpack項(xiàng)目并下載依賴）

輸入命令進(jìn)入項(xiàng)目： cd my-project 

安裝依賴： npm install

npm i

開始運(yùn)行： npm run dev (或輸入http://localhost:8080)，在熱加載中運(yùn)行我們的應(yīng)用

它會去找到package.json的scripts對象，執(zhí)行node bulid/dev-server.js

在這文件里，配置了Webpack，會讓它去編譯項(xiàng)目文件，并且運(yùn)行服務(wù)器。

這些都準(zhǔn)備好后，我們需要為我們的路由、XHR請求、數(shù)據(jù)管理下載三個(gè)庫，我們可以從vue的官網(wǎng)中找到他們。另外我們使用bootstrap作為我的UI庫：

 npm i vue-resource vue-router vuex bootstrap --save

三、項(xiàng)目開始

初始化項(xiàng)目（main.js）

查看我們的應(yīng)用文件，我們可以在src目錄下找到App.vue和main.js文件中，我們引入Vue和App，且創(chuàng)建了一個(gè)vue的實(shí)例（因?yàn)樵趓outer這行引入了App組件router.start(App,'#app')）

import Vue from 'vue'
import App from './App'
import router from './router'

import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 template: '',
 components: { App }
})

index.html