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

william 发布于2019-08-26 12:24 / 2184人阅读

摘要：基于搭建的前端模板，本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎或特性预编译语言，做了一定的封装，详见雪碧图移动的适配方案引入了及，可以自由地用去开发常用的工具类引用全局注入相关的文件，如通用的及等常用的的集合支持

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108631.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

qieangel2013 2019-08-23 11:58 评论0 收藏0