从0到1构建vueSSR项目之路由的构建


Posted in Javascript onMarch 07, 2019

vue开发依赖的相关配置

Vue SSR 指南

今天先做客户端方面的配置,明天再做服务端的部分。

那么马上开始吧~

修改部分代码

脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码

//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

为什么要这么做?为什么要避免状态单例

main.js 是我们应用程序的「通用 entry」。

在纯客户端应用程序中,我们将在此文件中创建根 Vue 实例,并直接挂载到 DOM。

但是,对于服务器端渲染(SSR),责任转移到纯客户端 entry 文件。

main.js 简单地使用 export 导出一个 createApp 函数:

import Vue from 'vue';
Vue.config.productionTip = false;
import App from './App.vue';
//router store 实例
//这么做是避免状态单例
export function createApp() {

  const app = new Vue({
    //挂载router,store
    render: h => h(App)
  })
  //暴露app实例
  return { app };
}

添加Vue.config.js配置

webpack的入口文件有两个,一个是客户端使用,一个是服务端使用。

为何这么做?

今天只做客户端部分。

src/vue.config.js
  module.exports = {
    css: {
      extract: false//关闭提取css,不关闭 node渲染会报错
    },
    configureWebpack: () => ({
      entry: './src/entry/client'
    })
  }

根目录创建 entry 文件夹,以及webpack入口代码

mdkir entry
  cd entry
  创建 入口文件
    client.js 作为客户端入口文件。
    server,js 作为服务端端入口文件。 //先创建不做任何配置
  entry/client.js

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

    const { app } = createApp();

    app.$mount('#app');

路由和代码分割

官方说明的已经很清楚了,我就不做过多介绍了,下面直接展示代码

添加新路由,这里将存放pages的相关路由

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);
  //为什么采用这种做法。
  //如果以后有了别的大模块可以单独开个文件夹与pages平级
  //再这里导入即可。这样易于管理

  // 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 实例
//这么做是避免状态单例
export function createApp() {
+  const router = createRouter()
  const app = new Vue({
+    router,
    render: h => h(App)
  })
  //暴露app,router实例
  return { app, router };
}

更新 client.js

由于使用的路由懒加载,所以必须要等路由提前解析完异步组件,才能正确地调用组件中可能存在的路由钩子。

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

const { app, router } = createApp();

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的时间处理小结
Feb 24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解vuex状态管理模式
Nov 01 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 #Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 #Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 #Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 #Javascript
vue项目前端埋点的实现
Mar 06 #Javascript
vue2.0结合Element-ui实战案例
Mar 06 #Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python文件操作整理汇总
2014/10/21 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python全局变量用法实例分析
2016/07/19 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python中创建二维数组
2018/10/17 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
使用python制作一个解压缩软件
2019/11/13 Python
python字符串下标与切片及使用方法
2020/02/13 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
电信营业员自我评价分享
2014/01/17 职场文书
告知书格式
2015/07/01 职场文书
Python IO文件管理的具体使用
2022/03/20 Python