/vue-cli3-template

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

Primary LanguageJavaScriptMIT LicenseMIT

Gitpod ready-to-code

vue-cli3-template

license license Build Status FOSSA Status Alt

基于 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 git@github.com: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

相关链接

License

MIT

FOSSA Status