基于 vue-cli3 搭建的前端模板，clone 本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎 star 或 fork
特性
- 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）启动编译，并将编译后的文件自动上传到内网服务器 (解决手动上传不便的问题) - 终端（命令行界面）打印出页面入口地址和二维码，手机扫码即可访问 （解决手机录入地址不便的问题）
- 监听文件，一旦保存修改，增量编译 （解决全量编译速度慢的问题）
- 将编译后且有变化的文件增量上传到内网服务器 （解决全量上传速度慢的问题）
- 在手机上刷新页面或重新扫码即可看到变化
- 运行
目录介绍
.
├── 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
# 自动生成 component
yarn run gen:comp
# 自动生成 view
yarn run gen:view
浏览器访问 http://localhost:3000
其他
# --analyz 基于 webpack-bundle-analyzer 插件分析打包的文件构成及大小(vue ui 界面上的分析不习惯)
yarn run analyz
# --report 生成静态报告文件
yarn run report
相关链接
- vue-cli3官方文档
- vue-cli 3.0 配置
- chainWebpack
- [[Vue CLI 3] 配置 webpack-bundle-analyzer 插件](https://segmentfault.com/a/11...
