VUE3.0项目实战（一）--创建一个VUE项目（JSX）

创建项目

首先目前安装vue的有比较常规的三种方法，一种是最常见也是最经常用的vue@cli,其次如果说我们熟练webpack，我们就可以自己安装一个vue，对于前端开发工程师来说，这一个方案呢是最不可取，开发效率太低，而且配置麻烦，在正式开发中不适合投入生产，如果说你有非常好的架构能力，喜欢搞一个自己的vue，是可以架构一个玩玩的，最后也是我最推荐使用的那就vite，这里就不得不介绍一下vite了。

简单认识Vite

一、安装方式

• vite是一个前端的脚手架，支持React/vue...
• vite 是vue作者尤雨溪开发

yarn create vite
npm init vite

Vite特性： No Bundling

        开发模式下开发速度非常快，不会进行打包js的一个过程，会使用ES Module。

• 基于浏览器支持ES Module，不需要bundle。

Vite开发模式下基于ES Module，有一个好处不用去承担一个打包的时间，在dev环境下不用去花费打包时间，提高开发效率。

Vite特性：HMR提速

HMR（hot module replacement），从单词上看就是模块热更新，自己实现的一套，并没有使用第三方库，大大提高了开发体验。

• 原理：基于浏览器的ESM
• 自研HMR
• Per文件加载（因此和APP体积无关）

Vite特性：插件体系

• 基于rollup体系，rollup插件经过简单包装就可以在vite中使用。
• 丰富的插件生态。

Vite.js插件Vite.js插件

因为基于rollup，rollup拥有非常好的体系，但是没rollup没做好的就是热更新的部分，而Vite却专门把这一部分做好了，取长补短，提供了更好的一个前端工具链。

构造一个学习项目

examples，简单做一个右边展示的例子。

创建项目

yarn create vite

         然后输入文件名，选vue，会自动创建vue3.0。

修改文件

这里可以看到使用的sfc，为了能使用jsx，那么我们需要对项目进行改造。

1. 去掉sfc的APP.vue 换成tsx文件
2. 修改main.js文件引导。

   export default (props)=>{
       return (
       <>
       <div>hello</div>
       </>
       )
   
   }
   // APP.jsx

   这里运行我们会发现报错，这是因为vite会用React去解析jsx。        因此Vite提供了一个专门为了结合vue3.0和jsx的插件

   yarn add -D @vitejs/plugin-vue-jsx

3. 修改Vite配置

       用插件解析jsx结合vue3，就可以完美开始我们的vue3之旅了。