vue.js單頁面應用實例

一：npm的安裝

　　因爲新版的node.js已經集成了npm的環境，因此只需去官網下載node.js並安裝，安裝完成後使用cmd檢測是否成功。

　　測試node的版本號：node -v

　　測試npm的版本號：npm -v

     以上提示表明安裝成功

二：vue.js環境搭建

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

二、安裝vue.js環境:：cnpm install -g vue-cli

三、測試vue的安裝：vue

三：vue.js項目的創建

     新建一個名爲pt的vue項目：在F盤建立一個名爲pt的文件夾：執行：cd f:\ vue init webpack pt

接下來會依次出現如下的操做

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

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

最終的目錄結構：

 

四：建立一個vue實例

    main.js：應用入口文件

    App.js：初始化組件

    例：咱們要實現以下效果的一個網站

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

項目的思惟導向圖：

 

 

一、配置入口文件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
})
// 建立和掛載根實例
new Vue({
  el: '#app',
  router: vueRouter,
  template: '<App></App>',
  components: { App }
})

 

二、初始化組件App.vue開發

<template>
  <div id="app">
    <div class="nav-top">
        <!-- 引入公用的頭部 header組件 -->
          <v-header></v-header>
    </div>
    <div class="banner">
    </div>
    <div class="contianer">
      <!-- 路由中的幾個組件在這裏被渲染，默認被渲染的爲第一個組件，也就是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>

 

三、建立公用頭部組件

<template>
  <div class="header">
    <div class="header-wrapper">
      <div class="logo">
        <a href="/home"><img src="../assets/ysh.png" alt width="210"></a>
      </div>
      <ul class="nav">
        <li><router-link to="/home">首頁</router-link></li>
        <li><router-link to="/introduce">公司介紹</router-link></li>
        <li><router-link to="/employment">招賢納士</router-link></li>
        <li><router-link to="/consult">易點諮詢</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>

 

四、建立其餘組件

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

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

像這種狀況會報錯。

正確的爲：

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