Vue开发实践指南之应用入口

更新时间：2022年01月17日 15:50:56 作者：zhengxs2018

这篇文章主要给大家介绍了关于Vue开发实践指南之应用入口的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

Vue 开发实践为本人的最佳实践，非业内最佳，仅用于提供给各位做参考，这是系列文，但发布时间和内容不固定。

通常情况下一个 前端工程 只会导出一个 前端单页应用，而 main.js 就是这个应用的入口文件。

创建应用

默认情况下 src/main.js 是直接初始化一个 Vue 应用

import Vue from 'vue'

import App from './App.vue'
import router from './router'
import store from './store'

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

但在后台类项目中，应用在被用户可操作前，一定是需要登录的，这就导致很多时候，我们会套一个函数。

import Vue from 'vue'

import App from './App.vue'
import router from './router'
import store from './store'

function render() {
  new Vue({
    store,
    router,
    render: h => h(App)
  }).$mount('#app')
}

这样只要不调用 render 函数，那么应用就不会被创建，用户也就无法操作。

添加 Loading 效果

但这样会导致页面处于空白状态，为了友好，可以加一些加载动画效果.

打开 public/index.html 文件，将你的 Loading 效果放在 div#app 中。

<body>
  <div id="app">
    <!-- 这里写你的 Loading 动画 -->
  </div>
</body>

当我们创建应用，Vue 会自动清空 div#app 里面的内容，所以不需要关系初始化后的清理工作。

开始创建应用

当有了 Loading 动画之后，我们就可以去获取，如授权认证和菜单获取等操作。

import Vue from 'vue'

import App from './App.vue'
import router from './router'
import store from './store'

function render() {
  new Vue({
    store,
    router,
    render: h => h(App)
  }).$mount('#app')
}

async function main() {
  // 获取用户信息，没有就跳转到登录页
  // 获取菜单数据
}

main().then(render)

一旦数据准备完毕，应用就显示了，就不会出现应用一闪而过的问题了。

多页面改造

正常而言，一个前端工程只会存在一个前端应用，也就是比较熟悉的 SPA 模式，但有时候也需要导出多个 html 文件，每一个 html 文件都对应一个 Vue 实例，这种开发模式也被称为 MPA 模式。

但不管是 SPA 还是 MPA，对于工程而言，源码都是放在一起的，所以配置都是一样的。

Vue CLI 默认的应用类型是 SPA 单页应用，但在提供了 pages 字段。

// vue.config.js

module.exports = {
  // 详见 https://cli.vuejs.org/zh/config/#pages
  pages: {
    index: {
      title: '首页',
      entry: 'src/main.js',
    },
    login: {
      title: '登录页',
      entry: 'src/login.js',
    },
  }
}

添加登录页的应用入口和应用视图文件

 ├── src/
 │ ├── views/
+│ │   └── login/
+│ │       └── Login.vue  # 应用视图
+│ ├── login.js           # 应用入口  
 │ └── main.js
 ├── vue.config.js 
 └── package.json

创建视图文件

<template>
  <!-- src/login/Login.vue -->
  <div> This is login page</div>
</template>

创建应用入口

// /src/login.js

import Vue from 'vue'

import Login from './views/login/Login.vue'


new Vue({
  render: h => h(Login)
}).$mount('#app')

重启你的应用

# 启动之后，在当前项目项目地址后面加上 login.html 就可以看到新增的页面了
$ open http://localhost:8080/login.html

总结

到此这篇关于Vue开发实践指南之应用入口的文章就介绍到这了,更多相关Vue应用入口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于vue.js仿淘宝收货地址并设置默认地址的案例分析
这篇文章主要介绍了基于vue.js仿淘宝收货地址并设置默认地址的案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
vue实现新闻展示页的步骤详解
最近小编遇到这样的需求，要实现一个新闻展示页功能，刚接到这样的需求还真是一头雾水，不知从哪入手，今天小编通过实例代码给大家介绍下vue实现新闻展示页的步骤详解，感兴趣的朋友跟随小编一起看看吧
2019-04-04
vue实现两个组件之间数据共享和修改操作
这篇文章主要介绍了vue实现两个组件之间数据共享和修改操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
atom-design(Vue.js移动端组件库)手势组件使用教程
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
详解Vue template 如何支持多个根结点
这篇文章主要介绍了详解Vue template 如何支持多个根结点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
Vue组件层级关系详细分析
这篇文章主要介绍了Vue组件的层级关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Spring Boot/VUE中路由传递参数的实现代码
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下
2018-03-03
关于echarts 清空上一次加载的数据问题
这篇文章主要介绍了关于echarts 清空上一次加载的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue仿ios列表左划删除
这篇文章主要为大家详细介绍了vue仿ios列表左划删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
vue axios数据请求get、post方法及实例详解
axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下
2018-09-09