vue怎么實(shí)現(xiàn)單頁(yè)面應(yīng)用

本篇內(nèi)容介紹了“vue怎么實(shí)現(xiàn)單頁(yè)面應(yīng)用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一：npm的安裝

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

測(cè)試node的版本號(hào)：node -v

測(cè)試npm的版本號(hào)：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、測(cè)試vue的安裝：vue

三：vue.js項(xiàng)目的建立

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

接下來(lái)會(huì)依次出現(xiàn)以下的操作

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

vue項(xiàng)目的啟動(dòng)步驟：（1）cd pt （2）npm install （3）npm run dev

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

四：創(chuàng)建一個(gè)vue實(shí)例

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

App.js：初始化組件

有四個(gè)模塊：首頁(yè)、公司介紹、招賢納士、易點(diǎn)咨詢。

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'
// 引入項(xiàng)目的四個(gè)模塊組件
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 
}]
// 實(shí)例化路由
var vueRouter = new Router({
 routes
})
// 創(chuàng)建和掛載根實(shí)例
new Vue({
 el: '#app',
 router: vueRouter,
 template: '<App></App>',
 components: { App }
})

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

<template>
 <div id="app">
  <div class="nav-top">
    <!-- 引入公用的頭部 header組件 -->
     <v-header></v-header>
  </div>
  <div class="banner">
  </div>
  <div class="contianer">
   <!-- 路由中的幾個(gè)組件在這里被渲染，默認(rèn)被渲染的為第一個(gè)組件，也就是home組件 -->
   <router-view></router-view>
  </div>
 </div>
</template>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
.nav-top {
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -600px;
 z-index: 99;
}
.banner{
 width: 100%;
 height: 370px;
 overflow: hidden;
 background: url("components/banner.jpg");
 background-repeat: no-repeat;
}
</style>
<script>
//引入header組件
import header from './components/header.vue'
//輸出header組件
export default{
 components: {
  'v-header': header
 }
}
</script>

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

<template>
 <div class="header">
  <div class="header-wrapper">
   <div class="logo">
    <a href="/home" rel="external nofollow" ><img src="../assets/ysh.png" alt width="210"></a>
   </div>
   <ul class="nav">
    <li><router-link to="/home">首頁(yè)</router-link></li>
    <li><router-link to="/introduce">公司介紹</router-link></li>
    <li><router-link to="/employment">招賢納士</router-link></li>
    <li><router-link to="/consult">易點(diǎn)咨詢</router-link></li>
   </ul> 
  </div> 
 </div>
</template>
<style>
.header{
 width:1200px;
 height:100px;
 margin:0 auto;
 color:#fff;
}
.header-wrapper{
 width:1200px;
 height:100px;
}
.logo{
 width:210px;
 height:100px;
 float:left;
}
.nav{
 width:700px;
 height:100px;
 font-size:15px;
 float:right;
}
.nav li{
 float:left;
 margin-right:30px;
 height:34px;
 line-height:34px;
 overflow:hidden;
 margin-top:34px;
}
.nav li:last-child{
 margin-right:0;
}
.nav a{
 display:inline-block;
 padding:0 13px;
 color:#fff;
 border-radius:15px;
}
.nav a.router-link-active{
 background:#c10514;
}
</style>

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

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

<template>
<div class="intro">
公司介紹
</div>
<div>
zx
</div>
</template>
<style>
.intro{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

像這種情況會(huì)報(bào)錯(cuò)。

正確的為：

<template>
  <div class="intro">
    公司介紹
  </div>
</template>
<style>
.intro{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

“vue怎么實(shí)現(xiàn)單頁(yè)面應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！