export function Prop(options) { if (options === void 0) { options = {}; } return function (target, key) { applyMetadata(options, target, key); createDecorator(function (componentOptions, k) { ; (componentOptions.props || (componentOptions.props = {}))[k] = options; })(target, key); }; }
applyMetadata，见名知义，就是将装饰器中的信息拿出来放到 options.type 中。
/** @see {@link https://github.com/vuejs/vue-class-component/blob/master/src/reflect.ts} */ var reflectMetadataIsSupported = typeof Reflect !== 'undefined' && typeof Reflect.getMetadata !== 'undefined'; function applyMetadata(options, target, key) { if (reflectMetadataIsSupported) { if (!Array.isArray(options) && typeof options !== 'function' && typeof options.type === 'undefined') { options.type = Reflect.getMetadata('design:type', target, key); } } }
Reflect.getMetadata 获取设置在类装饰器上的元数据。可参考文章理解：
createDecorator，见名知义，就是创建装饰器。本质是在类上定义一个私有属性
export function createDecorator(factory) { return function (target, key, index) { var Ctor = typeof target === 'function' ? target : target.constructor; if (!Ctor.__decorators__) { Ctor.__decorators__ = []; } if (typeof index !== 'number') { index = undefined; } Ctor.__decorators__.push(function (options) { return factory(options, key, index); }); }; }
项目代理及 webpack 性能优化
在项目根目录下新建 vue.config.js
本地开发 api 代理
module.exports = { devServer: { proxy: { '/api': { target: '<url>', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
本地开发 api 模拟
devServer: { before (app) { before (app) { app.get('/api/getList', (req, res) => { res.json({data: [{id: 1, name: 'vue'}]}) }) } } }
性能优化
查看打包依赖
在 package.json 文件 script 中加入命令：
"build:report": "vue-cli-service build --report"
会在 dist 目录下生成 report.html，可直接打开，查看打包依赖，进行分析，进行打包优化
打包优化 - cdn 引入公共库
在 vue.config.js 中加入配置：
configureWebpack: { externals: { // cdn 外链，避免包太大，首屏优化 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex' } }
在 public/index.html 中加入 cdn 库地址
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js"></script> <!-- built files will be auto injected -->
再次优化，html head 信息中加，dns 域名预解析，js 库 reload 预加载。
<link href="https://www.jb51.net/cdnjs.cloudflare.com" > <link href="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" as="script"> <link href="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js" as="script"> <link href="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js" as="script">
其他
修改本地开发端口号，在 vue.config.js 中加入配置：
devServer: { port: 8888 }
体验优化-打包完成提示：
const WebpackBuildNotifierPlugin = require('webpack-build-notifier'); const path = require('path'); module.exports = { // 链式操作 chainWebpack: config => { // 移除 prefetch 插件，移动端对带宽敏感 // 路由懒加载，只对用户频繁操作的路由，通过 注释 提前获取 // component: () => import(/* webpackChunkName: "about" */ /* webpackPrefetch: true */'../views/About.vue') config.plugins.delete('prefetch'); // 生产打包才提示，开发不提示 if (process.env.NODE_ENV === 'production') { config.plugin('build-notify').use(WebpackBuildNotifierPlugin, [{ title: "My Project Webpack Build", logo: path.resolve("./img/favicon.png"), suppressSuccess: true }]) } } }