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

基于 vue-cli3 搭建的前端模板,clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 starfork

特性

  • CSS 预编译语言:less
  • Ajax: axios,做了一定的封装,详见 src/services/request.js
  • SVG 雪碧图:vue-svgicon
  • 移动 web 的适配方案:引入了 postcss-pxtoremlib-flexible,可以自由地用 px 去开发
  • 常用的 js 工具类: cloud-utils
  • 引用 style-resources-loader:全局注入相关的less文件,如通用的 variablemixins
  • 常用的 Less 的 mixins 集合:magicless
  • 支持根据 npm scripts,自动生成 componentview 功能
  • 支持采用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

相关链接

    原文作者:文博
    原文地址: https://segmentfault.com/a/1190000017040058
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞