cathayandy / blog

Just a blog example.

逗哥的博客教学

前言

这里是逗哥个人主页的repo! 以及一个简单的博客搭建的教学.

第一章 前期准备

一个博客系统是由前端后端和数据库组成的, 所以在这一章里, 我介绍一下如何配置前端后端以及数据库.

第1节 后端koa.js

后端我选择的是koa.js. 我选择koa.js的原因是它比较轻量, 并且使用了generator模式, 使得其开发避免了繁琐的回调嵌套. 为了运行koa.js, 需要先装一个js的运行环境node.js.

• 安装node.js

  • 先装node.js的版本管理工具nvm:

      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash
    

  • 然后利用nvm安装node.js: nvm install v4.2.4.

  • 运行node -v, 输出v4.2.4即说明安装成功.

• 利用node.js新建一个工程

  • 新建一个文件夹来存你的工程: mkdir blog.

  • 进入到这个文件夹: cd blog.

  • 使用npm init初始化一个node.js工程, 把入口文件设为app.js, 剩下那些选项看着填就好啦.

  • 看看生成了什么:

    • LICENSE - 这表示你新建的这个工程是在什么许可证下发布的.
    • README.md - 这是你工程的简介.
    • package.json - 这是最重要的一个文件, 你之前填的配置几乎都存在了这个文件里, 它就是你工程的配置文件.

  • 新建一个文件app.js, 这个文件就是你工程的入口文件啦.

• 安装koa.js并用它启动一个Web服务

  • 安装koa.js: npm install koa --save.

  • 编辑index.js.

    首先要引入koa.js.

      var koa = require('koa');
    

    然后例化一个koa的实例app.

      var app = koa();
    

    使用app.use()加载中间件.

      app.use(function *(){
        this.body = 'Hello World';
      });
    

    监听3000端口.

      app.listen(3000);
    

  • 运行上述代码, 启动Web服务: node app.js.

  • 打开浏览器, 在地址栏中输入127.0.0.1:3000, 看看你的成果啦!

  • 打开package.json, 在"scripts"加入一项"start": "node app.js", 下次键入npm start就可以启动服务器啦.

第2节 前端vue.js

• 安装vue.js

    npm install vue --save
  

• 安装babel-runtime

    npm install babel-runtime --save
  

• 安装和koa相关的热加载包

    npm install koa-static koa-webpack-dev-middleware koa-webpack-hot-middleware --save
  

• 安装webpack

    npm install webpack -g
    npm install webpack --save-dev
  

• 安装babel相关包

    npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-2 --save-dev
  

• 安装cross-env

    npm install cross-env --save-dev
  

• 安装相关loader

    npm install css-loader file-loader json-loader url-loader --save-dev
  

• 安装vue相关loader

    npm install vue-hot-reload-api vue-html-loader vue-loader vue-style-loader --save-dev