目录
  • 前言
  • 创建应用
    • 添加 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 中。

      <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

      总结

      声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。