正文

新手必看！Vue3 + Vuex + Express快速搭建个人博客全攻略

/0 浏览量
1029

在数字化时代，个人博客已成为展示个人观点、分享知识和交流心得的重要平台。对于新手来说，使用Vue3、Vuex和Express搭建个人博客，不仅可以锻炼技术能力，还能实现个人价值的展示。本文将为你详细介绍如何快速搭建一个个人博客。

一、准备工作

1. 环境搭建

在开始之前，请确保你的电脑上已安装以下软件：

  • Node.js：作为JavaScript运行环境，用于运行Express服务器。
  • npm：Node.js的包管理工具，用于安装Vue3、Vuex等依赖。
  • Visual Studio Code：代码编辑器，用于编写和调试代码。

2. 了解Vue3、Vuex和Express

  • Vue3：一套用于构建用户界面的渐进式JavaScript框架。
  • Vuex：Vue的状态管理模式和库，用于在多种组件之间共享状态。
  • Express：一个轻量级的Web应用框架，用于快速搭建服务器。

二、项目创建

  1. 打开终端，创建一个新目录并进入：
mkdir myblog
cd myblog
  1. 初始化npm项目：
npm init -y
  1. 安装Vue3、Vuex和Express：
npm install vue@next vuex express

三、项目结构

创建以下目录和文件：

myblog
├── src
│   ├── components
│   ├── store
│   ├── views
│   ├── app.js
│   ├── index.html
├── .env
├── package.json
└── package-lock.json

1. src目录

  • components：存放Vue组件。
  • store：存放Vuex状态管理。
  • views：存放页面组件。
  • app.js：入口文件，用于创建Vue实例。
  • index.html：页面入口文件。

2. .env文件

配置环境变量，如API接口地址等。

VUE_APP_API_URL=https://example.com/api

3. package.json

修改scripts字段，添加启动和构建命令：

"scripts": {
  "start": "node server.js",
  "build": "npm run build-client && node server.js"
}

四、搭建Vue3项目

  1. 创建src/components目录，并添加Home.vue组件：
<template>
  <div>
    <h1>欢迎来到我的博客</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>
  1. 创建src/views目录，并添加Home.vue组件：
<template>
  <Home></Home>
</template>

<script>
import Home from '@/components/Home.vue'

export default {
  components: {
    Home
  }
}
</script>
  1. 修改src/app.js，引入Vue、Vuex和路由：
import Vue from 'vue'
import App from './views/Home.vue'
import store from './store'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  1. 创建src/router/index.js，配置路由：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

五、搭建Express服务器

  1. 在项目根目录创建server.js：
const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'dist')))

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})
  1. 修改package.json，添加启动Express服务器的命令：
"scripts": {
  "start": "node server.js"
}
  1. 启动项目：
npm start

现在，你已经成功搭建了一个基于Vue3、Vuex和Express的个人博客。接下来，你可以根据自己的需求，添加更多功能和组件，打造属于你的个性化博客。祝你搭建顺利！

-- 展开阅读全文 --