从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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
vue组件生命周期详解
Nov 07 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
文件上传类
2006/10/09 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
js常用函数 不错
2006/09/08 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python实现解数独程序代码
2017/04/12 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
骨干教师培训感言
2014/01/16 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
敬老院活动感想
2015/08/07 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
Golang Web 框架Iris安装部署
2022/08/14 Python