VUE相关知识点小记
1.插槽 slot
1.可以简单的把插槽理解为占位符, 比如事先定义好一套模版:
1
2
3
4
5
<ckTemplate>
没用的文字
<slot></slot>
<div>没用的标签</div>
</ckTemplate>
2.当我们在自己的页面使用该模版时, 可以这么使用:
1
2
3
4
<ckTemplate>
我是插槽内容..
<h1>我是插槽标签..</h1>
</ckTemplate>
3.最终的结果为:
1
2
3
4
5
6
<ckTemplate>
没用的文字
我是插槽内容..
<h1>我是插槽标签..</h1>
<div>没用的标签</div>
</ckTemplate>
可以看到 slot 标签起到的作用就是有目的性的, 向模版标签之间的指定位置插入动态内容
达到了既可以抽象出公共的模版代码, 也可以灵活的扩充模版的内容
插槽在官方给的定义就是内容分发 API, 定义实在难以理解, 我个人认为就是占位符, 这样也容易记
2.打包的一点小技巧
在使用 npm run build 或者 yarn build 时, 默认只生成 dist 文件夹, 还需要二次压缩成 zip 文件, 然后部署, 通过一个打包插件可以 解决这个重复性工作:
package.json
1
2
3
4
5
{
"devDependencies": {
"filemanager-webpack-plugin": "^2.0.5"
}
}
vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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";
}
}