zoukankan      html  css  js  c++  java
  • vue 项目总结,以及对未来的理解,对性能方面的认知

    之前自己写了一个vue项目,因为没有经验,所以很多方面的提升做的不好,比如说路由、比如说ajax都没有封装,比如说业务逻辑和通用逻辑都混合在一起,导致大片大片重复的代码累积。忽悠忽悠没入门的前端感觉还是很好,各种崇拜。

    但是内在真的是看一眼,几斤几两呼之欲出。能够独立搭建项目好像其实是件越来越简单的事情、各种工具更加方便快捷、

    后来看了一个比较成熟的团队写的一个vue的项目,让我学习到了不少,有时候自己独立做一个项目其实很累人,有可能还吃力不讨好的那种,

    毕竟同一个世界同一个梦想,每一个公司都不一样,每一个项目赶着上线都差不太多。

    以下是我的总结:

      1、路由方面。

        路由我是放index.js一直放下写,其实是自己不懂得灵活变通。更好的写法是业务和通用分开,路由分开,更加模块化还是根据功能需要你自己根据实际需求分析export出去,然后最后都引人index.js,

        以下是我随意中看到的一些人为比较好的方法,进行组织路由

      (1)分割路由

      首先为了方便我们管理,我们把router目录下的文件分割为以下结构

    router // 路由文件夹
    |__index.js // 路由组织器:用来初始化路由等等
    |__common.js // 通用路由:声明通用路由
    |__modules // 业务逻辑模块:所以的业务逻辑模块
    |__index.js // 自动化处理文件:自动引入路由的核心文件
    |__home.js // 业务模块home:业务模块
    |__a.js // 业务模块a

    (2)modules文件夹中处理业务模块

    modules文件夹中存放着我们所有的业务逻辑模块,至于业务逻辑模块怎么分,我相信大家自然有自己的一套标准。我们通过require.context()接下来编写自动化的核心部分index.js

    const files = require.context('.', true, /.js$/)

    console.log(files.keys()) // ["./home.js"] 返回一个数组
    let configRouters = []
    /**
    * inject routers
    */
    files.keys().forEach(key => {
    if (key === './index.js') return
    configRouters = configRouters.concat(files(key).default) // 读取出文件中的default模块
    })
    export default configRouters // 抛出一个Vue-router期待的结构的数组

    自动化部分写完了,那业务组件部分怎么写? 这就更简单了

    import Frame from '@/views/frame/Frame'
    import Home from '@/views/index/index'
    export default [
    // 首页
    {
    path: '/index',
    name: '首页',
    redirect: '/index',
    component: Frame,
    children: [ // 嵌套路由
    {
    path: '',
    component: Home
    }
    ]
    }
    ]

    (3)common路由处理 我们的项目中有一大堆的公共路由需要处理比如404阿,503阿等等路由我们都在common.js中进行处理。

    export default [
    // 默认页面
    {
    path: '/',
    redirect: '/index',
    hidden:true
    },
    // 无权限页面
    {
    path: '/nopermission',
    name: 'nopermission',
    component: () => import('@/views/NoPermission')
    },
    // 404
    {
    path: '*',
    name: 'lost',
    component: () => import('@/views/404')
    }
    ]

    (4)路由初始化 这是我们的最后一步了,用来初始化我们的项目路由

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import RouterConfig from './modules' // 引入业务逻辑模块
    import CommonRouters from './common' // 引入通用模块
    Vue.use(VueRouter)
    export default new VueRouter({
    mode: 'history',// 需要服务端支持
    scrollBehavior: () => ({ y: 0 }),
    routes: RouterConfig.concat(CommonRouters)
    })

    按照这种结构来划分模块的好处。正常的情况是我们创建完home.js要手动的把这个模块import到路由文件声明的地方去使用。但是有了上面的index.js,在使用的时候你只需要去创建一个home.js并抛出一个符合VueRouter规范的数组,剩下的就不用管了。import RouterConfig from './modules' // 引入业务逻辑模块 已经帮你处理完了。另外扩展的话你还可以把hooks拿出来作为一个单独文件。
     
    2.全局组件统一声明
    1. 组织结构

      

    components // 组件文件夹
    |__xxx.vue // 其他组件
    |__global // 全局组件文件夹
    |__index.js // 自动化处理文件
    |__demo.vue // 全局demo组件

      

    1. global处理

    import Vue from 'vue'
    let contexts = require.context('.', false, /.vue$/)
    contexts.keys().forEach(component => {
    let componentEntity = contexts(component).default
    // 使用内置的组件名称 进行全局组件注册
    Vue.component(componentEntity.name, componentEntity)
    })

      

    1. 使用和说明

    直接在app.js引用这个文件就行,我之前看到有些人做法是使用组件名去区分全局组件和普通组件,然后通过正则去判断需不需要全局注册。我是直接把全局的组件放到global文件夹下,然后组件的注册名称直接使用component.name。至于使用哪种方式就比较看个人了

      

    还有别的方面,现在就不多叙述了。我自己也要消化消化,,。

  • 相关阅读:
    hdu 1042 N!
    hdu 1002 A + B Problem II
    c++大数模板
    hdu 1004 Let the Balloon Rise
    hdu 4027 Can you answer these queries?
    poj 2823 Sliding Window
    hdu 3074 Multiply game
    hdu 1394 Minimum Inversion Number
    hdu 5199 Gunner
    九度oj 1521 二叉树的镜像
  • 原文地址:https://www.cnblogs.com/qingcui277/p/10118015.html
Copyright © 2011-2022 走看看