vue和nodejs全栈项目的搭建

最新推荐文章于 2024-08-20 09:16:28 发布

Kapeianuil

最新推荐文章于 2024-08-20 09:16:28 发布

阅读量4k

点赞数

分类专栏：个人学习总结文章标签：前端 node 数据库 vue 全栈

本文链接：https://blog.csdn.net/Kapeianuil/article/details/84872648

版权

本文介绍如何使用vue-cli和express搭建一个全栈项目。首先，确保安装了node、npm并切换到cnpm。然后，通过express-generator创建服务器端项目，安装依赖并启动。接着，在同一文件夹下，使用vue init创建Vue项目，安装依赖。为解决跨域问题，需在app.js中设置响应头。最后，通过vue项目中的config.index.js配置代理服务器，实现API调用。

摘要由CSDN通过智能技术生成

vue和nodejs全栈项目的搭建

前提提示：本文章基于vue-cli开发版本搭建vue项目，熟悉nodejs，本文章使用的框架为express，并且你的电脑具备node环境，数据库使用的是mongodb。。

node npm->淘宝镜像（cnpm）
express express-generator
vue-cli(webpack3) 这些都需要进行安装

搭建服务器

创建一个test文件夹，在此文件夹下shift+右键打开命令窗口
输入 express server（自定义名字）cd server cnpm i（安装依赖）
cnpm start nodejs正在运行浏览器输入localhost:3000可以运行

搭建vue项目
在test文件夹下另打开一个命令窗口
输入 vue init webpack myapp(自定义项目名称)
接下来按enter键来进行文件配置建议全选Y 文件测试选择自己熟悉的测试模式最后一项选第三个
安装依赖 cnpm i

目前已经完成了一大步

设置跨域请求头
将下面这段话，放在app.js 的 var app = express();下面随便放不起作用
app.all(’’, function (req, res, next) {
res.header(‘Access-Control-Allow-Origin’, '’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourH