vue项目启动逻辑

怼烎@ 2022-11-04 08:04 13阅读 0赞

登录流程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

路由处理逻辑

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 3][]

左边菜单渲染逻辑：根据路由的数据来循环渲染

路由数据格式

[
        path:'/index',
        component:()=>import('../index.vue'),
        meta:{xx:xxx},
        childen:[
            path:'/index1',
            component:()=>import('../index1.vue'),
            meta:{xx1:xxx1}
        ]
    ]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 4][]

登录的前端逻辑

点击登录按钮→验证规则→调vuex中的移步方法→这个方法中保存请求回来的token到本地和vuex→
    resolve()→回到登录页面这边控制页面跳转

数据类型转换的高级写法

字符串转数字
    如a='1'
    +a （转为数字1）
    !!a  （转为booean，true）
    !!+a (先转数字再转boolean)

scss的妙用

新建style.scss文件
    $menuColor:#343543
    :export{
        menutext:$menuColor
    }
    
    文件中使用
    
    import style '../../style.scss'
    computed:{
        mystyle(){
            return style 
        }
    }
    
    dom中
    <div color='mystyle.menutext'>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20221023/9c3b4427d8814a6f81f680f55b232793.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20221023/4ebc06fe6bbf4b30afad1cf1dd1bd427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 2]: /images/20221023/7509437aacde4cdbbf12f95a08e706fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 3]: /images/20221023/0e68bb52d0404925a76d315c127da810.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 4]: /images/20221023/1bb6667ac72d4a98a637db09d8964c0f.png