vue-cli3 搭建的前端项目基础模板

基于 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 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

浏览器访问 http://localhost:3001

其他

# --svgo svg精简压缩
yarn run svgo

# --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 插件