Vue搭建个人博客概况

Vue搭建个人博客概况

---

胡话

神说，老明明要有一个个人博客，于是便有了这个blog，来检验这段时间的学习成果

方案

• 前端：使用Vue.js的服务端渲染（SSR）框架Nuxt，SSR对于个人博客的意义就是能让搜索引擎搜索到你的文章，Nuxt还有优点就是是减少配置成本，且框架自动生成路由，无需自己配置。
• UI：懒惰是一种美德（借口），我选择Element.UI。
• 后台：理论上作为一个前端崽应该用Node.js的，但刚好Pyhoarm打开了，且之前就搭好了flask的环境，所以能最快地完成我的想法，我就用了python的flask框架了。
• 数据库：暂时没加，迟点应该是会用SQlite的，毕竟能嵌入python，比MySQL方便点
• 文章：用markdown写，然后通过python后台转html，前端请求获取文章

前端

1、安装Nuxt

先通过下面代码来安装vue脚手架

npm install -g vue-cli

为了便于大家快速使用，Nuxt.js提供了一个 starter 模板。
打开一个空文件夹
运行:

vue init nuxt-community/starter-template <project-name>  //<project-name>自己定义

安装依赖:

npm install

有可能会因为prettier升级报缺少模块的错:

npm install prettier@~1.12.0 --save  //安装之前的版本

然后就可以运行我们的Nuxt模板了:

npm run dev

2、动态路由配合axios获取文章
nuxt的动态路由是需要下横线_开头的
例如我在home.vue里的代码是这样：

<div v-for="(article,index) in articles" :key="index">
    <nuxt-link class="link" :to="/articles/+index">{{article.title}}</nuxt-link>
</div>

那么在home.vue同级目录articles里的_id.vue代码则是如此：

let _id = this.$route.params.id;  //获取传过来的参数

上述代码可以获取home.vue传过来的index
配合axios可以写成这样：

methods:{
  request(){
          axios.defaults.baseURL = 'http://127.0.0.1:5000/'; //基础接口地址
          axios.create();
         
          let _this = this;
          let _id = this.$route.params.id;  //获取传过来的参数
  
          console.log(_id);
          axios.get('/articles/'+ _id) //动态接口
            .then(response =>
              
              ( _this.htmlContent =
                _this.htmlContent
                + response.data           
            ))
            .catch(error => (
                console.log(error)
              )
            );
      }
  },    
  mounted(){   //此处是自启动request函数
    this.request();
  }

如果后台和前端不是同一个域名，就要处理跨域问题，我是在后台配置跨域的，前端也可以，大家可以去试试

后端开发

python的flask框架提供动态接口获取文章
另起一篇讲吧

部署

先挖好坑

后续计划

• 完善后台，增加markdown文件上传
• 增加SQlite数据库
• 写一堆文章填满博客！！！
• 界面还是有点丑，要美化

参考

Cloud's Blog

写在最后

laomingming博客初上线