手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

weapon 发布于2019-08-20 14:15 / 1197人阅读

摘要：更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个。

底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单。这个项目才开始2天，就是每天晚上抽点时间写写，速度不会很快，这周末前将前端的静态页面和mock数据及webpack打包构建写完，下周开始写服务端的内容。

更新日志 2.14更新

完成post静态页面原型,修复webpack使用extractTextPlugin的正确姿势

2.15更新

添加about静态页面

2.16更新

添加json-server. 使用方法请戳我

主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个mock backend server。

在我们还未开始写后端代码前，主要用这个backend server去模拟数据格式。

PS: 因为你webpack-dev-server占用了一个端口,那么json-server需要使用另外一个端口。
这个时候需要利用webpack-dev-server提供的proxy功能。

具体的配置信息，见webpack.config.dev.js文件

添加axios作为http资源库

其实vue对于开发者使用什么资源库没做什么限制。使用你顺手的就好了。

将axios集成进vue的方式见App.vue文件。

axios文档请戳我

vue添加插件的方法请戳我

2.18更新

添加webpack生产环境配置信息

见webpack.config.prod.js文件。主要添加的内容为文件的hash，文件的打包及输出内容

tags页面添加vue-router路由动态匹配

使用方法请戳我

2.19更新

添加mock数据, 见lib/mock/db.json文件

完成archive静态页面

这是一个开源的个人blog项目。

前端的所使用的技术栈:

es6

vue-router2

webpack2

axios

less

后端:

node

mongoDB

这个小项目才开始，使用webpack2已经搭建好了前端开发环境, 及相应的vue的路由配置。接下来我会带着大家一起完成整个blog的开发工作。

如果你想学习vue2的基本套路及其生态, 如果你想学习如何使用webpack2进行文件的编译，打包及构建，如何进行文件的组织。。（总之作为一个业余项目，你能跟下来的话肯定能学到很多啦~~）

你还在等什么，赶紧上车吧~~~ 代码仓库请戳我

专线服务超融合服务器手把手教你阿里云服务器搭建商城教你用手把手教你做图像识别教你用阿里云开我的世界服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81498.html

我的大前端- 收藏集 - 掘金

摘要：下面围绕的这样的目的，即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能，感觉非常不错。正如你期望的，文中的闯关记之垃圾回收和内存管理前端掘金题图来源，授权基于协议。微信小程序实战学习起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大场景? 微信小程序本质上来说就是一个 HTML 5（移动网页）应用，用view、scoll-view代替了div标...

LdhAndroid 2019-08-20 18:17 评论0 收藏0
使用 vue2+vue-router2+axios+es6+webpack2 完成的 SPA 个人简

showImg(https://segmentfault.com/img/bVN5fu?w=1920&h=4878); 使用es6 vue2 webpack2 vue-router2 axios vue-awesome-swiper vue-spinner SPA 完成的个人简历访问地址：https://github.com/vqlai/vqla...欢迎star，3Q

CloudwiseAPM 2019-08-20 16:44 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

fish 2019-08-29 11:27 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 评论0 收藏0