未经允许，严禁转载，全文由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" alt="" 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