4-创建第一个Vite项目原创

下面我们来搭建第一个V项目，这里有一个兼容性的问题需要注意，V需要note JS的版本要大于等于12.0，我们本地机装的note JS的版本是16.x，因此没有问题。接下来我们就使用刚才安装好的PNPM来去创建项目。方法是PN PM create weight，其实事实上我们启动的是一个安装weight或者是创建项目的一个向导，我们来演示一下。回到Vs code的，我们执行CTRL加波浪线，打开我们Vs code的集成的终端工具。在这里边我们先输入一个PWD，这里头我们能看到当前我们项目的目录是在桌面一个叫Felix courses目录下的V目录下面进行的，以后我们的项目创建就是基于这个目录来完成，你可以在你的机器上的任何的地方去创建一个目录，去初始化你的V项目就好了，我们按照command加K来去清一下屏，在这里我们就输入一个PN PM create来去构建。

好，这里提示我们去定义一个项目的名字，我们可以不妨写一个杠basics。这里呢，有六个框架让我们去选择。大家可以按着键盘的上下箭头去选择就好。接下来我简要的给大家介绍一下这六个框架，看看我们该选哪一个。第一个vanilla其实应该叫做vanilla JS更确切一些，它呢是史上最清亮的跨平台的前端框架vanilla JS目前在国内外都备受推崇。Boss drive5已经摒弃了这块位了，来选择vanilla作为基础的框架，国内像字节跳动、百度、阿里巴巴、美团、腾讯等等，还有国外的像谷歌、Facebook giarb这些知名的企业都在对它有使用。

第二个view，这个我不用解释，大家应该都了解。第三个react，这俩是我们现在比较常用的两个前端开发框架p react，有的同学可能也知道，它是react的一个开源替代产品，这个库呢，拥有最清亮的框架和最优秀的性能。这就是他成为react的一个诱人的替代品。并且呢，它还提供了相同的一些ES6的API，还具有组件watch DOM、虚拟DOM等等这样的一些特性。late是一个用于构建快速轻量级的一个web组件的一个简单的库。SWT是一个全新的构建用户界面的方法，像传统的框架RI view在浏览器中需要做大量的工作，而SW将这些工作都放在构建应用程序的编译阶段来处理了。那这里我们选择哪一个呢？我相信大家应该最熟悉的还是view，所以呢，我们选择view作为我们的开发的framework，也就是框架。

接下来让我们选择一个view variant，也就是一个变体，这里大家可以选择TS版的view和view，我们暂时选择view来减少我们的一个应用负担。好，这样的话我们就构建了一个v basics这样的一个基础的项目。这里呢，它告诉我们已经完成，现在可以运行cdv basics，然后再执行n PM install，我们也可以通过PN PM install来去安装它的依赖包，安装好了以后呢，我们还可以执行n PM run或者是PN PM run或者是ern。

D都可以，我们来去学习一下PMPM，所以我们执行PN PM run d。好，这样就会启动一个所谓的DV server，它的地址是在local host3000这个地址上，我们可以按照command键加单击就会打开我们这个界面，我们可以把这个窗口和我们这个Vs code做一个合并，这样的话我们就可以方便的查看我们这个页面了。那这个基本的效果我们就演示好了，也就是说一个基本的基于weight的加view的一个项目就构建起来了。我们可以看一下这个页面的效果，这是一个欢迎页面，可以点击它来去实现数量的增加，那整个的这个应用效果呢，我们得需要去浏览一下它的整个的目录，那么接下来这块工作我们就来详细的解读一下这个with basics里边的内容。

打开以后我们发现呢，里边有四个文件夹，六个文件。我们先看外侧的文件，第一个get ignore是我们getate项目去忽略去传到我们get仓库里边的一些配置，这里呢大家看到它有一些缺省的一些配置。第二个呢，我们先看一下package.jason这里除了定义我们最基本的name版本以及呃，所谓的叫做生产的依赖以及开发的依赖以外，还呃定义了三个所谓的NPM脚本。那生产依赖我们看到它装的是view，它的版本是3.2.25，在开发依赖里边，它去安装了我们VJS的一个plug in view，也就是基于view的一个插件，然后又装了V是2.7.2。那么接下来我们再来看一下scripts这里的NPM脚本，它给我们创建了三个，一个是dev，刚才我们执行的pnm run d，其实事实上就是运行的这个命令。当然我们也可以通过build来去构建一个基于weight的一个项目，我们可以打包我们的项目放在我们的生产环境里，打完包以后呢，我们可以通过preview来去浏览我们打包好的静态资源。

那关于这个package的Jason，大家如果是熟悉note JS的同学应该不陌生，那对于这个PN PM lock的yamo这个文件呢？如果大家知道NPM的lock以及Yan lock应该也不陌生，这就是我们的PNM所依赖的一些关系。这个压ma文件大家。不要去手动修改它，接下来我们再来看一下 readme.MD这个不用说，就是我们当前项目的一个，呃，所谓的帮助文档，然后还有一个wait.com.js，这个文件很重要，是我们wait项目的一个最基本的配置文件。

刚才我们在packet jeson里边，我们看到在这个本地的V环境里边已经安装好了V以及V的view插件，那我们就可以通过从weight里边解构出DeFine config这样的一个函数，以及view这样的一个对象，然后我们就可以暴露一个DeFine config来定义一个配置，里边定义一个对象，定义一个plugins，也去定义一个数组，里面可以把我们的插件放进去，这里呢我们运行了一下view这个对象，所以我们这个插件就可以用了。那关于插件这个部分呢，我们在后边还会有详细的讲解，下面我们就知道啊，这个view的conflict JS是如何去配置我们的V就可以了。这里有一个文件我们跳过了没有看，就是在index.html，那最后我们再来看一下index.html这个文件值得我们详细的去解读一下。

如果你通过web pack去构建view项目的时候，我们有个view c，你应该知道我们的indextl是不是放在我们项目的根目录下面的。它是放在public这个目录下面的，而现在呢，这个index.atml被放在了我们项目的根目录上，这就说明我们weight是基于index atml作为我们的入口文件的。那我们再仔细的观察一下index.atml这个文件，除了我们最简单的1LINK加载我们public这个静态资源目录下面的这个HREF的icon图标以外，大家发现在body下面有一个script标签，这个标签呢，它去引入了一个JS文件，其实如果按照正常的我们去理解引用JS文件没有问题，但是当我们真正的去查看一下S2C下面的慢点JS以后，你会发现在这个JS里边，呃，使用了所谓的ES modu，也就是ES的模块import语法，这个语法如果直接在浏览器上使用的话呢，会有问题，我们可以做个实验，比方。

我说在estl里边，我们把这个tap这个定义去掉，保存一下，作为一个最一般的JS的引用，我们再去把。Conso打开你会发现呢，这里提示我们有语法错误，说呀，我们不能通过import这个语法啊来去导入我的模块，这里有一个提示说upet module，也就是不要在module的外侧，其实实上呢，就告诉我们，我们得需要去符合浏览器的这个ES模块定义方法，这个呢是属于啊我们。原生JS以及浏览器的或者是ES的一个基本知识，我们可以在script里头加一个type module，如果这个知识点大家之前不知道，那你就可以把它当做是一个新的知识，Get到就可以了。也就是说你想要去通过所谓的叫ES6的或者是ES其他版本的import这种方式去导入一个模块，那么你得需要在引入这个JS的时候，或者是引入JS入口文件的时候，你得需要加一个type module。当然了，我们也可以在这个script里头去写import，去加载一些模块也是没有问题的，这是我们所谓的V去加载模块的一个非常重要的依赖的一个点。

好，那么我们保存一下，大家发现这页面迅速就更新了，这个更新的速度比web派不知道快多少倍，那么接下来呢，我们再去简单的去，呃，浏览一下我们view的这个项目的目录。在src的下面呢，我们看到这里头有一个man GS，也就是我们view的一个实例化的一个页面，这个代码呢，如果大家呃了解，或者是呃用过VIVO的话，或者是用过VI3的话，对这个语法呢，应该是不陌生的，那这个呃实例化的。

所谓的view呢，已经载入了一个组件叫app.view那接下来我们来看一下app.view这是一个最普通的view的单文件组件，那关于view的单文件组件的知识，大家可以去VIEW3的官网上去看一眼。那接下来呢，我们再来看一下，这里头还有一个components里边有一个hello word.view是一个view的组件，因为在APP的view里边呢，我们通过import载入过这个组件，但是大家仔细看一看我们script标签里边的这句话，它使用的也是import的方式去载入的，也就是说我们就可以放心的去使用yes module去完成我们的模块的管理了。那另外呢，在这里边还有一个access，这是我们通过V去管理的静态资源的目录，Public目录，这个大家应该都了解，这里边我们去创建的一些最基本的文件，比方说我们通过一个index-2.html，我们去构建一个HTML文件，我们可以在这里边呢去构建1HTML的一个模板，我们可以写一个test的TML保存一下，然后放在public目录下面的文件呢，我们在浏览器上面，或者在这个server里头呢，我们可以直接访问index-二叫ATM。

条，那我们看到这个文件了，那放到S2C里的文件是不具备这样的能力的，我们必须通过wait来去通过模块的这个打包才能够真正的访问到，也就是说我们现在的整个的为了项目其实是通过index的HTML作为入口来去访问的。那关于这里边的呃VIVO的相关的一些基础知识，大家可以参照呃VIVO的官网或者其他的一些视频来完成。

好了，这一节呢，我们给大家讲解了关于使用啊weight如何去构建一个项目，呃，以及weight项目的一个目录的分析。在下一节呢，我们来给大家讲解NPM依赖解析和预构建。