vue+express：搭建个人博客（1）

最近正在看nodejs，在加上vue有不算很熟悉。
实践出真知，打算写个个人博客管理来练练手，当然，有参考。
一个 Vue.js+Node.js 的博客内容管理系统
会更新博文，主要记录一下自己搭建过程

---

使用Vue-cli脚手架

安装vue-cli

npm install -g vue-cli

搭建项目

vue init webpack myBlog

下面会有一系列的选择，我选择了vue-router以及eslint编码规范。

目录如下：

1. build和config都是webpack配置
2. src是存放项目源文件的目录
3. static 存放第三方静态资源，这个里面的gitkeep是这个目录为空，也可以把这个目录提交的git仓库 里面，因为通常一个空目录是不能提交git仓库里面的
4. babelrc 是babel的配置项。
5. editorconfig是编辑器的配置项
6. gitignore里面存放的是会忽略语法检查的目录
7. index.html 入口页面
8. package.json是项目的描述和依赖，我们在开始的时候执行npm run dev ，就相当于执行了这个文件里面的scripts的dev对应的 node build/dev-server.js。

安装依赖包并运行

npm install
npm start

package.json

主要看一下这个文件中的内容，
项目依赖，可在后续添加，npm install时加上--save会自动添加

  "dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^2.3.1"
  },

开发依赖，可在后续添加，npm install时加上--save-dev会自动添加

"devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    ...

以上二者是有区别的。devDependencies 下列出的模块，是我们开发时用的，不会被部署到生产环境，比如css-loader。dependencies 下的模块，则是我们生产环境中需要的依赖。
我自己的理解是，缺少dependencies，则会导致无法运行。缺少devDependencies，则会导致无法开发调试。这只是片面的理解，有什么不对欢迎指出~

指定node运行版本号

  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },

---

前端页面

开始写页面了啊

开始页面

首先是一开始的页面，主要是实现header固定，点击文章和关于我的时候只是局部的组件变化。
由于使用了vue-router，所以通过children对组件进行修改就好了~
大致情况是这样

下面空白的部分用来放文章以及关于我的部分。

文章组件

文章组件主要用来展示所有的文章，以及日期的，还可以在该模块对文章进行删除/编辑/收藏操作。
router

  routes: [
    {
      path: '/',
      name: 'editview',
      component: EditView,
      children: [
        {path: '/articles', name: 'articles', component: Articles}
      ]
    }
  ]

在EditView中记得加上否则无法显示组件。
效果如下：

文章的数据是我暂时仿造的hh，因为还没做到那一块。

---

关于我组件

这个组件和文章组件类似在这里不说了。
效果

---

忘记添加 添加按钮了

诡异的圆形按钮哈哈哈哈到时候加上一些动画~

---

vuex实现数据的保存和修改

于是在src目录下创建一个store目录

此时就需要思考了，state里面需要存放什么数据？
肯定要有所有文章和所有链接。
至于action和mutation就是修改/添加/删除文章。

---

会继续更新