从零开始系列之vue全家桶（4）带新手小白一起搭建第一个个人网站项目

从零开始系列之vue全家桶（4）带新手小白一起搭建第一个个人网站项目"/>

从零开始系列之vue全家桶（4）带新手小白一起搭建第一个个人网站项目

未经允许，严禁转载，全文由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.$storemit('add')},dec () {this.$storemit('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.$storemit调用.

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

转载于:.html