关键词：
文章目录
背景
大家好，我是杜晓帅~，一名Java开发程序员；最近想总结一下前端开发的一些东西，包括项目的打包和如何将后端处理的数据在前端进行一个展示，相信大家学习了这个之后就能自己写一套前后端分离的系统了。而后端我们一般会使用SpringBoot进行开发，直接在IDEA新建SpringBoot项目即可，但是前端的话就需要用到一些工具了，本文我们用Vite和webpack进行前端Vue项目的一个打包，因为目前为止博主也只使用过这两个打包工具，话不多说，让我们开始吧！！！
环境准备
准备Node.js和npm即可
首先这两个东西是打包需要用到的东西，node.js下载官网是：点击跳转 ，因为现在下载的node.js包括了npm，所以算一举两得，一次性就把两个东西全部下载完成了。下载完成之后我们按Win+R打开cmd窗口，输入node -v和npm -v，就能看到我们安装的node.js和npm的版本号了，如果没有版本号，可能是没安装成功，看看有什么文件冲突的地方，要解决一下
因为博主是很久之前就安装了，所以版本可能和大家不一样，不过这并不影响后续的打包，按自己的版本来就好了😁😁😁
Vite打包
首先我们打开cmd窗口，在d盘新建一个文件夹用于存放打包的Vue项目，然后：
d:
cd vue_project
因为我是在d盘创建的vue_project文件夹，所以我先切换为d盘在cd到指定文件夹就好了
现在就可以利用Vite进行打包工作了，代码已经贴在下面了，大家可以一步一步运行，最后启动项目之后根据给出的地址进行访问即可
npm init vite-app npm_project（这个是你项目的名字，可以自己命名）
cd npm_project (cd到你刚刚创建的项目文件夹下)
npm install
npm run dev (启动项目)
补充一下如果用yarn打包的话也是差不多的命令，如下：
yarn create vite-app yarn_project (你定义的项目名)
cd yarn_project (刚刚创建的项目名)
yarn
yarn dev
执行完成之后，启动项目，复制访问地址在浏览器地址页面即可访问成功了，如下图：
webpack打包
利用webpack进行打包就会比Vite更慢，因为他需要的东西更多；下面是打包的一些命令，包括切换镜像源使打包速度更快，当我们执行完第三行的时候，会有很多选项，我们直接回车，然后回复的地方直接Yes就好，如下图所示：
npm install -g cnpm --registry=http://registry.npm.taobao.org (换成国内的淘宝镜像源，打包速度更快)
cnpm install -g vue-cli
vue init webpack npm_webpack （自定义自己项目的名称）
cd npm_webpack
npm install (这个时候这个选项没有，可以直接cd到自己创建的项目启动即可)
npm run dev （启动项目）
完成之后启动就会给出访问的地址，复制地址粘贴到浏览器即可访问，如下图：
总结
对于这两者我们看他们的目录结构就知道，Vite更简洁，启动的当然也就更快了；而且Vite是Vue的创始人尤雨溪创建并目前在维护的，所以更适合于Vue一些，目前博主也是会采用Vite去进行打包，这两者具体的差别，大家可以自己去了解了解。
本文主要是帮博主记录并回顾一下是如何创建（打包）Vue项目的，后续就会更新前端的内容了，毕竟已经打包好了，就可以开始写前端了，如果这篇文章帮助到了你，可以给个支持哦😁😁😁
vue3中vite的配置
...A上一节-搭建vue3+typescript+vite+yarn项目在vue2里，我们使用webpack打包工具，一些基本配置我们都是熟悉不能再熟悉，但在vite里，有什么不同呢？参考链接-vite中文文档vue2里，针对webpack的配置，是基于vue.config.js文件但在基于vite的vue... 查看详情
一篇文章说清webpack、vite、vue-cli、create-vue的区别
...vuejs.org/zh/index.htmlvue-cli是Vue早期推出的一款脚手架，使用webpack创建Vue项目，可以选择安装需要的各种插件，比如Vuex、VueRouter等。vue-cli用于创建vue2的项目；@vue/cli用于创建vue3的项目，当然也支持vue2。使用起来还是比较繁琐的，... 查看详情
vue3.0项目从webpack改造成vite
参考技术A它主要由两部分组成：官网1.卸载webpack相关的依赖,删除vue.config.js配置文件2.安装依赖3.修改index.html4.修改vite.config.js配置文件5.修改package.json打包命令这样我们就大功告成了里面还有写具体的坑，大家可以自己踩踩！ 查看详情
vite创建项目，cra创建项目，vue-cli创建项目(代码片段)
.../vue都可用只适用于react只适用于vue基于基于rollup打包基于webpack打包基于webpack打包创建项目npmcreatevite@latest项目名称npxcreate-react-app项目名称--templatetypescriptvuecreate项目名称修改配置在vite.config.js/ts修改三种方式，具体看下文... 查看详情
7.vue3(代码片段)
...目名字npmrunserve8.1.2.使用vite创建vite：前端构建工具，跟webpack一样。对比webpack，vite的优势开发环境中，无需打包操作，可快速的冷启动。轻量快速的热重载（HMR）。真正的按需编译，不再等待整个应用编译完成。##创建工程npmini... 查看详情
一分钟科普帖：vite和vue-cli
...脚手架和开发服务器的构建工具。然而，Vite并不是基于Webpack的，它有自己的开发服务器，利用浏览器中的原生ES模块。这种架构使得Vite比Webpack的开发服务器快了好几个数量级。Vite采用Rollup进行构建，速度也更快。Vite目前还处... 查看详情
vue2.7+vite项目搭建
参考技术A需要在根目录创建vetur.config.js或者改用volar插件使用官方的@vitejs/plugin-vue2插件vite创建vue项目后,把插件替换下就行了vue2应该只支持vue-router3版本使用unplugin-vue-components插件使用方法(element-ui为例):使用@vitejs/plugin-legacy插件... 查看详情
创建vue3项目vite+typescript，nrm切换nodejs
1、创建vue3项目命令：yarncreatevite或者npminitvite@latest创建完成项目，需下载依赖：yarninstall2、启动项目命令：npmrundev3、安装Vuecli脚手架npminstall@vue/cli-g在终端cmd查看是否安装成功vue-V4、创建脚手架项目vuecreatep... 查看详情
vite太香了~react项目webpack迁移为vite，超详细过程(代码片段)
之前使用react+webpack模式开发时，项目结构多了之后，每次本地开发启动项目时，毫不夸张的说，大约都要30s左右，所以决定将webpack改为vite，vite的优势查看vue项目迁移为vite第一步搭建react+vite项目目... 查看详情
搭建vue3+typescript+vite+yarn项目
参考技术Avite是vue3推荐的打包工具，相较于webpack，Vite是基于nativeESmodule——现代浏览器基本已经全部支持了import/export语法。在Vite中,启动本地服务器,是不需要提交编译文件的,而是在浏览器请求对应URL时,再提供文件,实现了真正... 查看详情
基于最新vite+vue3+vantui移动端应用项目搭建(代码片段)
...自己的新作品Vite赞不绝口，并表示自己”再也回不去webpack了“。这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。目录Vite的优点Vite项目创建集成VantUI移动端组件库 移动端rem适 查看详情
使用vite创建vue3项目模板(代码片段)
当你想独立创建一个vue项目的时候，并且无从下手的情况下，那么这么项目可以很好的解决此问题，里面包含了基本的工程目录，按文件夹分类并且提高效率。那么开始创建我们的项目吧！我们使用vite来创建&... 查看详情
vite创建vue3项目方式(代码片段)
快速创建方式终端输入npminitvite@latest然后输入项目名称选择要创建的框架版本然后选择需要的脚本语言最后npmi初始化npmrundev启动项目项目目录如下页面展示 查看详情
使用vite快速构建前端react项目
...升前端开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite3，Vite全新的插件架构、丝滑的开发体验，可以和Vue3完美结合。相比Webpack和Gulp等构建工具，Vite有如下一些优势：Vite主要对应的应用场... 查看详情
如何使用 vite 和 yarn 创建 vue 项目
】如何使用vite和yarn创建vue项目【英文标题】：Howtocreatevueprojectwithviteandyarn【发布时间】：2021-11-1914:38:00【问题描述】：我在Udemy上观看Vue系列。他写了yarnaddvue@3.0.7和yarnaddvite@2.1.1--developer。此外，我正在终端中编写这些命令，但... 查看详情
vite入门教程-下一代前端开发与构建工具
参考技术A直接点说，现市面上的构建工具太慢了（webpack、Rollup和、Parcel等），Vite直接利用浏览器原生的ES模块使构建速度更快使用NPM:使用Yarn:然后按照提示操作即可！你还可以通过附加的命令行选项直接指定项目名称和你想要... 查看详情
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)(代码片段)
...入选项回车就行））（4）选择vue-ts（或者是选择语言，选TypeScript）（5）此时已经创建完毕2.安装默认依赖可直接根据上图提示执行操作（1）进入刚刚创建 查看详情
vite2+ts+vue3项目创建（一）
参考技术A在项目中可使用import.meta.env.*来获取定义的变量 查看详情