基于 vue-cli3 搭建的前端模板，clone 本仓库，即可搭建完成一个新项目的基础模板，，欢迎 star 或 fork

特性

• CSS 预编译语言：
• Ajax: ，做了一定的封装，详见 src/services/request.js
• SVG 雪碧图：
• 移动 web 的适配方案：引入了 postcss-pxtorem 及 lib-flexible，可以自由地用 px 去开发
• 常用的 js 工具类：
• 引用 style-resources-loader：全局注入相关的less文件，如通用的 variable及 mixins等
• 常用的 Less 的 mixins 集合：
• 支持根据 npm scripts，自动生成 component 和 view 功能
• 支持采用TinyPNG node.js API 进行在线压缩.jpg或.png格式图片，并且转换Webp格式文件
• 支持断网处理

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

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

目录介绍

.├── 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# 自动生成 componentyarn run gen:comp# 自动生成 viewyarn run gen:view

浏览器访问 :3000

其他

# --analyz 基于 webpack-bundle-analyzer 插件分析打包的文件构成及大小(vue ui 界面上的分析不习惯)yarn run analyz# --report 生成静态报告文件yarn run report

相关链接

• [[Vue CLI 3] 配置 webpack-bundle-analyzer 插件](