vue的脚手架工程

1、Vue的组件

在vue中只要一个index.html，里面只有一个id为app的div标签，内部的具体内容通过.vue类型的组件(component)填充。这个div标签在main.js中被Vue对象托管

new Vue({
  el: '#app',
  components: {App},
  template: ''
});

组件之间可以相互引用，被引用的组件就是子组件，引用它的组件就是父组件。通过这种父子组件的关系，Vue可以组合显示出各种各样的页面，并且由于组件可以重复使用，所以大大减少的冗余代码。

2、Vue的路由

关于Vue的组件的使用这里只是简单介绍，详细信息不再赘述。Vue的脚手架搭建出来的项目也是可以部署在服务器上被访问到的，那么也就可以在地址栏输入地址获取不同页面。想要做到这一点，需要为脚手架工程安装路由,在项目工程目录下执行以下命令（注意：==不论是npm还是cnpm，在一个Vue工程中，不管是安装什么东西，请一直使用其中一种执行==）

cnpm install vue-router --save

安装了路由管理器(router)后，需要在==main.js==中引入、使用和配置

import Vue from 'vue'
import App from './App'
//引入路由管理器
import VueRouter from "vue-router"
//引入组件
import Home from "./components/Home";
import Hello from "./components/Hello";
import Login from "./components/Login";
import BlogView from "./components/BlogView";
import AddBlog from "./components/AddBlog";

Vue.config.productionTip = false;
//使用路由管理器
Vue.use(VueRouter);

//配置路由
const router = new VueRouter({
  routes: [
    //path表示地址栏内输入的地址 name表示路由的名字 component表示显示的组件  
    {path: "/", name: "home", component: Home},
    {path: "/blog/list", name: "blog_view", component: BlogView},
    {path: "/blog/add", name: "blog_add", component: AddBlog},
    {path: "/hello", name: "hello", component: Hello},
    {path: "/login", name: "login", component: Login},
  ],
  mode: "history"//去掉浏览器地址栏中出现的#号
});

new Vue({
  router,//使用路由
  el: '#app',
  components: {App},
  template: ''
});

配置完main.js后，最后还需要在App.vue中启用路由标签，这样就能实现根据路由（地址栏地址）显示视图（组件）的效果

路由只是前端资源的获取，想要从后端获得数据，还需要通过http请求和接口。

3、Vue通过接口请求后端数据

3.1、 跨域访问

首先要明确一点，前端工程和后端工程是两个不同的工程，它们分别部署。所以前端在请求后端数据的时候，属于跨域访问，受限于同源策略，这种访问会被浏览器禁止，所以我们要设置一个代理，绕过同源策略向后端发送请求。在==index.js==中设置代理：

 // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
       // /api指向下面的target 
      '/api': {
        // target就是后端项目的接口  根据实际情况配置  
        target: "http(s)://ip地址:端口/项目名(根据实际情况)",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

3.2、安装配置axios

在Vue中推荐我们使用axios发送ajax请求，要想使用axios首先还是在Vue脚手架工程目录下运行命令,安装axios

cnpm install axios

安装完axios后，在==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'
//引人axios
import axios from "axios"

Vue.config.productionTip = false;

//axios的使用
Vue.prototype.axios = axios;  //全局axios对象设置
axios.defaults.headers.post['Content-Type'] = 'application/json';

new Vue({
  el: '#app',
  components: {App},
  template: ''
});

配置了全局的axios后，在所有组件中就可以直接使用，不需要重复引入。

3.3、使用axios

在组件中使用axios：

这样博客的数据就能从后端请求过来，通过Vue渲染到组件，展示出来。axios向后端传参的时候需要注意一点：

在上面的例子中，发送带参数的请求其实和jquery没什么太大的区别，但是axios和jquery对参数的封装不同，在jquery中数据可以用对应类型变量一个个接收，也可以通过对象接收；而然对于==POST==请求，==axios发送出去的数据必须使用对象接收，而且要求后端使用json格式解析，如果是springMVC或者springboot，那就必须使用一个对象或者Map集合并且加上@RequestBody注解接收参数==，对于==GET==请求，==必须在参数前面加上@RequestParam==。

4、总结

前后端分离，后端提供接口，前端请求获得数据后渲染到视图上，这样前后端就实现了解耦合。只要按照约定的格式和接口交换数据，那么前后端之间就可以自由组合，完全不会影响到整个项目的运行。比如需要更新前端的界面设计，只需要修改前端代码，在修改完成后替换现有前端工程，后端完全不需要做任何更改。而且Vue工程本身的组件也是可以替换修改自由组合，极大地提高了前端页面的自由度。