脚本宝典收集整理的这篇文章主要介绍了vue-cli3 搭建的前端项目基础模板,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
基于 vue-cli3
搭建的前端模板,clone
本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork
src/services/request.js
postcss-pxtorem
及 lib-flexible
,可以自由地用 px 去开发style-resources-loader
:全局注入相关的less
文件,如通用的 variable
及 mixins
等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-cli3 搭建的前端项目基础模板所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。