开发环境

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
}
/**
 * -------------------------------------------------------------------------------
 */

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

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