手把手教你使用Vue创建个人博客（Vue&个人博客）

介绍

个人博客是一种非常流行的方式，让你能够分享自己的想法、知识以及项目经验。Vue是一个流行的JavaScript框架，用于创建用户界面。本篇博客将手把手教你如何使用Vue创建个人博客。

准备工作

在开始创建个人博客之前，我们需要确保电脑已安装以下工具：

• Node.js
• Vue CLI

Node.js用于运行JavaScript代码，而Vue CLI是Vue的命令行工具，用于创建和管理Vue项目。

创建Vue项目

1. 打开终端或命令提示符，创建一个新文件夹用于存放你的博客项目，并进入该文件夹。

   mkdir my-blog
   cd my-blog
   

2. 在终端或命令提示符中运行以下命令，使用Vue CLI创建一个新的Vue项目。

   vue create .
   

   这会创建一个新的Vue项目，并将其文件和文件夹结构放在当前目录中。

3. 在运行vue create命令后，会询问你选择配置preset。你可以选择默认配置，也可以根据自己的需求进行自定义配置。选择完毕后，等待依赖安装完成。

4. 安装额外的依赖。

   npm install axios moment marked --save
   

   这些额外的依赖将在我们的博客项目中使用。

5. 用任意文本编辑器打开项目文件夹，并找到src文件夹中的main.js文件。

6. 在main.js文件中添加以下代码，导入我们将在博客项目中使用的依赖。

   import axios from 'axios';
   import moment from 'moment';
   import marked from 'marked';
   
   Vue.prototype.$http = axios;
   Vue.prototype.$moment = moment;
   Vue.prototype.$marked = marked;
   

创建博客页面

现在，我们将创建博客的页面组件。

1. 打开项目文件夹，并找到src文件夹中的views文件夹。

2. 创建一个新的文件 Blog.vue。

3. 在Blog.vue中，我们将定义博客页面的结构和样式。你可以根据自己的需求进行自定义。

   <template>
     <div class="blog">
       <h1>{{ blog.title }}</h1>
       <div class="meta">
         <span>{{ $moment(blog.createdAt).format('YYYY-MM-DD') }}</span>
       </div>
       <div class="content" v-html="$marked(blog.content)"></div>
     </div>
   </template>
   
   <style scoped>
   .blog {
     margin: 20px;
   }
   
   .meta {
     color: #888;
   }
   
   .content {
     margin-top: 20px;
   }
   </style>
   

   在上面的代码中，我们使用了Vue的模板语法和标记语言。

4. 在Blog.vue中，我们还需要添加逻辑代码。

   <script>
   export default {
     data() {
       return {
         blog: null
       }
     },
     mounted() {
       this.fetchBlog();
     },
     methods: {
       fetchBlog() {
         this.$http.get('/api/blogs/1')
           .then(response => {
             this.blog = response.data;
           })
           .catch(error => {
             console.log(error);
           });
       }
     }
   }
   </script>
   

   上面的代码中，我们通过fetchBlogs方法从后端API获取博客文章数据，并在mounted生命周期钩子中调用该方法。

创建博客列表页面

接下来，我们将创建博客列表页面，用于展示所有博客文章。

1. 在src文件夹中的views文件夹中，创建一个新的文件 BlogList.vue。

2. 在BlogList.vue中，我们将定义博客列表页面的结构和样式。

   <template>
     <div class="blog-list">
       <h1>My Blogs</h1>
       <ul>
         <li v-for="blog in blogs" :key="blog.id">
           <router-link :to="'/blogs/' + blog.id">
             {{ blog.title }}
           </router-link>
         </li>
       </ul>
     </div>
   </template>
   
   <style scoped>
   .blog-list {
     margin: 20px;
   }
   
   ul {
     list-style-type: none;
     padding: 0;
   }
   
   li {
     margin: 10px 0;
   }
   
   a {
     text-decoration: none;
     color: #333;
   }
   </style>
   

   在上面的代码中，我们使用了Vue的循环指令和路由链接组件。

3. 在BlogList.vue中，我们还需要添加逻辑代码。

   <script>
   export default {
     data() {
       return {
         blogs: []
       }
     },
     mounted() {
       this.fetchBlogs();
     },
     methods: {
       fetchBlogs() {
         this.$http.get('/api/blogs')
           .then(response => {
             this.blogs = response.data;
           })
           .catch(error => {
             console.log(error);
           });
       }
     }
   }
   </script>
   

   上面的代码中，我们通过fetchBlogs方法从后端API获取博客文章列表，并在mounted生命周期钩子中调用该方法。

配置路由

为了能够在我们的应用中导航到博客页面和博客列表页面，我们需要配置Vue Router。

1. 打开项目文件夹，并找到src文件夹中的router.js文件。

2. 打开router.js文件，并添加以下代码，配置路由。

   import Vue from 'vue';
   import Router from 'vue-router';
   import BlogList from './views/BlogList.vue';
   import Blog from './views/Blog.vue';
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       {
         path: '/',
         component: BlogList
       },
       {
         path: '/blogs/:id',
         component: Blog
       }
     ]
   });
   

   在上面的代码中，我们配置了两个路由：/为博客列表页面，/blogs/:id为博客页面。

运行项目

现在，你已经完成了创建博客页面、创建博客列表页面和配置路由的所有步骤，可以运行你的项目了。

在终端或命令提示符中，运行以下命令：

npm run serve

这会启动本地开发服务器，并在浏览器中打开你的博客应用程序。

结论

恭喜！你已经手把手地使用Vue创建了个人博客。通过Vue的强大功能和简化的开发流程，你可以很容易地定制和扩展你的个人博客。继续学习和探索Vue，你将能够创建更多令人惊叹的Web应用程序。

请记住，这只是个人博客的初步实现，可以根据你自己的需求进行定制和扩展。祝你在使用Vue创建个人博客的过程中成功和愉快！

本文来自极简博客，作者：清风徐来，转载请注明原文链接：手把手教你使用Vue创建个人博客（Vue&个人博客）