43、前端基础-Vue-使用Vue脚手架进行模块化开发

前面呢，我们学习了一下尾U的一些基本用法，包括在后来的开发过程中，完全也可以引入一个尾U的GS文件，使用尾U给我们提供的语法功能来简化我们的开发。但实际上呢，我们在使用维U开发项目的时候，我们大多使用它的模块化环境，包括我们搭建的这个后台管理系统，它呢也是使用5U的模块化环境搭建的一个单页应用，我们在这呢只看到了一个HTML页面，其他所有的功能都是通过来编写5U的相关组件，我们比如进入src，我们这里有很多的什么什么点5U文件，点5U文件，这些都是我们后来编写的这些组件，通过这些组件模块化组合来生成我们强大的功能，那在这种环境下，我们该如何开发呢？我们可以来搭建一个模块化环境进行测试，首先呢，我们需要使用NPM全局安装两个工具，一个是web pack，它可以用来把项目进行打包，一个呢是咱们这个。

View u c，我们的5U的命令行程序，这两个呢，不依赖于任何项目，我们可以给它全局安装，只要我们安装了note GS，我们就可以使用NPM命令。好，我们Windows r cmd，我们先来全局安装上第一个web pack，我们使用npm install，我们要安装web packnk，我们写一个杠G，那这就是全局安装来回车，这是我们安装的第一个，接下来我们再来安装第二个，来同时打开CMD，我们就不等它了。而且呢，有些同学在这安装的时候，有可能在这鼠标点一下这就不动了，我们需要呢，将咱们这个控制台右键这有一个属性，一定要把这个快速编辑模式去掉，否则的话呢，我们鼠标在这点一下，它就卡在这儿了，以为我们要输入字符，诶这个是非常的一个细节，好，我们把这个we pack装好了以后呢，接下来我们来继续来装我you的c n PM install。

杠G还是全局安装我们的5u c Li呢，它的名字叫ant view u-C的in工具好。那么这个装好了以后呢，我们这个基本的两个依赖就装好了。我们接下来呢，就可以使用VIVO的这个CI工具，帮我们使用这个命令快速的创建出我们一个模块化的脚手架工程，这个命令呢是view in web pack APP name，它意思呢是使用view初始化一个我们这个应用，应用名呢叫它我们是使用web pack模板创建的，好，我们来测试一下，那就是给桌面呢。创建一个文件夹，我们准备让这个文件夹来保存我们项目内容。好，我们在这呢搭建view的模块化开发环境，我们CMD进来，我们可以使用will in it web pack，接下来呢，写上我们的应用的名字，比如我们还叫will DEMO回车。

接下来呢，他就会联网帮我们来下载，然后呢会确认一些项目信息，比如我们这个项目名是否叫我DEMO，那如果不变，我们就直接回车就行了，包括我们项目的描述信息，如果有就自己在这输，没有我们就直接回车就行了，比如我们的唯有DEMO，然后呢，我们来回车，包括作者的信息等等其他的，诶这一块注意我们这个项目构建信息这一块可以上下键来选，我们就选择上边啊推荐的这个运行环境加编译环境啊回车包括是否要安装view root，它来做页面跳转的，我们可以写上ES，包括是否使用ES Li，这是来做代码检查和语法格式化规范等等的，那不想用了，可以写一个N好回车包括呢是否使用单元测试好，我们也不用了，是否使用这个单元测试我们也不用了，包括我们这个包管理工具，我们可以上下选择不同的包管理工具，我们现在都是使用NPM。接下来呢，他就帮我们开始来创建下载相关的依赖。

好，到这儿呢，我们这个环境就搭建起来了，包括呢，我们这儿还会有一个如何来启动我们这个环境，我们可以先CD进来，诶我们看一下我们在这初始化的项目，这个VUDEMO文件夹里边还有一个维UDEMO点进来，这就是我们模块化的环境，那我们想要把这个项目运行起来，我们可以首先哎，我们来看一下DR，这里边还有个VOUDEMO，我们先CD进来，CD view DEMO，然后呢，接下来按照提示我们可以n PM run de，好，N PM run dev，那项目呢就运行起来了。你们稍等一下。那运行起来的效果呢，就是我们可以查看本机的8080端口，好，来访问一下local post 8080，好，这就是我们使用VCI帮我们搭建的模块化脚手架工程，我们呢，就来看一下在这种环境下如何开发它的这个脚手架工程呢？我们来看一下它里边有超多的文件夹，那我们就直接把这个关了，我们在Vs code里边打开，我们来适应一下这种开发模式，好，我们打开will DEMO will DEMO里边，好，我们选择文件夹。

现在这就是我们刚创建好的这个工程，我们想要运行它，我们刚都测试了，直接使用n PM run d就行了。等待启动起来以后呢，我们就访问本机的8080 CTRL按住点一下就访问过来了。在这里如何进行功能开发呢？我们先来看一下它的整个项目的文件夹组织结构，首先这个build文件夹，这是跟我们打包工具web pack之类有关的代码，在这里边放着，Con呢，那就是些配置信息，主要呢，包括我们一些端口配置等等，比如我们进inex GS里边，我们可以看到呢，我们当前访问的这个八零端口，我们可以在这进行配置，如果我们改成8081，我们来保存。项目呢，让他重新启动。

我们CTRLC停掉们用n PM run dev。启动起来呢，我们就发现它现在已经变成8081端口了，这都是一些配置，我们可以用默认的，先不用管这node models，那这就是给我们当前项目里边安装的所有依赖我们使用n PM install给项目里边安装的，我们可以都放在这儿，我们也不用管，而这个src，那就是我们编写代码的文件夹，那点开这里边呢，有非常多的文件，我们后来呢来仔细来说它，我们以后呢，所有来写功能基本都集中在src这个目录下，那static呢，里边就是一些静态资源文件，比如我们可以存放一些图片啦，字体文件等等等等，接下来呢，这一块就是一堆的配置文件，这个是bble的，我们这个语法转译的相关的这些配置，这都是默认生成的，包括呢，我们这get相关的配置这几个我们就不看了。这个index htm2，这就是我们这个首页内容，我们发现首页呢非常简单，只有一个ID加APP的这个div元素，然后呢，接下来package杰森，这就是我们NPM依赖包的一些配置信息，我们每安装一个依赖在pan杰森里边呢，都会有相关的这个dependency，我们在这儿都会声明好，包括这个page lock杰森，那我们每一个依赖的详细信息都会在这儿列出来，包括呢，他去哪里下载，它的版本号是多少，都有一句话，我们开发期间呢，安心关注src里边的代码，以及在src里边我们来编写相应的功能就行了。那接下来呢，我们就来看一下我们整个项目呢是如何运行起来的，到最终展示出这个页面。首先呢，我们整个项目里边有一个inex HTML，这是我们的主入口页面，这个页面呢非常简单，只有一个div，它的ID是APP，然后在我们src里边有一个非常重要的文件，叫慢点GS。

这个呢就是我们主程序，这个主程序呢，首先创建了一个唯有实例，这个实例呢，就是来挂载我们页面的这个APP元素，接下来呢，我们这使用了VU的这个路由，它的这是简写写法，实际它的全写呢是route route。

也就是说呢，我们页面跳转怎么着是按照这个规则来的，而我们这个root是从哪来的，我们从上边呢，由import导入了一个这个路由配置，那么这个路由配置呢，我们可以看到它是点杠，点杠的意思呢就是跟慢是同启目录在这个root里边，诶相当于我们导入了root这个文件夹下的这些内容，这里边呢有一个index GS我们看见，诶他们呢是使用export default，我们说它导出了一个组件，而且导出组件的时候呢，没起名字，我们在这导入的时候可以随便写一个名字，这是我们说的ES6里边的导入导出语法规范，相当于呢，它挂载了APP，然后呢，使用了我们这种路由规则，而且呢，Components叫组件，组件呢，相当于我们在这个5U里边使用了一个组件，什么组件呢，叫APP，那这个组件从哪来，那前面导入进来了，而且这呢也是简写写法，那它的。

全写呢是a PA papp，因为我们说属性名跟它的属性值的变量名一样的时候呢，我们可以简写过来，那相当于呢，我们有一个组件名叫APP，它呢是导入到我们这个当前路径下的这个APP点5U，把这个组件呢，我们称为一个为U的单文件组件，我们后来再说它相当于导入了这个组件，那我们这个元素最终怎么渲染呢？它指定了一个template，也就说我们这个模板，那模板呢，相当于使用了这个APP组件，那APP组件长什么样，那我们最终我们应对HTML页面里边这个APP元素就长什么样，那我们正好来看一下这个APP组件，我发现这个组件呢，首先它分为三个部分，一个是tempate，一个是script，一个是style，这是一个标准的维U里边的单文件组件，在维U的官方文档里边呢，也说过这个事情，我们来看一下它单文件组件，然后我们以后模块化开发的时候，我们会经常写。

非常多的这些什么什么点5U这些组件，那怎么写呢？就是这样三个部分，首先你写templt，这个呢，就是我们的模板，我们页面要显示成什么，接下来写script，那就是我们5U实例的这个代码，我们以前5U实例里边该怎么写，有它的mans也好，Data也好，我们这一块呢都能写，接下来呢，是我们当前这个模板的这些样式，我们可以在这呢进行规定，那我们现在这个APP5U模板呢，它就长这个样子，首先image，我们一个图片引入了access，就是我们src这里边的，诶logo图片，所以呢，我们现在能看到我们页面上呢，这有一个图片，诶这个图片呢，那就是这个样子的，我们引进来的，接下来呢，我们来看下边呢，是一个叫route view，这个root view呢叫路由视图，路由视图的意思呢，就是说我们现在呢这个。

对面上边显示的是一个图片，下边显示什么，要根据我们页面的访问路径来动态决定，而访问路径呢，我们现在看我们当前页面呢，默认是杠，我们这唯有的单页应用使使用的是URL哈希的这种访问路径方式，所以呢，这是一个动态的视图，那动态视图呢，我们接下来就得看了，我们这一块该显示什么，那其实呢，我们现在是访问杠杠该显示什么呢？我们一切都在慢，GS里边说了，我们这个VU的路由是使用这种规则，相当于导入了我们这个root里边的这个，这个里边呢定义了好多路由规则，其中呢，有一个路由规则是这样子的，首先呢写了一个叫杠，那杠呢就是我们访问杠路径会呢，使用我们这个组件名叫hello word组件，也就说我们当我们访问杠的时候，显示我们唯的hello word组件，而hello word组件从哪来？我们能看到import也是继续导入的。当然我们要使用。

VU的这些路由功能，以及view u功能，那们这两个呢都得等，所以呢，我们来看一下，我们在这一块呢，就要使用hello word组件，它怎么来导呢？写了一个an特服，Ant符呢，就代表我们当前src整个目录的根目录，在components下边找一个hello word，诶这个组件，那这个组件长什么样子，我们就可以看到temp里边来规定我们页面的模板，Script里边呢，就是我们以前5U的写法，我们style里边来写样式三个模块，然后呢，我们这一块就是这么来写的，首先这展示一个message，用H1展示一个message，那就是在这这个message是什么呢？那就得看我们这个script里边message咋写的来，我们这个message呢，叫welcome to your view g，所以我们这块展示的是这句话来，我们写成什么，那就变成什么了，我们保存它会自动重启，哎，我们这一块呢，是这个8081端口，我们把刚才的那个页面。

小心给关了，我们访问8081，那现在呢，就变成我们自己写的样子，那接下来呢，还要展示哪些，我们还可以看到，诶剩下的都是一些超链接啦，这是我们以前的这HTML页面模板，我们随便想怎么写，以前怎么写就怎么写，那接下来呢，就全部按照要求展示到这，这相当于呢，我们访问了一个杠路径，展示了我们一个组件，那现在呢，如果我现在有一个要求叫访问哈，给我们显示一个我们自个儿的组件。我们要怎么做呢？首先我们可以自己先编写一个组件，组件呢，我们还是放在components下，这个view u的单文件组件我们随便来写一个，我们就叫hello组件，Hello点为好。这个组件呢，就写在这组件的三要素，首先来写template，然后呢再来写script，最后呢再来写它的style，哎，我们装了插件呢，这都有提示style。

或者呢，我们直接将我们以前的这个组件可以复制来进行使用，行，我们就来自己写一个组件，然后这些呢都保存一下，我们这个组件呢，里边呢，就来显示一个H1你好。哎，再来写一个hello，当然我们这个名字叫什么，我们可来可以来写一下这个人的名字，我们这个export defportult，那就是把这个组件导出，这是一个对象，这就是我们这个5U实例，我们5U实例以前呢，里边来写了data，那我们继续可以来写data来我们推荐呢都是写函数的方式，用组件呢，这个data要写成一个函数，好我们给它return一个对象，这个对象里边呢有一个name值，我们就叫张三，诶我们是给张三打招呼，那在这来进行显示，好我们这个组件写好了，要想使用，而且我们是访问hello进行使用，那我们接下来要编写路由，我们发现呢，慢GS导入的路由都在这个root目录下们在这个index GS里边，我们自个儿再来添一个路由，好就在这儿呢，直接写上路由呢，首先写一个pass，叫我的访问路径，我的访问路径呢是杠hello，当前项目下的这个哈，当访问这个哈呢要。

要给我展示成啥组件，我们要展示成我们这个组件来，组件名我们先放在这儿，我们是哪个组件，我们来说一下，我们想要展示这个我们刚写的这个hello组件，那要用这个组件都得先导入，所以呢，我们在这写一个import，我们来导入哈，这个组件from从哪里导入呢？我们来写上an，从我们src这个components文件夹下，那有一个hello，好，我们把这个hello呢就导入进来了，我们在这儿来使用我们这个组件的名字呢，我们也叫hello保存，那相当于访问杠，Hello就会来到这儿，那我们来访问我们这个当前项目杠，哈喽，我来回车，诶我们发现了，变成这样，这一块呢叫你好，张三，那我们再来访问杠，那又变成这样，相当于呢，我们访问杠就会访问hello word组件，那就是我们之前的这一大堆，有一个大标签message，而如果我们访问杠哈就变成我们这个组件。那为什。

那么这个图片不变呢？那就是以由于我们在APP尾U里边，上边是图片，下边叫路由视图，只要我们访问路径变了，只有路由视图这一块的内容变，上边的图片不变，这是图片，下面这一部分都是路由视图，当然我们希望点击超链接变到这儿，那我们可以在view里边使用我们这个功能，比如呢，我们在这有一个超链接，诶我们就叫去hello。

去hello，那去hello呢，我们想要给它跳转到这，我们需要结合唯的官方文档，在唯U的路由呢，专门在唯U的rootta里边有详细的介绍，我们就先来简单的用一下，怎么用呢？我们先想让它动态的导航过来，我们在这儿起步里边，我们直接可以使用这个标签叫roer，诶，我们不能写原生的A标签了，我们可以使使用一个叫RO link。然后呢，我们就叫去hello，那接下来呢，我们就写一个to去哪里呢？我们去hello，因为这个hello呢，我们在这个root router里边已经做了这个路由映射，我们访问它就会来到这儿，所以我们现在看到的效果就是这我这有一个去hello，我点一下诶就来到这儿了，包括呢，我们在这儿再来写一个去首页。我们直接全部在我们这个APP里边，这有去hello去首页诶我们都能使用了，去首页好，我们呢就来访问一个杠，点击了他们我们这个ROU的位置就会被我们真正的路由组件所来替换过来，我们现在来测试一下去首页去hello去首页好，这就是我们模块化里边，我们自己来编写尾U组件进行开发的整个过程。