如果搜索出来的连接不能用,把连接中间的日期去掉就好了,最近更改了所有连接的名字

vue cli+webpack+vue router 前端开发

前端开发类 47℃

开发环境

vue 2.x webpack vuex axios vue-router

开发优化

vue-router 的自动化导入(中轻量级项目适合)

思路: 利用webpack的require.context 固定的页面目录结构

页面目录结构示例:
yourModule
— pages
— — yourModule.index.vue
— — yourModule.otherpage.vue
— index.routes.js

index.routes.js 示例

import getRoutes from '@/utils/get-routes.js'

// 获取页面的父文件'./pages' ,/.vue/ 需匹配的页面特征 两者可自定义
const r = require.context('./pages', true, /.vue/)

export default getRoutes(r)

获取模块routes.js示例

/**
 * 获取路径信息
 * @param {string} r 
 * @param {Array} titleArr 
 * @param {Array} iconArr 
 * @returns {Object}
 */

/**
 * constantRoutes Engineering
 * -----------------------------------------------------------------------
 */
export default function getRoutes(r) {
    const routeName = r.keys()[0].split('.')[1]
    let routeObj = {
        path: routeName,
        children: [],
        meta: {
            title: formatteComp(routeName),
            icon: ''
        }
    }
    r.keys().forEach((_key, _index) => {
        let _keyArr = _key.split('.')
        if (_key.indexOf('index') != -1) {
            routeObj.children.push({
                path: 'index',
                component: r(_key).default,
                meta: {
                    title: formatteComp(_keyArr[1]),
                    icon: ''
                }
            })
        } else {
            routeObj.children.push({
                path: formatteComp(_keyArr[2]),
                component: r(_key).default,
                meta: {
                    title: formatteComp(_keyArr[2]),
                    icon:  ''
                }
            })
        }
    });

    //格式化参数
    function formatteComp(rr) {
        return rr.replace(/\//, '')
    }
    return routeObj
}
/**
 * -------------------------------------------------------------------------------
 */

这是英文的导航名称,一般开发需要中文的名称与英文的目录名称对应,可以手动做个配置项。

按需加载 //懒加载 import

webpack 打包优化

思路:提前打包固定js

webpack.dll.js //自定义文件
webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js

#### vue mvvm 原理
1. 网上有好多说是用的document.creatDocumentFragment,但阅读源码是用的el.cloneNode(true),
vue/dist/vue.common.dev.js 这个文件中
2. vue数据响应,应是对象数组,直接的数组是不可以的
3. vue 的Object.defineProperty 对象属性设置,data的响应监听不支持新增属性
4. v-if 与 v-show 可以同时使用,并且 v-if 的优先级高于v-show

转载请注明:EZLOST » vue cli+webpack+vue router 前端开发

喜欢 (0)