Vue应用入口
zhengxs2018 人气:0前言
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
总结
加载全部内容