[记录二] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之web前端vue

导语：

暑假在家闲着无事，就琢磨着做一个web博客练练手，现在已经做完了，把过程分享出来给大家看看，分享一下学习经验。这是第二篇，主要讲node，webpack和vue-cli环境的搭建，使用vue全家桶，写好路由，构建静态页面，为后续的api请求的编写打下基础。

微信搜索 【web小馆】，回复 “全栈博客项目”，即可获取 项目源码和后续的实战文章教程。

一，环境的搭建

1，node下载

如果本机没有安装node运行环境，请到官网下载node 安装包进行安装，如果本机已经安装node，要更新到最新的node 版本
官网下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

选择current下载。傻瓜式安装，一直点next就行了。
安装好了之后输入cmd打开命令行窗口 进入安装路径 输入node -v和npm-v查看node版本，如果有输出就表示已经下载安装好了。

2，vue和vue-cli下载

npm install vue -g
npm install vue-cli -g

下载好了之后，到你要的目录下面创建一个项目就行了

vue init webpack myProject

yes yes no no
他会有一些vue项目的配置给你选择，根据你的需要去输入y或者n就行了，然后在对应目录的终端命令行上面输入npm run dev。
至此你的vue项目就运行起来了。

二，配置vue和编写部分页面的代码

根据我们项目的需要，我们需要给我的vue项目加上vuex和vue-router，axios这些东西，使用vue全家桶来进行开发。

npm install
npm install vue-router --save-dev
npm install axios --save
npm install vuex --save

安装好这些依赖后，我们来看一看这个vue前端项目的各个文件的作用。

<template>
  <div class="home">
    <scroll :listen-scroll="listenScroll" :probe-type="probeType"
    class="list1" ref="list" :data="list" @scrollToEnd="upmethod"
    :pullup="up" @scroll="scroll"
    >
      <div class="article-list-wrapper">
        <Rotation :height= "handlheight" :list="bannerList" effect="zoom"></Rotation>
        <!-- <button @click="getsession">检验登录</button>
        <button @click="logout">退出登录登录</button> -->
        <van-divider>最新文章</van-divider>
        <div class="card_group">
          <div class="ca" v-for="(item, index) in list" :key="index" @click="to($event)"
            :ID="item.id">
            <img :src="item.pic" class="caimg">
            <div class="caleft">
              <div class="title">{{item.title}}</div>
              <div class="text">{{item.lei}}</div>
              <div class="imformation">点击量 {{item.hits}}     收藏量 {{item.likes}}</div>
            </div>
          </div>
        </div>
      </div>
    </scroll>

    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue';
import scroll from '@/base/scroll/scroll'
import toast from '@/base/toast/toast'
import { Divider, ContactList } from 'vant';
import { Card } from 'vant';
import Rotation from '@/components/Rotation/Rotation'
import { get, getbaners } from '@/api/home'
import { getSession, logOut } from '@/api/user'

Vue.use(Divider);
Vue.use(Card);


export default {
  data() {
    return {
      isLoading: false,
      list: [],
      num: 0,
      more: 'true',
      bannerList: []
    };
  },
  methods: {
    to(e) {         //查看文章详情
      this.$router.push({
        path: `/home/${e.currentTarget.id}`
      })
    },
    _get() {        //获取文章
      let number = this.num + 10
      // console.log(number)
      get(number).then((res) => {
        if (res.data.errno == 0) {
          // console.log(res.data)
          this.list = res.data.data
          console.log(this.list)
          this.more = res.data.message
        }
      })
    },
    _getbaners() {      //获取轮播图图片
      getbaners().then(res => {
        if (res.data.errno == 0) {
          this.bannerList = res.data.data
        }
      })
    },
    getsession(){       //检验登陆
      getSession().then(res => {
        console.log(res)
      })
      // console.log(this.$store.getters.getCurrentUser)
      // console.log(this.$store.getters.getIsLogin)
    },
    logout() {          //退出登录
      logOut().then(res => {
        console.log(res)
      })
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 1500);

      this.$store.commit('updateUserStatus',null);
    },
    scroll(pos) {         //滚动事实位置
        this.scrollY = pos.y
    },
    upmethod() {            //上拉加载
      console.log("jiazai")
      if (this.more == 'true') {
        this._get()
      } else {
        console.log('meile')
      }
    }
  },
  created () {
    this._get()
    this._getbaners()
    this.listenScroll = true
    this.probeType = 3
    this.up = true
  },
  computed: {
    handlheight() {
      return `${document.body.clientWidth/2.4}px`
    }
  },
  components: {
    Rotation,
    scroll,
    toast
  }
};
</script>

<style scoped>

.home{
  position: fixed;
  top: 50px;
  bottom: 50px;
  width: 100%;
  background-color: #f1f1f1;
}
.article-list-wrapper{
  padding-top: 10px;
}
.list1{
  height: 100%;
  overflow: hidden;
}
.ca{
  height: 100px;
  display: flex;
  background-color: #fdfbfb;
  margin: 5px 10px 15px 10px;
  border-radius: 10px;
}
.caimg{
  margin: 15px 20px 10px 20px;
  border-radius: 10px;
  height: 70px;
  width: 70px;
}
.caleft{
  padding: 20px 10px 10px 0px;
  display: block;
}
.title{
  font-size: 14px;
  margin-right: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.text{
  font-size: 13px;
  margin-right: 8px;
  margin-top: 2px;
  color: #8a8a8a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.imformation{
  margin-top: 10px;
  font-size: 11px;
  margin-right: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #8c8a8a;
}
</style>

<template>
  <div class="article" ref="article">
    <van-grid :gutter="10" column-num="3">
      <van-grid-item v-for="(item,index) in list" :key="index" :icon="item.icon" :text="item.text"
        :to="item.to" :id="item.to"
      />

    </van-grid>
    <router-view></router-view>
  </div>
</template>
<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      list : [
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=tikuman.png', text: '前端', to: '/article/前端', id: '前端'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=string.png', text: 'htmlcss', to: '/article/htmlcss', id: 'htmlcss'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=stack.png', text: 'javascript', to: '/article/javascript', id: 'javascript'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=tree.png', text: 'jquery', to: '/article/jquery', id: 'jquery'},
        { icon : 'http://47.***.***..222:80/api/file/icon?pic=link.png', text: 'vue', to: '/article/vue', id: 'vue'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=queue.png', text: '小程序', to: '/article/小程序', id: '小程序'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=sort.png', text: '后端', to: '/article/后端', id: '后端'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=hash.png', text: 'node', to: '/article/node', id: 'node'},
        { icon : 'http://47.***.***.222:80/api/file/icon?pic=heap.png', text: '华农oj', to: '/article/**', id: '**'}
      ]
    }
  },
  methods: {
    to(e) {
       console.log(e.currentTarget.id)
      this.$router.push({
        path: `/article/${e.currentTarget.id}`
      })
    },
  }

}
</script>

<style scoped>
.article{
  padding-top: 80px;
  background-color: #f1f1f1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

<template>
  <div class="me" ref="me">
    <div class="user">
      <van-image
        round
        width="5rem"
        height="5rem"
        :src= "avatar"
      />
      <div class="username" v-html="name"></div>
    </div>
    <div class="hr"></div>
    <div class="tooldiv">
      <van-cell title="我的收藏" is-link class="cell" icon="label-o" to= "/me/like" icon-color="#eeeeee"/>
      <van-cell title="历史阅读" is-link class="cell" icon="bookmark-o" />
      <van-cell title="设置" is-link class="cell" icon="setting-o" to= "/me/imformation"/>
    </div>
     <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue';
import { Image as VanImage } from 'vant';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(VanImage);

export default {
  data() {
    return {
    }
  },
  methods: {
    to() {
      this.$router.push({
        path: `/me/like`
      })
    },
  },
  computed: {
    avatar() {
      if (this.$store.getters.getIsLogin){
        return this.$store.getters.getCurrentUser.avatar
      } else {
        return 'http://47.***.***.222:80/api/file/avatar?pic=logo.png'
      }
    },
    name() {
      if (this.$store.getters.getIsLogin){
        return this.$store.getters.getCurrentUser.realname
      } else {
        return '轻松学算法'
      }
    }
  },
}
</script>

<style scoped>

.me{
  padding-top: 80px;
  background-color: #f1f1f1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.user{
  background-color: #a2ebb9;
  padding: 30px 0 30px 0;
  text-align: center;
  margin: 10px 30px 10px 30px;
  border-radius: 20px;
}
.tooldiv{
  display: block;
  margin-top: 20px;
}
.hr{
  height: 1.5px;
  background-color: #d8d8d8;
  margin: 4px 20px 4px 20px;
}
.cell{
  margin-bottom: 3px;
}
</style>

我们先把这三个页面给编写出来。

各位看官给我点个赞鼓励鼓励呗，谢谢啦~~~

补充：

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！