Vue2+VueRouter2+webpack 构建项目实战

首发地址：http://blog.csdn.net/fungleo/article/details/53202276
vue-cli构建项目
vue-cli是vue的脚手架工具，首先安装vue-cli命令：npm install -g vue-cli
下面，用vue-cli构建项目 ，进入myworkspace,shift+右键打开命令窗口，执行命令：vue init webpack vuedemo,然后一直回车就可以，最后我们的项目就构建成功了，接下来依次执行以下三个命令
1：cd vuedemo
2：npm install
3：npm run dev
通过以上命令 我们就实现了新建一个vue+webpack的项目。在运行了npm rundev之后，会自动打开一个浏览器窗口，就可以看到实际效果了。
项目目录以及文件结构

 如上，基本上就是这么个情况。重要的还是src文件夹

如上图所示，这是src文件夹下面的初始情况，里面有一些实例代码，比如它把logo放在assets文件夹里面。
components目录里面放了一个演示的组件文件
App.vue是项目的入口文件。当然，我们需要改造，改造成我们可以使用的样子
main.js这是项目的核心文件。全局的配置都在这个文件里面配置。
下面 ，我们开始来制作页面
这里，我们假设我们的项目是做俩页面，一个列表页，一个内容页。列表页有分页等，内容页面展示。
因此，我们需要两个模板文件。
我们在src/pages目录下面新建两个文件，index.vue和content.vue
index.vue

<template>
  <div>index</div>
</template>                  
content.vue
<template>
  <div>content</div>
</template>
安装VueRouter2
npm install vue-router -D
那为什么我后面加一个-D的参数呢？这个是为了让我们安装的vue-router这个插件写入到package.json配置文件
中，以便于下次再其他地方安装的时候，可以一并安装进去。否则还得再安装一遍。
配置main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//引入入口文件
import App from './App'
//引入路由配置文件
import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:(h)=>h(App)
})
配置App.vue文件
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    components:{}
  }
</script>
<style>
  @import "./assets/css/vuedemo.css";
</style>
最后配置router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/pages/index.vue'
import content from '@/pages/content.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      component: index
    },
    {
      path: '/content',
      component: content
    }
  ]
})
关闭格式检查插件eslint
打开根目录下面的build/webpack.base.conf.js文件，找到含有eslint的代码，注释掉。
最后执行npm run dev运行项目
接通api，先渲染个列表
我们打开src/pages/index.vue 修改如下
<template>
  <div>
    <h1 class="logo"cnode js Api Test></h1>
    <ul class="list">
      <li v-for="item in lists" v-text="item.title"></li>
    </ul>
  </div>
</template>
<script>
  export default{
      data(){
          return {
              lists:[{
                  id:1,
                title:"test title 1"
              },{
                  id:2,
                title:"test title 2"
              }]
          }
      }
  }
</script>
调用api.js 在assets下新建文件api.js并在main.js引入并应用

//引入API文件
import api from '@/assets/api.js'
//将API方法绑定到全局
Vue.prototype.$api=api
安装superagent组件
要请求接口，就必须有相应的组件。如果你使用过jquery,应该熟悉其中的ajax，当然，在vue中，我们就
不用考虑jquery了。我们使用superagent这个组件。安装非常简单：npm install superagent -D进行安装
编写api.js

//配置api接口地址
var root="https://cnodejs.org/api/v1";
//引用superagent
var request=require('superagent');
//自定义判断元素类型JS
function toType(obj){
  return({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
//参数过滤函数
function filter_null(o){
  for(var key in o){
    if(o[key]==null){
      delete o[key]
    }
    if(toType(o[key])=='string'){
      o[key]=o[key].trim();
      if(o[key].length==0){
        delete o[key]
      }
    }
  }
  return o;
}
/*
* 接口处理函数
* 这个函数每个项目都不一样，我现在调整的是适用于https://cnodejs.org/api的接口，如果是其他接口
* 需要根据接口的参数进行调整。参考说明文档地址：
 https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
* */
function _api_base(method,url,params,success,failure){
  var r=request(method,url).type('text/plain');
  if(params){
    params=filter_null(params);
    if(method==="POST" || method==="PUT"){
      if(toType(params)=="object"){
          params=JSON.stringify(params)
      }
      r=r.send(params)
    }else if(method=="GET" || method==="DELETE"){
      r=r.query(params)
    }
  }
  r.end(function(err,res){
    if(err){
      alert("api error,HTTP CODE:"+res.status)
      return;
    }
    if(res.body.success==true){
      if(success){
        success(res.body)
      }
    }else{
      if(failure){
        failure(res.body)
      } else{
        alert('error: '+JSON.stringify(res.body))
      }
    }
  })
}
//返回在vue模板中的调用接口
export default{
   get:function(url,params,success,failure){
     return _api_base("GET",root+"/"+url,params,success,failure)
   },
  post:function(url,params,success,failure){
     return _api_base("POST",root+"/"+url,params,success,failure)
  },
  put:function(url,params,success,failure){
    return _api_base("PUT",root+"/"+url,params,success,failure)
  },
  delete:function (url,params,success,failure) {
     return _api_base("DELETE",root+"/"+url,params,success,failure)
  }
}

编辑 src/page/index.vue文件，代码如下：

<template>
  <div>
    <h1 class="logo"cnode js Api Test></h1>
    <ul class="list">
      <li v-for="item in lists" v-text="item.title"></li>
    </ul>
  </div>
</template>
<script>
  export default{
      data(){
          return {
              lists:[]
          }
      },
    created(){
       this.get_data()
    },
    methods:{
        get_data:function(params){
            var v=this;
            if(!params)params={}
            //我们这里用全局绑定的$api方法来获取数据，方便吧
          v.$api.get('topics',params,function(r){
              v.lists=r.data;
          })
        }
    }
  }
</script>

保存后，我们在浏览器中，就可以看到渲染出来的列表了