从 0 -1搭建一个博客服务

前言：

node的出现，使得前端程序猿也能体验全栈的快感，搭建一套自己的服务体系，帅。。。。
复制代码

有热情还不够，我需要怎么着手呢，先准备

技术栈

vue
vuex
nodejs
express
mongodb
复制代码

工具

webpack打包工具
bable解析器
Robo 3T 数据库可视化工具，主要针对mongo
复制代码

可参考资料： Robo 3T

布局

FlexBox布局 
复制代码

可参考的资料：

一个完整的Flexbox指南

理解Flexbox：你需要知道的一切

所具备的知识和工具，都准备了，我要怎么才能把前端和后端跑起来呢

思路大概是这样的

安装node环境
安装npm【node包的管理工具】
安装MongoDB
克隆项目
安装前端依赖
安装后端依赖
复制代码

接着一步步做

1、安装node

到官网下载node
安装node
检查node是否安装完成: node -v --v9.10.1
复制代码

2、安装npm

一般安装node，npm会被自动安装
检查npm： npm -v --6.6.0
复制代码

3、安装MongoDB

安装官网安装
安装完后稍后启动
mongod
复制代码

下载地址：MongoDB

4、克隆项目

https://github.com/zhangjinlongll/vueBlog
复制代码

项目目录

│  .gitignore
│  index.html
│  package.json
│  README.md
│
├─build
│      build.js
│      check-versions.js
│      dev-client.js
│      dev-server.js
│      utils.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│      test.env.js
│
├─server                        后端文件夹
│  │  .env
│  │  app.js    后端入口
│  │
│  ├─api
│  │      index.js  后端api
│  │
│  ├─lib
│  │      mongo.js 数据库
│  │
│  ├─middleware
│  │      checkToken.js
│  │      createToken.js
│  │
│  └─routes                 后端路由
│          admin.js
│          article.js
│          classify.js
│          index.js
│          login.js
│          reg.js
│
├─src       前端文件夹
│  │  App.vue
│  │  main.js   前端入口
│  │
│  ├─api    前端api
│  │      index.js
│  │
│  ├─assets
│  │  ├─css
│  │  │      commen.css
│  │  │      default.css
│  │  │      default0.css
│  │  │      highlight.css
│  │  │
│  │  ├─img
│  │  │      bg.jpg
│  │  │      bgm.jpg
│  │  │
│  │  └─js
│  │          commen.js
│  │          highlight.pack.js
│  │          hljs.js
│  │
│  ├─components
│  │  │  NotFound.vue
│  │  │
│  │  ├─backEnd             后端界面
│  │  │      Admin.vue
│  │  │      ArticleCreate.vue
│  │  │      ArticleEdit.vue
│  │  │      ArticleList.vue
│  │  │      ClassList.vue
│  │  │      Login.vue
│  │  │      Reg.vue
│  │  │
│  │  └─fronted             前端界面
│  │          About.vue
│  │          Article.vue
│  │          Front.vue
│  │          Home.vue
│  │          Tags.vue
│  │          vfooter.vue
│  │          vheader.vue
│  │
│  ├─routes             前端路由vue-router
│  │      index.js
│  │      routes.js
│  │
│  └─store             前端vuex
│      │  actions.js
│      │  index.js
│      │  MsgAlert.js
│      │  mutations.js
│      │  states.js
│      │  types.js
复制代码

5、安装前端依赖

根目录： npm install 或用淘宝依赖: cnpm install 或用yarn install
复制代码

6、安装后端依赖

在server目录下： npm install
复制代码

全局安装supervisor

npm install -g supervisor
复制代码

至此结束

转载于:https://juejin.im/post/5c86245c5188257fdd0bd6ea