目录
一、node.js+vue3
1.1 node安装
1.2 node.js+vue3预期
二、项目及程序代码
2.1 创建项目
2.2 Node.js 服务器 (server.js)
2.3 public/index.html
2.4 src/main.js
2.5 src/App.vue
2.6 vue.config.js
三、编译实现
3.1 安装必要的依赖
3.2 运行Node.js服务器
3.3 访问服务
一、node.js+vue3
1.1 node安装
-
访问Node.js的官方网站，根据你的操作系统选择合适的版本进行下载及安装，记得配置其node的路径目录到环境变量中。（https://nodejs.org/en/download/）。
- 打开命令提示符（cmd）或PowerShell。
- 输入命令
node -v，查看Node.js的版本信息。如果正确显示版本号，则说明Node.js已成功安装。 - 输入命令
npm -v，查看npm（Node.js的包管理器）的版本信息。
1.2 node.js+vue3预期
一个基本的Vue 3和Node.js结合的示例。
-
使用Node.js搭建一个简单的服务器。
-
使用Vue 3创建一个简单的前端应用。
二、项目及程序代码
2.1 创建项目
创建项目目录，例如node_vue3，该目录包含以下文件
public/
-- index.html
src/
-- main.js
-- App.vue
server.js
vue.config.js2.2 Node.js 服务器 (server.js)
const express = require('express');
const path = require('path');
const app = express();
// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 设置单页面应用的路由，将所有路由指向index.html
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// 监听3000端口
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
2.3 public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 3 App</title>
</head>
<body>
<div id="app">hello world!</div>
</body>
</html>2.4 src/main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
2.5 src/App.vue
<template>
<div>
<h1>Hello Vue 3!</h1>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
2.6 vue.config.js
module.exports = {
// 配置生产环境和开发环境下的公共路径
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
};
三、编译实现
3.1 安装必要的依赖
进入该项目目录，启动命令行：
npm init -y
npm install express vue@latest vue-loader@latest vue-template-compiler @vue/compiler-sfc3.2 运行Node.js服务器
node server.js
3.3 访问服务
在浏览器输入
