Vue+Node的项目可以按照以下步骤搭建:
-
安装Node.js和Vue CLI工具,可以参考官方文档进行安装。
-
使用Vue CLI创建一个Vue项目,可以使用以下命令:
vue create my-project
在创建项目时选择手动配置,选择需要的功能和插件,例如Babel、Router、Vuex等。
-
在Vue项目中安装axios插件,用于发送HTTP请求:
npm install axios --save
-
创建一个Node.js项目,可以使用以下命令:
mkdir my-node-app cd my-node-app npm init
这将创建一个空的Node.js项目,并生成一个package.json文件。
-
在Node.js项目中安装Express框架,用于创建Web应用:
npm install express --save
-
在Node.js项目中创建一个app.js文件,用于编写服务器端代码,例如:
const express = require('express') const app = express() app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(3000, () => { console.log('Server started on port 3000') })
这将创建一个简单的Express应用,监听端口3000,并响应根路径的请求。
-
在Vue项目中创建一个api.js文件,用于编写客户端请求代码,例如:
import axios from 'axios' export const getHello = () => { return axios.get('/api/hello') }
这将创建一个函数,用于发送GET请求到服务器的/api/hello路径。
-
在Vue项目中使用api.js文件,例如:
<template> <div> <p>{{ message }}</p> </div> </template> <script> import { getHello } from './api' export default { data () { return { message: '' } }, mounted () { getHello().then(response => { this.message = response.data }) } } </script>
这将在Vue组件中使用api.js文件中的函数,发送请求并更新组件的数据。
-
启动服务器和客户端,例如:
// 在Node.js项目目录下运行 node app.js // 在Vue项目目录下运行 npm run serve
这将启动服务器和客户端,可以在浏览器中访问http://localhost:8080,查看应用的运行情况。