cklwblove / vue-cli3-template Goto Github PK
View Code? Open in Web Editor NEW:tada: 基于 vue-cli 搭建的前端模板
License: MIT License
:tada: 基于 vue-cli 搭建的前端模板
License: MIT License
// imagemin imagemin-webp
npm i imagemin imagemin-webp --save-dev
or
yarn add imagemin imagemin-webp --dev
npm scripts 添加 towebp
// package.json
{
...
"scripts": {
"towebp": "node build/towebp.js"
}
}
'use strict';
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
const fs = require('fs');
const chalk = require('chalk');
const fileSrc = './src/assets/img/*.{jpeg,jpg,png,JPEG,JPG,PNG}';
const fileOut = 'src/assets/img/';
(async () => {
const files = await imagemin([fileSrc], {
destination: fileOut,
plugins: [imageminWebp({ autoFilter: true })],
});
// console.log(files);
//=> [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.webp'}, sourcePath: 'src/assets/img/foo.jpg' …]
let outputName = '';
if (Array.isArray(files) && files.length) {
files.forEach((file) => {
const { destinationPath, sourcePath } = file;
const fileExtension = sourcePath
.split('.')
.pop()
.toLowerCase();
outputName = `${outputName}.${fileExtension}.webp`;
fs.rename(destinationPath, outputName, function() {});
});
}
console.log(chalk.green(`webp转换已完成~`));
})();
// body 标签添加类名 webpa
<script>
window.supportWebp = false;
if (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0) {
document.body.classList.add('webpa');
window.supportWebp = true;
}
</script>
.webpbg(@url) {
background-image: url(@url);
.webpa & {
background-image: url('@{url}.webp');
}
}
// 或者使用 magicless 里的 .webpbg()
目前 Safari 浏览器还没有对 webp 格式的支持,详见 https://caniuse.com/#search=webp
<picture>
<!-- 向下降级使用 -->
<source
srcset="~@assets/img/logo.png.webp"
width="200"
height="200"
type="image/webp"
/>
<source
srcset="~@assets/img/logo.png"
width="200"
height="200"
type="image/png"
/>
<img src="~@assets/img/logo.png" width="200" height="200" />
</picture>
.logo {
width: 200px;
height: 200px;
margin: 0 auto;
.webpbg('~@assets/img/logo.png');
background-repeat: no-repeat;
background-size: contain;
}
大神,开发模式怎么配置跨域呀?求指教
vue-cli 3.x 项目,如何增加对 jsx 的支持? @
babel-plugin-transform-remove-console
yarn add babel-plugin-transform-remove-console --dev
babel.config.js
+ const plugins = [];
+ if (process.env.NODE_ENV === 'production') {
+ plugins.push('transform-remove-console');
+ }
module.exports = {
presets: ['@vue/app'],
+ plugins,
};
terser-webpack-plugin
vue.config.js
的修改const TerserPlugin = require('terser-webpack-plugin');
configureWebpack
配置的修改...
configureWebpack: () => ({
+ optimization: {
+ // https://webpack.docschina.org/configuration/optimization/#optimization-minimizer
+ minimizer: [
+ new TerserPlugin({
+ terserOptions: {
+ // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+ compress: {
+ warnings: false,
+ drop_console: true,
+ drop_debugger: true,
+ pure_funcs: ['console.log'],
+ },
+ }
+ })
+ ],
+ },
+ })
...
有计划支持sass吗
为啥我的cli3.0的包 就是脚手架搭建的 配置了transform-vue-jsx 还是不行,但是你的模板配置了就可以了。为啥呢
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
Renovate failed to look up the following dependencies: Failed to look up npm package @liwb/cloud-utils
, Failed to look up npm package axios
, Failed to look up npm package core-js
, Failed to look up npm package lib-flexible
, Failed to look up npm package magicless
, Failed to look up npm package normalize.css
, Failed to look up npm package register-service-worker
, Failed to look up npm package vue
, Failed to look up npm package vue-router
, Failed to look up npm package vue-svgicon
, Failed to look up npm package @ascendancyy/vue-cli-plugin-stylelint
, Failed to look up npm package @liwb/carefree-webpack-plugin
, Failed to look up npm package @liwb/vue-router-invoke-webpack-plugin
, Failed to look up npm package @vue/cli-plugin-babel
, Failed to look up npm package @vue/cli-plugin-eslint
, Failed to look up npm package @vue/cli-plugin-pwa
, Failed to look up npm package @vue/cli-plugin-router
, Failed to look up npm package @vue/cli-service
, Failed to look up npm package @vue/eslint-config-prettier
, Failed to look up npm package add-asset-html-webpack-plugin
, Failed to look up npm package archiver
, Failed to look up npm package babel-eslint
, Failed to look up npm package babel-plugin-transform-remove-console
, Failed to look up npm package chalk
, Failed to look up npm package check-prettier
, Failed to look up npm package compression-webpack-plugin
, Failed to look up npm package cross-env
, Failed to look up npm package duplicate-package-checker-webpack-plugin
, Failed to look up npm package eslint
, Failed to look up npm package eslint-plugin-prettier
, Failed to look up npm package eslint-plugin-vue
, Failed to look up npm package html-minifier
, Failed to look up npm package husky
, Failed to look up npm package imagemin
, Failed to look up npm package imagemin-webp
, Failed to look up npm package less
, Failed to look up npm package less-loader
, Failed to look up npm package lint-staged
, Failed to look up npm package plop
, Failed to look up npm package postcss-pxtorem
, Failed to look up npm package prettier
, Failed to look up npm package progress-bar-webpack-plugin
, Failed to look up npm package script-ext-html-webpack-plugin
, Failed to look up npm package size-plugin
, Failed to look up npm package style-resources-loader
, Failed to look up npm package stylelint
, Failed to look up npm package stylelint-config-prettier
, Failed to look up npm package stylelint-config-standard
, Failed to look up npm package stylelint-order
, Failed to look up npm package tasksfile
, Failed to look up npm package tinify
, Failed to look up npm package vue-cli-plugin-qrcode
, Failed to look up npm package vue-router-invoke-webpack-plugin
, Failed to look up npm package vue-server-renderer
, Failed to look up npm package vue-template-compiler
, Failed to look up npm package webpack-node-externals
, Failed to look up npm package webstorm-disable-index
.
Files affected: package.json
This repository currently has no open or pending branches.
Dockerfile
package.json
@liwb/cloud-utils ^1.4.5
axios ^0.27.0
core-js ^3.3.6
lib-flexible ^0.3.2
magicless ^1.1.6
normalize.css ^8.0.1
register-service-worker ^1.6.2
vue ^2.6.10
vue-router ^3.1.3
vue-svgicon ^3.2.6
@ascendancyy/vue-cli-plugin-stylelint ^1.1.2
@liwb/carefree-webpack-plugin ^0.4.4
@liwb/vue-router-invoke-webpack-plugin ^0.3.7
@vue/cli-plugin-babel ^4.0.5
@vue/cli-plugin-eslint ^4.0.5
@vue/cli-plugin-pwa ^4.0.5
@vue/cli-plugin-router ^5.0.8
@vue/cli-service ^5.0.1
@vue/eslint-config-prettier ^6.0.0
add-asset-html-webpack-plugin ^3.1.3
archiver ^5.3.0
babel-eslint ^10.0.3
babel-plugin-transform-remove-console ^6.9.4
chalk ^2.4.2
check-prettier ^1.0.3
compression-webpack-plugin ^3.0.0
cross-env ^7.0.0
duplicate-package-checker-webpack-plugin ^3.0.0
eslint ^8.11.0
eslint-plugin-prettier ^3.1.1
eslint-plugin-vue ^5.2.3
html-minifier ^4.0.0
husky ^7.0.4
imagemin ^8.0.1
imagemin-webp ^7.0.0
less ^3.10.3
less-loader ^10.2.0
lint-staged ^13.0.3
plop ^2.5.3
postcss-pxtorem ^4.0.1
prettier ^2.6.2
progress-bar-webpack-plugin ^1.12.1
script-ext-html-webpack-plugin ^2.1.4
size-plugin ^2.0.1
style-resources-loader ^1.2.1
stylelint ^14.6.0
stylelint-config-prettier ^9.0.3
stylelint-config-standard ^20.0.0
stylelint-order ^4.1.0
tasksfile ^5.1.0
tinify ^1.5.0
vue-cli-plugin-qrcode 0.0.6
vue-router-invoke-webpack-plugin ^0.3.0
vue-server-renderer ^2.6.10
vue-template-compiler ^2.6.10
webpack-node-externals ^1.7.2
webstorm-disable-index ^1.2.0
默认overflow属性是哪里设置
检测到 cklwblove/vue-cli3-template 一共引入了1187个开源组件,存在42个漏洞
漏洞标题:serialize-javascript 代码问题漏洞
缺陷组件:[email protected]
漏洞编号:CVE-2020-7660
漏洞描述:Verizon serialize-javascript是美国威瑞森电信(Verizon)公司的一款支持将JavaScript序列化为 JSON超集的软件包。
serialize-javascript 3.1.0之前版本中存在代码问题漏洞。远程攻击者可借助index.js文件中的‘deleteFunctions’函数利用该漏洞注入任意代码。
国家漏洞库信息:https://www.cnvd.org.cn/flaw/show/CNVD-2020-53801
影响范围:(∞, 3.1.0)
最小修复版本:3.1.0
缺陷组件引入路径:[email protected]>@vue/[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>@vue/[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>@vue/[email protected]>[email protected]>[email protected]
[email protected]>@vue/[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]
[email protected]>@vue/[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]
[email protected]>@vue/[email protected]>[email protected]>[email protected]>[email protected]
另外还有42个漏洞,详细报告:https://mofeisec.com/jr?p=ibdc26
有什么弊端吗
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.