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>安装VueRouter2npm 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.jsimport 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";//引用superagentvar request=require('superagent');//自定义判断元素类型JSfunction 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>保存后，我们在浏览器中，就可以看到渲染出来的列表了