前言

Vue 2.7 正式版已经发布有一段时间了,但目前许多公司还没有升级 Vue 3 的打算(比如我),随着 Vite 脚手架注定成为下一代前端工具链,许多用户都想基于 Vite 来构建 Vue 项目,如果想基于 Vite 构建 Vue 3 项目,社区模板完全满足您的需求,如果想构建 Vite 3 + Vue 2 + JavaScript 项目,那社区模板不太能满足您的需求,因为社区模板提供 Vue 2 项目几乎是基于 Vite 2 + TypeScript 构建,对于不熟悉 TypeScript 语言的用户不是很友好,因此接下来从 0 开始手把手带大家搭建一套规范的 Vite3 + Vue2.7 + JavaScript 前端工程化项目环境。

本文章篇幅较长,从以下几个方面展开:

  • 基础搭建
  • 代码规范
  • 提交规范
  • 自动部署

本项目完整代码托管在 GitHub 仓库,欢迎点亮小星星

从 0 搭建 Vite 3 + Vue 2.7 前端工程化项目相关推荐

  1. 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目

    从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...

  2. 从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)

    "手动是不可能手动的了,这辈子都不可能手动的了." 一.目标 上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...

  3. 从0到1,Vue大牛的前端搭建——异常监控系统

    来源: 开课吧前端团队 https://mp.weixin.qq.com/s/4UyEHM-YmdgrfF_yze9Bpg 本篇文章读后,你将GET的技能: ●收集前端错误(原生.React.Vue) ...

  4. vue 全家桶 - 前端工程化

    目录 主要内容 1. 模块化相关规范 1.1 模块化概述 1.2 模块化规范 A. 浏览器端的模块化 B. 服务器端的模块化 C. 大一统的模块化规范 – ES6模块化 1.3 体验ES6模块化 - ...

  5. 【Vue基础】前端工程化Vue项目

    一.创建Vue项目步骤 1.新建一个文件夹,起名为vue_project01 2.在该文件夹中打开cmd,输入指令vue ui,打开图形化界面 3.此时跳转到网页,根据以下步骤配置vue项目 1)项目 ...

  6. 从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏

    https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分 选定menu菜单,选择竖型样式的 复制一下 <el-menudefau ...

  7. 从0搭建一个Springboot+vue前后端分离项目(八)把数据从后台传到前端进行展示渲染,完善增删改查

    首先引入hutool工具类 Hutool是一个Java工具包类库,对文件.流.加密解密.转码.正则.线程.XML等JDK方法进行封装,组成各种Util工具类 Hutool是一个小而全的Java工具类库 ...

  8. 从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建

    把(一)里面创建好的项目文件夹拖入到IDEA里面 进行完上步操作后就可以快捷的启动项目了 这里稍微修改一下可以让我们启动项目后,自动地打开页面 页面搭建和改造 对此项目文件进行改造,改造成最终我们需要 ...

  9. 从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口

    将之前前端写的表格内容,与数据库新建的表进行对应 启动项目 把写死的TableDa数据删掉.因为最终要从后台读取 完善新增接口 <el-button type="primary&quo ...

最新文章

  1. 不应该在ToString()方法中修改引用类型
  2. python私有函数
  3. 关于批量插入数据之我见(100万级别的数据,mysql) (转)
  4. 力扣:12正数转罗马数字(python) 简单粗暴解决方法
  5. mongoDB 小练习
  6. 分别写出引入CSS的3种方式, 特点, 优先级
  7. android开发 存储权限,Android openFileOutput – 没有创建存储的权限
  8. 【华为云技术分享】Linux内核发展史 (2)
  9. HTML5公式插件,在HTML5中使用MathML数学公式
  10. python接口自动化(二十七)--html 测试报告——上(详解)
  11. shiro 不过滤指定的带参数url_原创干货 | 过滤器设计缺陷导致权限绕过
  12. messenger支持查找附近的人功能吗_玩微信,附近的人,是否双方都在查找附近的人,才能显示?...
  13. deno计算机语言什么意思,一篇文章告诉你什么是Deno!
  14. BZOJ1412: [ZJOI2009]狼和羊的故事
  15. 突发!人人影视字幕组14人被抓,用户超800万,涉案金额超1600万!网友炸了:免费的片没了...
  16. eclipse安装STS支持注意的坑
  17. python使用pika操作rabbitmq总结(一)
  18. 神经网络的前向传播与反向传播
  19. 基于STM32F103移植华为LiteOS物联网系统
  20. 如何阻止冒泡浏览器默认行为

热门文章

  1. python文件夹自动备份_python实现定时自动备份文件到其他主机的实例代码
  2. Eclipse RCP开发桌面程序
  3. 是命运不济是运气不好都可以
  4. 中国2007年度最大社会事件回顾
  5. Guava之RateLimiter限流
  6. java海康威视设备注册、获取摄像头、录像机在线状态,获取指定摄像头PTZ值
  7. smt生产线关键流程介绍
  8. 实现swiper实现缩图
  9. 源码中的modCount是什么?有什么作用
  10. 铁威马NAS如何开启二次验证提高系统安全性