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

时间：2022-09-09 12:26:16

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

https://github.com/xuchaoyu2000/vueblog

 

标签：

相关文章