vue構(gòu)建單頁(yè)面應(yīng)用的示例分析

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

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

具體如下

步驟：

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

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

vue構(gòu)建單頁(yè)面應(yīng)用的示例分析

二、搭建項(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)目并下載依賴(lài)）

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

安裝依賴(lài)： npm install

npm i

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

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

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

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

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

三、項(xiàng)目開(kāi)始

初始化項(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: '<App/>',
 components: { App }
})

index.html

<body>
  <div id="app"></div>
 </body>

App.vue

<template>
 <div id="app">
  <div class="row">
   <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header">
     <h3>Router Basic - 01</h3>
    </div>
   </div>
  </div>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
     <ul class="list-group">
      <!--使用指令v-link進(jìn)行導(dǎo)航-->
      <a class="list-group-item"><router-link to="/home">Home</router-link></a>
      <a class="list-group-item"><router-link to="/about">About</router-link></a>
      <a class="list-group-item"><router-link to="/contact">Contact</router-link></a>
     </ul>
    </div>
    <div class="col-xs-6">
     <div class="panel">
      <div class="panel-body">
       <!--用于渲染匹配的組件-->
       <router-view></router-view>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>

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

src/components/Home.vue 作為我們的首頁(yè)

<template id="contact">
 <div>
  <h2>Home</h2>
  <p>This is the tutorial about Contact.</p>
 </div>
</template>

<script>
export default {
 '/hello': 'Hello'
}
</script>

src/components/About.vue

<template id="about">
  <div>
    <h2>About</h2>
    <p>This is the tutorial about vue-router.</p>
  </div>
</template>
<script>
export default {
 '/about': 'About'
}
</script>

src/components/Contact.vue

<template id="contact">
  <div>
    <h2>Contact</h2>
    <p>This is the tutorial about Contact.</p>
  </div>
</template>

export default {
 '/contact': 'contact'
}
</script>

src/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Hello',
   component: Hello
  },
  {
   path: '/home',
   name: 'Home',
   component: Home
  },
  {
   path: '/about',
   name: 'About',
   component: About
  },
  {
   path: '/contact',
   name: '/Contact',
   component: Contact
  }
 ]
})

spa地址：https://github.com/cinderellastory415/vue-demo/tree/master/spa

詳細(xì)操作：

git clone https://github.com/cinderellastory415/vue-demo/tree/master/spa

npm install

npm run dev

輸入以上命令，即可查看效果。

看完了這篇文章，相信你對(duì)“vue構(gòu)建單頁(yè)面應(yīng)用的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：vue構(gòu)建單頁(yè)面應(yīng)用的示例分析
當(dāng)前URL：http://muchs.cn/article2/ihepoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、Google、自適應(yīng)網(wǎng)站、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容