1. 組件嵌套

將單文件組件組合在一起有兩種方式，一種是嵌套方式，一種用路由的方式。嵌套的方式代碼如下：
如下,假設(shè)組件A中要嵌入組件B:

<template>

    // 在A組件中使用B組件
    <B_zujian></B_zujian>
</template>


<script>
// 先導(dǎo)入B組件，其中'@'表示src目錄，組件后的vue擴(kuò)展名可以省略
import B_zujian from '@/components/B_zjian'

export default{
    name:'A_zujian',
    data:function(){
        return {
            iNum:0
        }
    },
    // 接著在components屬性選項(xiàng)中注冊
    components:{
        B_zujian
    }
}


</script>

2. 路由

可以通過路由的方式在一個(gè)組件中加載其他組件，要使用路由功能，需要在main.js中先導(dǎo)入路由的包,然后在組件對象中還需要包含它。

import router from './router'

new Vue({
    .....
    router
})

組件中通過路由標(biāo)簽來加載其他的路由

<!-- 路由標(biāo)簽 -->
<router-view></router-view>

<!-- 簡寫成下面一個(gè)標(biāo)簽的形式： -->
<router-view/>

路由標(biāo)簽里面加載哪個(gè)組件呢？在router文件中的index.js文件中設(shè)置

import Vue from 'vue'
import Router from 'vue-router'

// 導(dǎo)入對應(yīng)組件 '@' 表示src文件夾
import MainList from '@/components/MainList'
import UserList from '@/components/UserList'
import UpDate from '@/components/UpDate'

// 使用路由模塊的固定寫法
Vue.use(Router)

// path為'/'表示路由默認(rèn)加載的組件
// 這些路由默認(rèn)設(shè)置的是App.vue中的路由標(biāo)簽加載的組件
export default new Router({
  routes: [
    {
      path: '/',
      name: 'MainList',
      component: MainList
    },
    {
      path: '/user',
      name: 'UserList',
      component: UserList
    },
    {
      path: '/update',
      name: 'UpDate',
      component: UpDate
    }
  ]
})

通過鏈接可以切換路由標(biāo)簽里面對應(yīng)的組件，鏈接的地址是上面index.js文件中定義的path值，不過鏈接標(biāo)簽是"router-link",鏈接地址用'to'來定義：

<router-link to="/">股票信息</router-link>
<router-link to="/user">個(gè)人中心</router-link>

鏈接地址中可以傳遞參數(shù)，格式如下：

// name對應(yīng)的是路由中定義的一個(gè)path對應(yīng)的name屬性
<router-link :to='{name:"UpDate",params:{code:item.code}}'>

有時(shí)候需要在組件的js中跳轉(zhuǎn)頁面，也就是改變路由，改變路由有下面這些方式：

// 當(dāng)前頁面重新加載
this.$router.go('/user');

// 跳轉(zhuǎn)到另外一個(gè)路由
this.$router.push({path:'/user'});

// 獲取當(dāng)前的路由地址
var sPath = this.$route.path;

3. 數(shù)據(jù)請求及跨域

• 數(shù)據(jù)請求
  數(shù)據(jù)請求使用的是ajax，在vue中使用的axios.js，這個(gè)文件可以在index.html文件中引入，也可以作為模塊導(dǎo)入，在main.js中導(dǎo)入這個(gè)模塊，然后將它綁定在Vue類的原型上。

import axios from 'axios'
Vue.prototype.axios = axios

在組件的js代碼中使用axios：

this.axios({......})

• 跨域請求
  vue的自動(dòng)化工具提供了開發(fā)的服務(wù)器，我們在這個(gè)服務(wù)器環(huán)境下開發(fā)，改動(dòng)代碼可以馬上更新顯示，錯(cuò)誤了還有代碼提示，非常方便，但是，如果我們組件中需要數(shù)據(jù)，而且數(shù)據(jù)在另一個(gè)服務(wù)器環(huán)境下運(yùn)行，我們就需要跨域請求數(shù)據(jù)，vue工具中可以使用代理來跨域請求，設(shè)置的方法是：在項(xiàng)目的config文件夾中，打開index.js,在proxyTable一項(xiàng)中設(shè)置：

// 'http://localhost:7890' 表示的是要跨域請求的地址
// 如果請求的地址是：'http://localhost:7890/index_data'
// 在請求時(shí)就可以寫成: '/apis/index_data'

'/apis': {
    target: 'http://localhost:7890', 
    changeOrigin: true,
    pathRewrite: {
        '^/apis': ''
    }              
}

4. 打包上線

項(xiàng)目開發(fā)完成后，需要把請求數(shù)據(jù)的代理地址改成和提供數(shù)據(jù)的服務(wù)器在同一個(gè)域的地址，因?yàn)樽罱K會(huì)把前端代碼放在和數(shù)據(jù)在同一個(gè)域的服務(wù)器下面運(yùn)行。

// 將下面的請求地址
'/apis/index_data'
// 改成
'/index_data'

改完請求地址后，就可以將代碼打包，生成最終可以上線的單文件結(jié)構(gòu)：

// 打開終端，ctrl+c停掉開發(fā)服務(wù)器，執(zhí)行下面的命令

npm run build

自動(dòng)化程序會(huì)將打包的文件自動(dòng)生成到項(xiàng)目的dist文件夾中。
將這些文件拷貝到提供數(shù)據(jù)服務(wù)的服務(wù)器的靜態(tài)目錄文件夾中，完成最終的上線.