欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

從0到1構(gòu)建vueSSR項(xiàng)目之路由的構(gòu)建

vue開發(fā)依賴的相關(guān)配置

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、寶豐ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的寶豐網(wǎng)站制作公司

Vue SSR 指南

今天先做客戶端方面的配置，明天再做服務(wù)端的部分。

那么馬上開始吧~

修改部分代碼

腳手架生成的代碼肯定是不適合我們所用的 所以要修改一部分代碼

//App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  html,body,#app,#app>*{
    width: 100%;
    height: 100%;
  }
  body{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    font-size: 16px;
    margin: 0;
    overflow-x: hidden;
  }

  img{
    width: 200px;
  }
</style>

修改main.js

為什么要這么做？為什么要避免狀態(tài)單例

main.js 是我們應(yīng)用程序的「通用 entry」。

在純客戶端應(yīng)用程序中，我們將在此文件中創(chuàng)建根 Vue 實(shí)例，并直接掛載到 DOM。

但是，對(duì)于服務(wù)器端渲染(SSR)，責(zé)任轉(zhuǎn)移到純客戶端 entry 文件。

main.js 簡(jiǎn)單地使用 export 導(dǎo)出一個(gè) createApp 函數(shù)：

import Vue from 'vue';
Vue.config.productionTip = false;
import App from './App.vue';
//router store 實(shí)例
//這么做是避免狀態(tài)單例
export function createApp() {

  const app = new Vue({
    //掛載router，store
    render: h => h(App)
  })
  //暴露app實(shí)例
  return { app };
}

添加Vue.config.js配置

webpack的入口文件有兩個(gè)，一個(gè)是客戶端使用，一個(gè)是服務(wù)端使用。

為何這么做？

今天只做客戶端部分。

  src/vue.config.js
  module.exports = {
    css: {
      extract: false//關(guān)閉提取css,不關(guān)閉 node渲染會(huì)報(bào)錯(cuò)
    },
    configureWebpack: () => ({
      entry: './src/entry/client'
    })
  }

根目錄創(chuàng)建 entry 文件夾，以及webpack入口代碼

  mdkir entry
  cd entry
  創(chuàng)建 入口文件
    client.js 作為客戶端入口文件。
    server,js 作為服務(wù)端端入口文件。 //先創(chuàng)建不做任何配置
  entry/client.js

    import { createApp } from '../main.js';

    const { app } = createApp();

    app.$mount('#app');

路由和代碼分割

官方說明的已經(jīng)很清楚了，我就不做過多介紹了，下面直接展示代碼

添加新路由，這里將存放pages的相關(guān)路由

src/pages/router/index.js

/**
 *
 * @method componentPath 路由模塊入口
 * @param {string} name 要引入的文件地址
 * @return {Object}
 */
function componentPath (name = 'home'){
  return {
    component:() => import(`../${name}/index.vue`)
  }
}

export default [
  {
    path: '/home',
    ...componentPath(),
    children: [
      {
        path: "vue",
        name: "vue",
        ...componentPath('home/vue')
      },
      {
        path: "vuex",
        name: "vuex",
        ...componentPath('home/vuex')
      },
      {
        path: "vueCli3",
        name: "vueCli3",
        ...componentPath('home/vueCli3')
      },
      {
        path: "vueSSR",
        name: "vueSSR",
        ...componentPath('home/vueSSR')
      }
    ]

  }
]

src/router.config.js作為路由的總配置 易于管理

//路由總配置
  import Vue from 'vue';
  import VueRouter from 'vue-router';

  Vue.use(VueRouter);
  //為什么采用這種做法。
  //如果以后有了別的大模塊可以單獨(dú)開個(gè)文件夾與pages平級(jí)
  //再這里導(dǎo)入即可。這樣易于管理

  // pages
  import pages from './pages/router';

  export function createRouter() {
    return new VueRouter({
      mode: 'history',
      routes: [
        {
          path: "*",
          redirect: '/home/vue'
        },
        ...pages
      ]
    })
  }

更新main.js

import Vue from 'vue';
Vue.config.productionTip = false;
import App from './App.vue';
+ import { createRouter } from './router.config.js'
//router store 實(shí)例
//這么做是避免狀態(tài)單例
export function createApp() {
+  const router = createRouter()
  const app = new Vue({
+    router,
    render: h => h(App)
  })
  //暴露app,router實(shí)例
  return { app, router };
}

更新 client.js

由于使用的路由懶加載，所以必須要等路由提前解析完異步組件，才能正確地調(diào)用組件中可能存在的路由鉤子。

// client.js
import { createApp } from '../main.js';

const { app, router } = createApp();

router.onReady( () => {
  app.$mount('#app');
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：從0到1構(gòu)建vueSSR項(xiàng)目之路由的構(gòu)建
當(dāng)前路徑：http://www.chinadenli.net/article16/gjocdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、搜索引擎優(yōu)化、服務(wù)器托管、微信公眾號(hào)、域名注冊(cè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司