cklwblove / vue-cli3-template

:tada: 基于 vue-cli 搭建的前端模板

vue-cli3-template

基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库(持续更新中...)

🛎️ 不建议用此作为项目的基础模板

🚀 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 vue-preset

🔥 或者直接使用 npm init @winner-fed/project@2 my-project 来初始化项目，文档详见 create-project

特性

• CSS 预编译语言：less

• Ajax: axios，做了一定的封装，详见 src/services/request.js

• SVG 雪碧图：vue-svgicon

• 移动 web 的适配方案：引入了 postcss-pxtorem 及 lib-flexible，可以自由地用 px 去开发

• 常用的 js 工具类： cloud-utils

• 引用 style-resources-loader：全局注入相关的less文件，如通用的 variable及 mixins等

• 常用的 Less 的 mixins 集合：magicless

• 支持根据 npm scripts，自动生成 component 和 view 功能

• 支持采用TinyPNG node.js API 进行在线压缩.jpg或.png格式图片，并且转换Webp格式文件

• 支持断网处理

• 支持将 webpack watch mode 编译后文件自动上传至指定服务器，并在终端打印入口页面地址及生成二维码(灵感来源：@nutui/upload)

  • 运行 vue-cli-service build，以监听模式（watch mode）启动编译，并将编译后的文件自动上传到内网服务器 (解决手动上传不便的问题)
  • 终端（命令行界面）打印出页面入口地址和二维码，手机扫码即可访问 （解决手机录入地址不便的问题）
  • 监听文件，一旦保存修改，增量编译 （解决全量编译速度慢的问题）
  • 将编译后且有变化的文件增量上传到内网服务器 （解决全量上传速度慢的问题）
  • 在手机上刷新页面或重新扫码即可看到变化

• 支持 skeleton，骨架屏注入

• 支持开发模式下，终端打印入口页面地址及生成二维码，依赖Wifi热点，手机设备和PC必须处在同一局域网(vue-cli-plugin-qrcode)

• 引入 plop,执行脚本 npm run new 自动生成 view 或者 component 模板文件(灵感来源：New)。

• 支持根据 views 路径自动生成 vue-router 的路由（src/router/.invoke/router.js），且支持热更新。(灵感来源：vue-router-invoke-webpack-plugin)

• 支持 PWA

• 引用 vue-cli-plugin-dll，支持 webpack 的 Dll、DllReference，加快编译速度。 目前使用了 CDN 来加速

• 生产环境移除 console.log(#12)

• webp图片优化技术项目中使用示例 (#13)

• 预渲染功能 (https://github.com/cklwblove/vue-cli3-template/tree/feature-prerender-spa)

目录介绍

.
├── build              # 生成压缩包
├── public             # 静态资源，不需要 webpack 处理
├── scripts            # npm scripts
└── src
    ├── assets
    │   ├── fonts      # 字体文件
    │   ├── img
    │   ├── js         # 不经过 npm 或 yarn 下载的第三方依赖包
    │   └── less       # reset 样式，及定义的常量文件等
    ├── components
    │   ├── SendCode   # tree shaking 组件
    │   └── global     # 全局注册组件
    ├── filters        # 全局过滤器
    ├── icons          # svg 文件
    │   └── svg
    ├── router         # 路由及拦截器
    ├── services       # 统一的服务接口请求处理
    └── views
        └── hello

开发及发布

# 克隆项目
git clone [email protected]:cklwblove/vue-cli3-template.git

# 安装依赖
yarn install

# 可以通过如下操作解决 yarn 下载速度慢的问题
yarn install --registry=https://registry.npm.taobao.org

# 启动服务
yarn run serve

# 构建生产环境
yarn run build

# 压缩 dist 文件夹，生成 zip 包
yarn run deploy

# 自动生成 view or component
yarn run new

# 压缩图片
yarn run compress

# 生成 webp
yarn run webp

# css,less 文件代码检测
yarn run lint:style

# 骨架屏注入
yarn run skeleton

浏览器访问 http://localhost:3000

其他

# --report 生成静态报告文件
yarn run report

相关链接

• vue-cli3官方文档
• vue-cli 3.0 配置
• chainWebpack
• [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

License

MIT

vue-cli3-template's Issues

Dependency Dashboard

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.

Detected dependencies

dockerfile

Dockerfile

npm

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

---

• Check this box to trigger a request for Renovate to run again on this repository

webp在项目中的使用示例

构建相关

引入依赖

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

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转换已完成～`));
})();

项目中改动

public/index.html

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

mixins.less 添加 webp 的 mixins

.webpbg(@url) {
  background-image: url(@url);
  .webpa & {
    background-image: url('@{url}.webp');
  }
}
// 或者使用 magicless 里的 .webpbg()

使用示例

作为 img 标签的使用示例

目前 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>

作为 background-image 的使用示例

 .logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    .webpbg('~@assets/img/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
  }

为啥我的cli3.0的包 就是脚手架搭建的 配置了transform-vue-jsx 还是不行

为啥我的cli3.0的包 就是脚手架搭建的 配置了transform-vue-jsx 还是不行，但是你的模板配置了就可以了。为啥呢

跨域怎么配置？

大神，开发模式怎么配置跨域呀？求指教

文件上传怎么用啊

我安装完vant 为什么样式引入不了

body的overflow属性是在哪里初始化的

默认overflow属性是哪里设置

你好，可不可以再问个问题，这个模板下vux怎么配置，求指点。。

新建的项目这样配置是可以的，这个模板下不懂怎么配置了
原来的配置是这样
module.exports = { configureWebpack: config => { require('vux-loader').merge(config, { options: {}, plugins: ['vux-ui'] }) }, baseUrl: './' }

模板下的配置是

为什么不建议用此作为项目的基础模板

有什么弊端吗

生产环境移除 console.log

1. 使用 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,
};

2. 使用 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'],
+            },
+          }
+        })
+      ],
+    },
+ })
...

如何适配scss

有计划支持sass吗

vue-cli 3.x 项目，如何增加对 jsx 的支持？

vue-cli 3.x 项目，如何增加对 jsx 的支持？ @

同学，您这个项目引入了1187个开源组件，存在42个漏洞，辛苦升级一下

检测到 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

赞一个