从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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
多种方式实现js图片预览
Dec 12 Javascript
JS判断数组那点事
Oct 10 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JS校验与最终登陆界面功能完整示例
Jan 13 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
星际流派综述
2020/03/04 星际争霸
打造计数器DIY三步曲(中)
2006/10/09 PHP
php xml 入门学习资料
2011/01/01 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
python实发邮件实例详解
2019/11/11 Python
Python requests模块cookie实例解析
2020/04/14 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
2014新年寄语
2014/01/20 职场文书
小学运动会班级口号
2014/06/09 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
2016国培学习心得体会
2016/01/08 职场文书