vue和nodejs全栈项目的搭建

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 , yourHeaderFeild’);
res.header(‘Access-Control-Allow-Methods’, ‘PUT, POST, GET, DELETE, OPTIONS’);
if (req.method == ‘OPTIONS’) {
res.send(200);
} else {
next();
}
});

vue代理服务器

项目文件->config->index.js 开始代理服务器
如下
‘/users/**’: {
target: ‘http://你的IP地址/users/banner’,
changeOrigin: true,
pathRewrite: {
‘^/teacher’: ‘’
}
},

试着在你的vue项目首页调用这个接口。。。
[email protected] 本人不才，欢迎纠错