基于 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
(cklwblove#12) -
webp
图片优化技术项目中使用示例 (cklwblove#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