Skip to content
A demo based on vue.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
myapp
vue-webpack
.gitignore
README.md

README.md

vue-practice

Node: v6.10.0

vue-cli: v2.8.2

$ cd vue-webpack
$ npm install

# develop
$ npm run dev

# production
$ npm run build

使用vue开发项目梳理及需要掌握的知识点

过程

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文件夹

3.更改生产代码输出目录

更改在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/

4.开发环境下与测试接口进行数据交互

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);
  });
You can’t perform that action at this time.