$ cd vue-webpack
$ npm install
# develop
$ npm run dev
# production
$ npm run build
vue项目目录结构
vue-webpack vue项目
│
├──build webpack配置文件夹
│ │
│ ├──build.js 生产环境构建
│ ├──check-versions.js 检查node、npm版本
│ ├──dev-client.js 开发模式下用到的工具,如:热重载
│ ├──dev-server.js 开发模式下,构建本地服务
│ ├──utils.js 构建工具相关,封装了webpack模块用到的方法
│ ├──vue-loader.conf.js .vue单文件加载配置
│ ├──webpack.base.conf.js webpack基础配置
│ ├──webpack.dev.conf.js webpack开发环境配置
│ ├──webpack.prod.conf.js webpack生产环境配置
│
├──config webpack配置所用变量
│ ├──dev.env.js 开发环境
│ ├──index.js webpack配置文件
│ ├──prod.env.js 生产环境
│
├──src 源文件夹
├──static 静态文件夹
├──.babelrc babel编译配置
├──.editorconfig 在IDE中提供代码一致性
├──.postcssrc.js 通过JS插件装换样式的工具
├──index.html webpack插件HtmlWebpackPlugin生成html所用的模版
├──package.json 项目信息及依赖
默认情况下:
# 构建生产代码
$ npm run build
vue-webpack目录下会生成dist
文件夹
更改在config
文件夹下的index.js
index: path.resolve(__dirname, '../../myapp/dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../myapp/dist'),
最终代码输出目录为:
vue-practice
│
├──vue-webpack vue项目
│ │
│
├──myapp
│ │
│ ├──dist
│ │ ├──index.html
│ │ ├──static
这个时候:
$ cd myapp
$ npm install
# 启动node服务
$ node bin/www
在浏览器中访问:http://localhost:3000/
在vue-webpack
下安装以下模块
$ npm i cookie-parser -D
$ npm i body-parser -D
$ npm i request -D
在build文件夹下将安装的模块引入dev-server.js
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var request = require('request');
//找到下面的两个所在的位置
var app = express()
var compiler = webpack(webpackConfig)
//在上面的下面引入以下
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.all('/路由地址/*',function (req, res, next) {
//测试接口地址
var path = 'http://xxx.xxxx.com'+req.path;
let params =req.body;
console.log(params);
console.log(path);
request({
url: path,
method: "POST",
json: true,
body: params
}, function (error, response, body) {
if (error) {
console.log(error);
} else {
console.log(typeof body);
res.send(body)
}
});
})
5.使用axios进行AJAX请求
安装
$ npm i axios -D
写法:
axios.post('接口地址', {键值对对象})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});