vue3-vite项目语法及遇到的问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近开发新的项目,用到了eclipse和vue3-vite,我先谈谈我自己的感受吧,原来以往的项目都是用的idea开发的框架基本都是spring全家桶,前端的话用的是vue2组件的饿了么的,对比一下的话我还是习惯用idea和vue2,因为eclipse用的人比较少,所以如果报错的话你在网上查到的解决办法很少,不如idea使用方便,好处对于我来说就是启动运行比较快,语法提示严谨,vue的话2和3的语法还是差别很大的比如如下内容:

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vite是什么？

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

二、Vite 和 Webpack 区别
Vite 优势：

vite 开发服务器启动速度比 webpack 快
webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
vite 热更新比 webpack 快
在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。
Vite 劣势：

生态不及webpack，加载器、插件不够丰富
打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
其他区别：

   1. 打包原理的区别

webpack打包原理​​​​

 
vite打包原理

     2. 项目入口文件的区别
         项目根目录的 index.html 是 Vite 项目的入口文件，而 webpack 的入口文件是 webpack 配置 entry 中指定的 js 文件。

 

三、关于 Vite 的一些其他知识
在工程中不是所有的引用模块都是ES写法，可能是CommonJS 和 UMD 、AMD 等等，这个时候Vite 会进行预构建，将其转换为ESM模块，以支持Vite。
对于JSX、或者TS 等需要编译的文件，Vite是用esbuild来进行编译的。
四、Webpack 和 Rollup 区别
经验法则：对于应用使用 webpack，对于类库使用 Rollup。

如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。

如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。

二、基本语法

1.引入使用的函数

代码如下（示例）：

 vue3我这写法是先引入使用的函数这些函数都是vue里面的

2.导包

导入自己需要使用的包

---

3.定义属性参数就是vue2中的data

 到这里没有用vue2的写法我也不懂反正直接这样写,参数这样定义就对了

4.语法

 我这是别人搭建的框架所以sql可以在前端写,主要看语法,特别是this,这里的this不能直接用需要加个下划线,刚开始写的时候一直忘记写所以闹了笑话哈哈

 这就是传说中的前后端调用.....很神奇对吧,还有一个最需要注意的:

就是定义完的方法必须在这书写一次才会生效,,,,,唉都是泪 

总结

总结一下吧,就是我自己是个小白嘛然后vue3我也没学过当时学的vue2,有的是互相兼容的但是有的不能兼容还需要多学习,这篇文档也没有写什么东西,主要是分享我接触新东西的一些感受,真的在不断的学习,没办法时代在进步,很多人和我一样很多人比我厉害同级的还希望多交流,厉害的不嫌弃的话可以多教教哈哈