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

来源：互联网发布：广西广电网络高清机顶盒编辑：程序博客网时间：2024/05/22 08:11

最近正在看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 installnpm 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中记得加上<router-view></router-view>否则无法显示组件。
效果如下：
这里写图片描述
文章的数据是我暂时仿造的hh，因为还没做到那一块。