vue+vueRouter+webpack 搭建项目

前段时间写了一篇搭建vue项目的博客，个人感觉写的不好，也不是很清晰，所以重新整理了一下，

加以图片辅助，看起来应该更容易看懂。

首先，确保个人已经安装了node、webpack、vue以及vue的脚手架

由于国外环境下载慢，大家可以使用淘宝镜像。命令：

npm install --registry=https://registry.npm.taobao.org 
npm install -g cnpm --registry=https://registry.npm.taobao.org

第一个不行就用第二个

安装node：

    自行去node官网下载安装

安装webpack，命令：

cnpm install -g webpack

安装vue，命令：

cnpm install vue

安装vue脚手架，命令：

npm install -g vue-cli   

安装完后就可以搭建自己的第一个vue项目了

1、创建一个基于webpack的项目（projectModel为项目文件夹名）。命令：

vue init webpack projectModel

成功后应该会出现以下情况

其中，需要个人定义项目名（不能有大写字母，只能是英文字母），这里是projectmodel，

以及作者（可以是中英文）、是否安装路由（router，个人建议默认安装，Y），

是否安装代码规范检测（ESlint，个人建议不安装，N，安装了console会有一堆警告）。

安装完以后，个人建议去config文件夹下的inde.js文件，找到autoOpenBrowser，设为true，

这样启动项目浏览器就会自动打开页面了，不用手动输入地址了。

这里还需要额外安装UI框架以及http库

安装UI框架，二者选其一，看公司要求。

iview官网：点击前往

element-ui官网：点击前往

命令：

cnpm install iview 
cnpm install element-ui 

安装完后，将项目文件结构稍作改变，以下是我自己的项目结构，其实也没改动什么

框架搭好了，最让新手迷茫的就是你怎么发请求，怎么页面传参，怎么跳转路由，下面我也做部分介绍。

首先，个人定义了一个用于存放所有前后台对接接口的文件path.js，请看上图，

里面部分代码：

'use strict';
let initPath = '';
let path = {
  modular_one: {
    interface_one: initPath + 'Here is the interface(接口位置)',  /*modular_one模块接口1*/
    interface_two: initPath + 'Here is the interface(接口位置)',  /*modular_one模块接口2*/
  },
  modular_two: {
    interface_one: initPath + 'Here is the interface(接口位置)',  /*modular_one模块接口1*/
    interface_two: initPath + 'Here is the interface(接口位置)',  /*modular_two模块接口2*/
  },
};
export default path

个人将接口也分了板块，每个板块下面存放该板块下页面的请求接口，这样也是为了查找方便，修改方便。

其次，再定义一个用于存放所有前后台对接请求的文件reqHttpUrl.js，请看上图，

        里面部分代码：

'use strict'
import axios from 'axios'
import PATHURL from './path'
function getReqAjax (_url, _data, _success, _error) {
  axios.get(_url, {
    params: _data
  })
    .then(function (response) {
      if(response.status !== 200){
        if(_error){ _error(response)}
        if(response.status === 403){
          window.location.href = response
        }
      }else{
        _success(response)
      }
    })
    .catch(function(error){
      if(_error){_error(error)}
    })
}

function postReqAjax (_url, _data, _success, _error) {
  axios({
    method: 'post',
    url: _url,
    data: _data,
    contentType: 'application/json'
  })
    .then(function (response) {
      if(response.status !== 200){
        if(_error){_error(response)}
        if(response.status === 403){
          window.location.href = response
        }
      }else{
        _success(response)
      }
    })
    .catch(function(error){
      if(_error){_error(error)}
    })
}

let sendAjax = {
  modular_one: {
    interface_one: function (data, _success) {
      getReqAjax(PATHURL.address.interface_one, data, function (msg) { _success(msg) }, function (msg) {})
    },
    interface_two: function (data, _success) {
      getReqAjax(PATHURL.address.interface_two, data, function (msg) { _success(msg) }, function (msg) {})
    },
  },
  modular_two: {
    interface_one: function (data, _success) {
      getReqAjax(PATHURL.address.interface_one, data, function (msg) { _success(msg) }, function (msg) {})
    },
    interface_two: function (data, _success) {
      getReqAjax(PATHURL.address.interface_two, data, function (msg) { _success(msg) }, function (msg) {})
    },
  },
};
export default sendAjax

首先引入axios组件，自行封装了一下get和post请求，下方就是请求的方法，个人也是分为相关的板块，方便管理。

接口有了，请求有了，剩下就是路由了，路由页面搭建的时候就有，请看上图：

个人部分代码：

import Vue from 'vue'
import Router from 'vue-router'
import page_one from '@/components/modular_one/page_one.vue'
import page_two from '@/components/modular_one/page_two.vue'
import page_three from '@/components/modular_two/page_three.vue'
import page_four from '@/components/modular_two/page_four.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {path: '/page_one', name: 'page_one', component: page_one, children:[]},
    {path: '/page_two', name: 'page_two', component: page_two, children:[]},
    {path: '/page_three', name: 'page_three', component: page_three, children:[]},
    {path: '/page_four', name: 'page_four', component: page_four, children:[]},
    {path: '*', redirect: '/page_one'}
  ]
})

接下来，就是使用了。

假如我在page_one页面，想分别跳转到其他页面，做法：

page_one页面部分代码：

里面的三个点击事件就是跳转页面的方法，是通过路由的改变来改变页面的。

方法：this.$router.push()

里面可以跟2个参数，路由path以及参数query

path的值就是路由inde.js文件里面个人自定义的值，注意做到路由页面一一对应

点击进入page_two页面，当参数为空或者没有query的时候，地址栏是这样的

点击进入page_three页面，当传入参数的时候，地址栏是这样的

这就是路由跳转以及传参。

接下来就是发送请求了，上面已经将页面代码贴出来了，下面介绍使用方法：

首先，在你需要发送请求的方法所在的页面引入请求文件，注意路径

import sendAjax from '../../assets/libs/reqHttpUrl'

在页面引用了reqHttpUrl.js文件后，就能在方法里面调用上面封装的请求了

比如，我调用

sendAjax.modular_one.interface_one({name:'参数name'},function (res) {})

解析：这里会自行找到sendAjax.modular_one.interface_one方法，也就是reqHttpUrl.js

文件里面的sendAjax下面的modular_one下面的interface_one方法，里面是get请求

PATHURL.address.interface_one就是请求的接口，这个接口又会去找到path.js文件，

最终找到path下面的modular_one下面的interface_one，里面的字符串就是接口。

至此，整个项目从搭建到页面传参路由跳转再到请求发送都已经实现，以上是个人的项目结构，不代表你们，

你们也可以自行定义项目结构，只是我个人觉得这样接口、请求分开方便管理。

希望这篇文章对初学者有所帮助