vuejs实现一个博客的简单记录(含源码)
2017-06-07 12:12
441 查看
最新源码下载:https://github.com/Lidisam/vuejs-for-blog
以下若有vue基本知识即可不看。
以下我简单的说明下整个项目的构建简单流程:
一、首先本项目采用vue-cli构建,具体构建请看https://cn.vuejs.org/v2/guide/installation.html
启动项目后,首先进入main.js进行分析:
二、然后再看看路由,这里我采用的路由是vue-router,位置在 /src/router/index.js ,并且截取部分如下讲解:
三、这里接着二讲解routes中第一个 path: '/' 那个
首先这个指向了 地址栏的 http://localhost:8080/,并且通过 import IndexPage from '@/pages/index' 引入了IndexPage模板,然后我们打开该模板分析(/src/pages/index.vue)如下:
分析:从这里看比较简单,就包含三部分代码:template、script、style,原因是因为多个页面几乎和该页面一致,所以我将其做成单页用于调用,
首先用如下代码引入,并写在components中使ArchivesShow可在 template中 <archives-show :Archives="Archives" :url="'/page/'" isPagination="0">进行调用:
然后我们继续往下看到 script中的 created 如下:
以上就是基本的使用知识,在此做个记录~
以下若有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">将数据传递过去用于显示
以上就是基本的使用知识,在此做个记录~
相关文章推荐
- 简单实现DataGrid添加CheckBox删除记录(转载纳米小心的博客)
- 【分享】分享一个基于SSH实现的简单学生选课系统(附源码)
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- 基于jsp+servlet实现的简单博客系统实例(附源码)
- 实现一个简单的视频聊天室(源码)
- 郭克华手机编程教学视频----我的练习源码(6)实战:实现一个简单的监听程序
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- CSDN博客:对于一个程序员,写程序就是实现功能,遇到具体问题,解决这个问题,并记录问题到CSDN上,从而有所提高和互相帮助。
- 简单实现:如何把所有的日志记录到同一个文件中???
- 简单博客相册管理实现及源码下载
- Android开发之一个简单的通讯录实现(源码)
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- 【分享】分享一个基于SSH实现的简单学生选课系统(附源码)
- C++实现一个简单的异常日志记录类
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- Android: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)