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

前言
创建应用

添加 Loading 效果
开始创建应用

多页面改造

总结

前言 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 中。

当我们创建应用，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.jsmodule.exports = {// 详见 https://cli.vuejs.org/zh/config/#pagespages: {index: {title: '首页',entry: 'src/main.js',},login: {title: '登录页',entry: 'src/login.js',},}}

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