VUE相关知识点小记

1.插槽 slot

1.可以简单的把插槽理解为占位符, 比如事先定义好一套模版:

<ckTemplate>
    没用的文字
    <slot></slot>
    <div>没用的标签</div>
</ckTemplate>

2.当我们在自己的页面使用该模版时, 可以这么使用:

<ckTemplate>
    我是插槽内容..
    <h1>我是插槽标签..</h1>
</ckTemplate>

3.最终的结果为:

<ckTemplate>
    没用的文字
    我是插槽内容..
    <h1>我是插槽标签..</h1>
    <div>没用的标签</div>
</ckTemplate>

可以看到 slot 标签起到的作用就是有目的性的, 向模版标签之间的指定位置插入动态内容

达到了既可以抽象出公共的模版代码, 也可以灵活的扩充模版的内容

插槽在官方给的定义就是内容分发 API, 定义实在难以理解, 我个人认为就是占位符, 这样也容易记

2.打包的一点小技巧

在使用 npm run build 或者 yarn build 时, 默认只生成 dist 文件夹, 还需要二次压缩成 zip 文件, 然后部署, 通过一个打包插件可以 解决这个重复性工作:

package.json

{
    "devDependencies": {
        "filemanager-webpack-plugin": "^2.0.5"
    }
}

vue.config.js

const fs = require('fs');
const FileManagerPlugin = require('filemanager-webpack-plugin');

module.exports = {
  runtimeCompiler: true,
  publicPath: '/gomyck',
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      //去掉 console, 提高运行效率
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;

      const fileManagerPlugin = new FileManagerPlugin({
        onEnd: {
          delete: [
            getCompressionName()
          ],
          archive: [
            {source: './dist', destination: getCompressionName()},
          ]
        }
      });
      config.plugins.push(fileManagerPlugin);
    }
  }
}

function getCompressionName() {
  try{
    const projectName = JSON.parse(fs.readFileSync("package.json")).name;
    return projectName + ".zip";
  }catch (e) {
    return "dist.zip";
  }
}



相关文章:
⤧  上一篇 Mysql检索条件类型不一致引发的一次线上 BUG 修复 ⤧  下一篇 神话体系(封神版)