未經允許，嚴禁轉載，全文由blackchaos提供。

在安裝好了前面大部分需要的插件，我們開始進行第一個個人項目。結合vue+vuex+vue-cli+vue-router+webpack使用。

1.我們先寫用vue-router來單頁面切換路由。先進入src文件夾。在components文件夾下創建五個文件分別是Home.vue,About.vue,Contact.vue，MyHeader.vue，Myfooter.vue.

將router裏的index.js打開。修改代碼為：

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘
import About from ‘@/components/About‘
import Contact from ‘@/components/Contact‘
Vue.use(Router)

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

註意最後一行要多敲一個回車，滿足ESLint規則。不能用tab鍵來規範代碼，取而代之的是兩個空格。

2.文件由幾部分組成，其中最頂層是src下的App.vue文件。在裏面添加MyHeader,Myfooter。

2.1先修改App.vue

<template>
  <div id="app">
    <MyHeader></MyHeader>
    <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </transition>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyHeader from ‘./components/MyHeader‘
import MyFooter from ‘./components/MyFooter‘
export default {
  name: ‘App‘,
  components: {
    MyHeader,
    MyFooter
  }
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.fade-enter-active, .fade-leave-active{
  transition: all .3s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
</style>

註意最後一行要多敲一個回車，script和style全部頂格寫。寫script裏屬性：後面跟一個空格。最後加一個淡入淡出效果。

2.2然後再寫MyHeader.vue

<template>
  <div id="header" class="wrap">
    <div class="header">
      <h1 class="logo">
        <router-link to="/">
          <img src="../assets/logo.png"  width="100">
        </router-link>
      </h1>
    </div>
    <div class="top-nav">
      <div id="navList" class="navlist-wrap">
        <div class="navlist clearfix">
          <span class="nav-btn">
            <router-link to="/">首頁</router-link>
          </span>
          <span class="nav-btn">
            <router-link to="/about">關於</router-link>
          </span>
          <span class="nav-btn">
            <router-link to="/contact">聯系方式</router-link>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default({
  name: ‘header‘,
  data: function () {
    return {
      ‘nav-btn‘: ‘nav-btn‘
    }
  }
})
</script>
<style scoped>
#header{background-color: red}
.header{width:1105px;margin:0 auto;height:111px;padding:4px 0 18px;position:relative;*z-index:1}
.header .logo{width:300px;height:100px;margin-left: 10px}
.top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
.top-nav .navlist{position:absolute;right:130PX;top:-40PX}
.top-nav .navlist .nav-btn
{
  float:left;
  margin-left:60px;
  color:#666;
  vertical-align: middle;
  text-decoration:none;
  font-size: large;
}
</style>

註意最後一行要多敲一個回車，router-link to就是切換路由了。

2.3最後是MyFooter.vue

<template>
  <div id="footer">
    <span>Copyright ? <a href="#">blackchaos</a>. All rights reserved</span>
  </div>
</template>
<script>
export default({
  name: ‘footer‘
})
</script>
<style scoped>
#footer{height:50px;position:fixed;bottom:0px;left: 0px;background-color: #eeeeee;width: 100%;padding-top: 10px;}
</style>

註意最後一行要多敲一個回車。　　

3.開始三個切換的文件和Store文件：

3.1新建store文件並新建一個store.js文件

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)

export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    add: state => state.count++,
    dec: state => state.count--
  }
})

先簡單存一個數據和兩個方法。最後一行敲個回車。

3.2在main.js文件中引入store

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import store from ‘./store/store‘
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
})

最後一行敲個回車。　　

3.3首先是Home.vue

<template>
  <div id="home">
    <div class="page-header">
      <h2>首頁</h2>
    </div>
    <div class="panel-body">
      <p>{{ count }}</p>
      <p>
        <button @click="add">+</button>
        <button @click="dec">-</button>
      </p>
    </div>
  </div>
</template>
<script>
export default({
  name: ‘home‘,
  data: function () {
    return {
      localCount: 1
    }
  },
  methods: {
    add () {
      this.$store.commit(‘add‘)
    },
    dec () {
      this.$store.commit(‘dec‘)
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
})
</script>
<style scoped>
#home{width: 100%;margin: 0 auto;background-color: khaki;height: 400px}
</style>

最後一行敲回車，方法寫在methods裏，this.$store.commit調用.

3.4然後是About.vue和Contact.vue

<template>
  <div id="contact">
    <h2>聯系方式</h2>
  </div>
</template>
<script>
export default({
  name:‘contact‘
})
</script>
<style scoped>
#contact{width: 100%;height: 400px;background-color: lightskyblue;}
</style>

<template>
  <div id="about">
    <h2>關於</h2>
  </div>
</template>
<script>
export default({
  name:‘about‘
})
</script>
<style scoped>
#about{width: 100%;height: 400px;background-color: antiquewhite;}
</style>

　同樣最後一行多一個回車。

照方抓藥，給還沒完成的同學一個demo

https://github.com/xuchaoyu2000/vueblog

從零開始系列之vue全家桶（4）帶新手小白一起搭建第一個個人網站項目