vuejs实现一个博客的简单记录(含源码)

最新源码下载：https://github.com/Lidisam/vuejs-for-blog 

以下若有vue基本知识即可不看。

以下我简单的说明下整个项目的构建简单流程：

一、首先本项目采用vue-cli构建，具体构建请看https://cn.vuejs.org/v2/guide/installation.html

启动项目后，首先进入main.js进行分析：

import Vue from 'vue'
import router from './router'
import Layout from '@/components/layout'
import '@/assets/thirdparty/bootstrap/css/bootstrap.min.css'
import '@/assets/thirdparty/font-awesome/css/font-awesome.min.css'
require('./assets/thirdparty/jquery/jquery-3.2.1.min.js');
require('./assets/thirdparty/bootstrap/js/bootstrap.min.js');


Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Layout/>',
  components: {Layout}
});

注：其中 template: '<Layout>'代表该项目的基本模板，之后的凡是在router下的路由都会在该模板上时候，而他对应的位置则是 /src/router/pages/components/layout.vue

二、然后再看看路由，这里我采用的路由是vue-router，位置在 /src/router/index.js  ，并且截取部分如下讲解：

import ArchivesPage from '@/pages/archives'
import ArchivesCategoryPage from '@/pages/archivesCategorys'
import IndexPaginationPage from '@/pages/indexPagination'
import ArCatPaginationPage from '@/pages/archivesCategorysPagination'
import ArchivesDatePage from '@/pages/archivesDate'
import ArchivesDatePagPage from '@/pages/archivesDatePagination'
import NotFoundPage from '@/pages/notFound'
import ContactPage from '@/pages/contactMe'
import DatePage from '@/pages/date'

注：这里引入路由模板。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: IndexPage
    },
    {  //首页分页
      name: 'indexPagination',
      path: '/page/:num',
      component: IndexPaginationPage
    },
    {   //文章详情页
      name: 'archives',
      path: '/archive/:id',
      component: ArchivesPage
    },

注：以上name为路由名，path为路由的路径，component为路由对应的模板，然后取routes下的第一个讲解(即path: '/'   那个)

三、这里接着二讲解routes中第一个 path: '/'   那个

首先这个指向了 地址栏的 http://localhost:8080/，并且通过 import IndexPage from '@/pages/index' 引入了IndexPage模板，然后我们打开该模板分析(/src/pages/index.vue)如下：

<template>
  <archives-show :Archives="Archives" :url="'/page/'" isPagination="0">
    <div slot="archives-type-desc">
      <!--暂无-->
    </div>
  </archives-show>
</template>

<script>
  import ArchivesShow from '../components/archivesShow'
  export default {
    components: {
      ArchivesShow
    },
    created: function () {
      //获取初始文章信息
      this.$http.get('/api/getArchives')
        .then((res) => {
        this.Archives = res.data;
       }, (err) => {
        console.log(err);
      })
    },
    data () {
      return {
        Archives: []
      }
    }
  }
</script>

<style scoped>
</style>

分析：从这里看比较简单，就包含三部分代码：template、script、style，原因是因为多个页面几乎和该页面一致，所以我将其做成单页用于调用,

首先用如下代码引入，并写在components中使ArchivesShow可在 template中 <archives-show :Archives="Archives" :url="'/page/'" isPagination="0">进行调用：

import ArchivesShow from '../components/archivesShow'
  export default {
    components: {
      ArchivesShow
    },

引入成功后我们看看 <template>...</template> 代码如下：

<template>
  <archives-show :Archives="Archives" :url="'/page/'" isPagination="0">
    <div slot="archives-type-desc">
      <!--暂无-->
    </div>
  </archives-show>
</template>

从这里可以看出archives-show 作为子组件，props属性有url、Archives、isPagination用于为子组件接收父组件的数据，另外这里设置了一个挂载点slot用于自定义每个页面的不同之处，其代码片段在 src/components/archivesShow.vue 如下所示：

<slot name="archives-type-desc"></slot>

然后我们继续往下看到 script中的  created 如下：

created: function () {
      //获取初始文章信息
      this.$http.get('/api/getArchives')
        .then((res) => {
        this.Archives = res.data;
       }, (err) => {
        console.log(err);
      })
    },

该方法用于实例创建完后使用(文档：https://cn.vuejs.org/v2/api/#created)，即使进入页面时会自动加载ajax请求并获取数据填充到Archives中，然后通过<archives-show :Archives="Archives" :url="'/page/'" isPagination="0">将数据传递过去用于显示

以上就是基本的使用知识，在此做个记录~