未经允许，严禁转载，全文由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）带新手小白一起搭建第一个个人网站项目
原文地址：https://www.cnblogs.com/blackchaos/p/8723724.html