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:

<template>    <div>        welcome        <router-link to="/home">go home</router-link>    </div></template><script>    export default{        name: 'welcome'    }</script>

home.vue:

<template>    <div>        想要吃的水果        <ul>            <li v-for="x in list">                {{x.name}}            </li>        </ul>    </div></template><script>    export default{        name: 'home',        data(){            return {                list:[                    {name: '苹果'},                    {name: '香蕉'},                    {name: '梨子'}                ]            }        }    }</script>

②改造入口组件app.vue

<template>  <div id="app">    <router-view></router-view>  </div></template><script>export default {  name: 'app'}</script>

③引入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部分改为

<script>    export default{        name: 'home',        data(){            return {                list:[]            }        },        mounted:function(){            var _this = this;            this.$http.get('http://localhost:3030/getList.json').then(function(result){                if(result.body.code == 0){                    _this.list = result.body.list;                }            });        }    }</script>

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

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

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