11-使用Vite创建Vue2项目原创

我们继续的来学习wait的功能，这章我们来看一下V中的view，我们在前面介绍过wait的作者是刘禹锡，那他应该理应对view提供第一优先级的支持，事实上也是如此，比如wait对VIEW3单文件的支持，我们可以通过v JS plug in view来去实现。我们在前面去安装VIEW3的项目的时候，我们已经看到了这个插件了，那V能不能支持VIEW2呢？在官方上我们看到当我们去呃初始化一个view项目的时候，我们在那个模板列表里我们并没有看到VIEW2。只是我们选择了VI以后，它默认支持的是VIEW3，那如果是我们非得要在VI2里面去使用V的话，可不可以呢？当然也是可以的，但是官方上并没有提供直接的支持，我们在使用社区里边的一个underone v plug in view2来去完成。下面呢，我们来给大家演示一下。

首先呢，我们先来到v plug in view2这个github的官方网站，在这上面呢，我们看到首先我们通过NPM去安装一个叫做v plug in view2这样的一个插件，然后从插件里边呢，我们解构出create view plug in，然后把它放在我们V的插件的配置里边。那下面呢，我们到Vs code里边来去创建这样的一个项目来演示一下，首先呢，我们通过PM PM create create来去创建一个V的环境的项目，我们把这个项目起名为wait basics-VIEW2这里呢，我们来看一下，并没有VIEW2这个选项，我们不能选择view，因为这个默认的是VIEW3，我们只能选择一个不带任何特性的一个纯JS的框架为内了。好，接下来我们再去选择一下banana，然后CD到wait v six VR，好，这里我们执行一下PPM。

好，我们安装一下依赖。然后呢，我们再去执行一下PN PM run d。好，我们现在呢，点击一下，在浏览器上打开我们项目的这个首页面。那我们现在呢，看一下VIEW2这里面的一些代码，我们在前边讲解with basics的时候呢，见过这个代码，它是一个纯JS的环境，下面我们就在这个环境下面来搭建一个所谓的V的V12的环境，我们现在先退出来，先去安装一下刚才我们提到的那个插件，这个插件的话呢，我们可以通过PN PM install。名字叫v plug in view2杠大地，我们在开发的环境下面去安装。

安装好了以后呢，我们再去创建一个文件，叫做wait.config.JS，在这个文件里边呢，我们首先先从weight里边导入一个配置方法，叫做DeFine conflict，然后呢，我们再去通过export default。来去暴露DeFine config这个函数的执行结果，它里边呢，我们加一个参数，就是plug ins，我们来去定义它的插件，它的类型是一个数组，我们在数组里边呢，可以导入我们刚刚安装好的那个V2的插件，我们可以port，然后from，叫做weight plug in view2，从这个插件里边结构出一个方法叫create view plug in，然后呢，我们把它放在plug ins里边去执行一下这个插件的函数，这样的话我们的插件就引入进来了。

那么接下来呢，我们写一段VIEWVO2的代码来去测试一下，由于我们当前这是个纯JS的环境，还没有VIEW2的呃，这个vuee的呃这个模块，所以呢，我们还需要去安装一下VIEWE2，那我们可以执行一下PN PM install view，注意在这个view的后边千万不要回车了，因为现在在春节以后view啊，已经默认安装VIEW3了，所以呢，我们应该在安装的时候后边加一个白美号，比方说我们加一个艾特二。好，大家看到现在呢，我们的呃，View的2.6.14就安装好了，它告诉我们3.2.31是可以使用的了啊，它给我们一个提示，但事实上呢，我们现在就人为的故意的使用VI2，我们打开package.jason我们看到这里边关于VI2已经安装好了，安装好了以后呢，我们在当前的这个项目的根目录下面创建一个新的文件，我们取名为叫app.view然后我们可以编写一些呃view的单文件组件了，我们可以写一个template，这样的话呢，我们就可以去创建一个模板，这里边我们可以写个第五标签，我们可以写个hello wait view2。

写完以后，我们试图的去载入这个组件，我们可以在manner JS里把这段纯原声的JS先删除掉，然后呢，我们import一下view，然后from view，如果学过VIEW2的同学应该知道啊view的一个实例化的方法，我们实例化一个跟啊组件叫做new view，这里边呢我们就配置一个ell，也就是它的渲染的根节点就是我们index atml里面的这个APP，那我们可以在这上面写入井号APP。好，接下来我们就可以写入一个run点函数，这个函数是GSX的一个语法的函数，我们可以直接用它来渲染我们的APP。首先呢，我们先导入APP这个组件，From当前目录下的app.view然后接下来我们就可以在runner函数的后面通过create element或者是帮助方法H来去执行一下这个函数，把APP放进去，这样的话呢，我们的这个根组件就可以。

载入进来了，好，接下来呢，我们去运行一下这个项目，执行一下PN PM run DV。好，这里有个提示，这个提示的错误呢，告诉我们。我们应该是少装了一个模块叫view template compel，因为这里我们使用了单文件组件，它要解析我们template，所以呢，我们再去执行一下PM PM install view，呃，Template compel，好，安装完了以后呢，接下来我们再去重新的运行一下我们的项目。好，项目已经运行起来了，但是现在这里面有个提示，因为我们使用的是V，所以呢，暂时我们这环节里边不支持缺省的这个扩展名，所以呢，我们在APP的，呃，APP这个后面呢，加一个点view保存一下好了，下面呢，我们看到这个页面上已经快速的显示出hello wait view2了，好，这就是我们如何在V里边啊使用VIEW2，或者是在VIEW2里边我们怎么去使用V，以前我们在VIEW2里边都是通过viewvo c，也就是也就是基于webpa的脚手架，现在呢，我们可以在VIVO2里面使用V了。