基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎 star 或 fork
特性
- CSS 预编译语言：less
- Ajax: axios，做了一定的封装，详见
src/services/request.js - SVG 雪碧图：采用
webpack插件svg-sprite-loader,及svg精简压缩工具svgo - 移动 web 的适配方案：引入了
postcss-pxtorem及lib-flexible，可以自由地用 px 去开发 - 常用的 js 工具类： cloud-utils
- 常用的 Less 的 mixins 集合：magicless
目录介绍
.
├── build # 生成压缩包
├── public # 静态资源，不需要 webpack 处理
└── src
├── assets
│ ├── fonts # 字体文件
│ ├── img
│ ├── js # 不经过 npm 或 yarn 下载的第三方依赖包
│ └── less # reset 样式，及定义的常量文件等
├── components
│ └── SvgIcon # svg 雪碧图
├── 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
浏览器访问 http://localhost:3001
其他
# --svgo svg精简压缩
yarn run svgo
# --analyz 基于 webpack-bundle-analyzer 插件分析打包的文件构成及大小(vue ui 界面上的分析不习惯)
yarn run analyz
# --report 生成静态报告文件
yarn run report
相关链接
原文地址：https://segmentfault.com/a/1190000017040058