22-尚硅谷-微信支付-初识Vue-初始化Vue项目

接下来呢，我们对view做一个入门学习，那目的呢，就是为了帮助大家认识一下view，先来说一下是什么。我们打开他的这个官网。那么我们会发现，其实呢，它就是一个javascript的框架，它是一个前端框架，能够帮助我们呢快速的构建前端项目，那我们使用view有两种方式啊，第一种方式呢，就是传统的在HTML文件当中引入脚本文件的方式，那么另外一种方式呢，就是脚手架的方式，也就是说我们要通过view c Li这个工具来安装view，而不是传统的直接下载一个JS文件，然后引入HT的方式，因为我们的项目呢就是采用的这个方式，所以呢，我们直接来讲这种脚手架，那首先呢，第一个步骤我们要安装脚手架，安装脚手架呢，和上节课我们运行前端项目使用的命令行工具是一样的，就是NPM这个工具。

它可以帮助我们安装前端的一些模块，然后我们用install这个命令，但是install这个命令默认情况下呢，它安装的这些模块呢，是从中央库下载，而这个NM模块的中央库呢，是在我们国内的网络环境下问起来比较慢的，所以呢，我们先要给它配置一个淘宝镜像，保证呢我们的下载模块的速度。那配置淘宝镜像的方式呢，就是这个命令，我们把它直接在命令行当中啊，粘贴上就可以了，然后回车，这样的话呢，我们的这个淘宝镜像就配置好了，配置好之后我们再用一个n PM install这样的一个命令呢，把我们的VICI这个工具给它安装上。那么杠G的意思呢，就是全局安装，也就是说它会安装在我们操作系统当中，这样的话，未来我们的所有的前端项目就都可以去使用这个工具了。

我们回车啊。把这个工具给它安装上。那么这里面如果出现一些warning啊，这样的一些警告提示的话，大家不用管它，这些呢，都是正常现象。我们稍等一会儿，让他安装完成。好，现在我们的脚手架呢，已经安装完成了，安装完成之后呢，我们就可以创建项目了，那我们可以打开之前我们安装的Vs code，然后进入到我们这个DEMO目录下，那么怎么去进入到这个目录下呢？CTRL加波浪线，我们会打开一个命令行终端，那这个呢，是我们Vs code的内置的命令行终端，它的作用呢，和我们操作系统当中的命令行终端呢是一样的，只不过呢，在我们当前的这个环境下呢，使用起来会更方便一些，那我们通过一个叫做view，也就是说刚刚我们安装的view CI那个命令行工具，安装完了之后呢，我们的系统当中就有view这个命令了，然后create啊，我们创建一个view的项目，比如说我们可以给它起个名字叫view DEMO，他回车。

那么他会询问你是创建这个V2还是V3，那我们目前为止企业当中用的主流的还是二哈，所以我们直接默认就可以了，然后回车。他会帮助我们创建一个V2的项目。那这个过程当中，它也是需要上网络上下载一些资源的，所以大家必须保证我们的网络是畅通的。

好，现在呢，我们的这个view的项目呢，已经初始化出来了，那么大家可以发现呢，这里面的目录结构呢，有点类似于前面我们的前端项目，只不过呢，我们的前端项目呢，里面真正的内容呢，要比这个还要丰富一些哈，好，这其实就是我们的一个项目的一个基础架构了，那么在这个呃架构下呢，我们就可以啊去运行它了，那么运行这个项目的方式呢，和前面呢也都是一样的，我们可以按CTRLL把前面的这个啊命令呢给它滚动上去啊，这样的话，我们的操作空间呢可以大一些，好，那么现在呢，我们是在DEMO目录下，那我们呢，首先需要进入到这个DEMO目录。所以呢CDDEMO进入到这个view DEMO目录之后呢，我们就要运行一个命令行程序来将这个view DEMO项目呢启动起来，所以呢，我们运行的是n PM serve，跟前面那节课我们运行我们的前端项目呢是一样的啊，如果是这种情况下，我们按回车的话，那么它也会在8080端口启动，如果你的8080端口已经被占用了，需要选择另一个端口的话呢，那么我们需要给它指定一个端口号的参数，那这里面有两个参数哈，第一个参数呢是我们不需要指定，那它是一个占位符，那我们呢就杠杠空格就行了，第二个参数呢，它是端口号这个参数，所以呢我们指定为portt，然后88888尾车。

这样的话，我们的应用程序呢，就会在8888这个端口启动了，那么我们可以在这个位置按住我们键盘上的CTRL键，然后点击它就会自动给我们打开浏览器啊，来访问我们刚才的这个前端的这个应用程序，那这个是我们前端这个应用程序的默认界面，那这个界面在什么位置呢？我们可以通过点开src找到它APP，就是我们刚才看到的这个页面了，当然这个view的程序呢，和我们传统的程序是不一样的情况下呢，是没有HTL这样的的，那这个是我们开发的时候，那未来如果我们把这个前端的程序部署在真正的生产服务器上的话。

那这些文件呢，就都会被转换成我们熟悉的HT件和javascript件，那么在开发阶段呢，我们通过脚手的形式装的是存，所以我们所有H和Java存这样的一个形式的文件当中，那我们把它打开，打开之后呢，这里面第一部分呢，就是template template里面写的呢，就是我们整个应程序的显示内容是我们H部分，然后第二个部分就分，就我们当中需要用到的脚本都会写在这个里面，那第三个部分呢，就是style呢，就是这个页面，当如果有一些个性化的样式的话，会写在这个里面，那这个呢，就是一个最简单的view的一个页面组件，好，然后在这里面呢，我们把它默认的这个页面组件呢，先给它删掉啊。

我们填充一下我们自己的内容。样式呢，我们也不要了。好，现在我们看到的这个页面呢，实际上就是最简单的一个应用程序了，那我们现在写的是最简单的应用程序，所以前面这个ID也可以不要，所以默认情况下呢，我们如果想要创建一个组件的话呢，就是这样的一个结构，前面呢有一个template，然后template里面呢，必须有且只能有一个根节点，然后所有的页面当中的内容呢，我们必须要写在这个根节点里面。

好，那这是我们的页面的结构部分。好，那么接下来下面这个位置就是我们的页面脚本部分了。那我们在这个地方呢，先随便写一点内容，比如说我写一个叫做六案例，好，现在呢，我们来看一下刚才的页面，那这个就是我们编写的第一个页面当中的元素。