這篇文章主要介紹“vue.js怎么實現(xiàn)單頁面應(yīng)用”，在日常操作中，相信很多人在vue.js怎么實現(xiàn)單頁面應(yīng)用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue.js怎么實現(xiàn)單頁面應(yīng)用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、合江網(wǎng)站維護、網(wǎng)站推廣。

一：npm的安裝

由于新版的node.js已經(jīng)集成了npm的環(huán)境，所以只需去官網(wǎng)下載node.js并安裝，安裝完成后使用cmd檢測是否成功。

測試node的版本號：node -v

測試npm的版本號：npm -v

 以上提示代表安裝成功

二：vue.js環(huán)境搭建

1、首先安裝淘寶的npm鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安裝vue.js環(huán)境:：cnpm install -g vue-cli

3、測試vue的安裝：vue

三：vue.js項目的建立

新建一個名為pt的vue項目：在F盤創(chuàng)建一個名為pt的文件夾：執(zhí)行：cd f:\ vue init webpack pt

接下來會依次出現(xiàn)以下的操作

注：Use ESlint to lint your code-是否使用ESlint（最后選否，否則不熟悉這種嚴(yán)格的方式，會被坑慘，沒空格會報錯，多空格也會報錯）

vue項目的啟動步驟：（1）cd pt （2）npm install （3）npm run dev

最終的目錄結(jié)構(gòu)：

四：創(chuàng)建一個vue實例

main.js：應(yīng)用入口文件

App.js：初始化組件

例：我們要實現(xiàn)如下效果的一個網(wǎng)站

有四個模塊：首頁、公司介紹、招賢納士、易點咨詢。

1、配置入口文件main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入router路由
import Router from 'vue-router'
// 引入項目的四個模塊組件
import introduce from './components/introduce'
import home from './components/home'
import employment from './components/employment'
import consult from './components/consult'
// 使用router
Vue.use(Router)
// 定義路由
var routes = [{
 path: '/home',
 component: home
}, {
 path: '/introduce',
 component: introduce
}, {
 path: '/employment',
 component: employment
}, {
 path: '/consult',
 component: consult 
}]
// 實例化路由
var vueRouter = new Router({
 routes
})
// 創(chuàng)建和掛載根實例
new Vue({
 el: '#app',
 router: vueRouter,
 template: '',
 components: { App }
})

2、初始化組件App.vue開發(fā)

3、創(chuàng)建公用頭部組件

4、創(chuàng)建其他組件

需注意模板文件都只能有一個根元素。

像這種情況會報錯。

正確的為：

到此，關(guān)于“vue.js怎么實現(xiàn)單頁面應(yīng)用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
本文標(biāo)題：vue.js怎么實現(xiàn)單頁面應(yīng)用
標(biāo)題來源：http://weahome.cn/article/geoddg.html