vue2+webpack+express 简单入门：从前端到后台

本文只是简单的入门，介绍怎样快速建立项目，利用路由切换页面；写接口，前端调用接口等。

默认全局已安装：

• node
• npm
• vue-cli

1、进入一个空文件夹，初始化名为vue-demo项目。

2、进入项目文件内，下载基础依赖包以及vue-router（路由），vue-resource（vue封装的ajax请求）

看到这个页面就好了。

顺便说一句，【npm install 包名 --save-dev】表示下载包资源，并且把该包的版本号记录至package.json内。对应的删除语句是【npm unstall 包名 --save-dev】。

3、添加路由功能

①在src下新建pages文件夹，并新建两个组件页面，welcome.vue 和 home.vue

welcome.vue:

home.vue:

②改造入口组件app.vue

③引入vue-router

main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import App from './App.vue'
import Welcome from './pages/welcome.vue'
import Home from './pages/home.vue'

const router = new VueRouter({
    routes: [
        {path: '/',component: Welcome},
        {path: '/home',component: Home}
    ]
})

new Vue({
    router,
  el: '#app',
  render: h => h(App)
})

至此，打开之前的页面就会显示：

点击go home：

4、利用express书写接口，前端去调用接口
①在vue-demo目录下新建server文件夹，并新建app.js 放置接口方法

app.js:

var express = require('express');
var app = express();

//解决跨域
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

app.get('/getList.json',function(req,res){

    //返回的json对象
    var obj = {
        code: 0,
        list: [
            {name: '苹果'},
            {name: '香蕉'},
            {name: '梨子'}
        ]
    };

    res.jsonp(obj);
});

//启动服务，监听一个端口，不要和页面的端口
app.listen(3030);

②在main.js引入vue-resource。

import VueResource from ‘vue-resource’

Vue.use(VueResource)

③调用接口。

home.vue的script部分改为

④这点很关键，运行接口。

进入server目录下，在cmd中键入【node app.js】

此时看到页面已请求接口：