18_尚硅谷_Vue_使用vue-cli创建项目

呃，下面呢，我们要去做view的主线化编码，就前面都是一些，呃，技术点的测试。那要组件化编码呢，首先要下载一个模板项目啊，这里面就有一个东西叫脚手架。这里面有一个说明，脚手架是这个官方提供的，这是这个脚手架，实际上本质上大家知道脚手架本质上是个库吧，对吧，这是它的get up的地址。啊，脚手架其实是从网上去下载一个模板项目，这是它里面的一个地址，这个都不用背的，知道就行，下面就是要执行一些命令了。首先呢，大家要把脚手架全局的什么。安装全局安装有个特点，就是你安装上了以后呢，就再也不用装了，是吧，到处都可见，装上这个脚手架以后呢，现在就多了一个命令，这里面多了个什么命令呢？没有啊，我首先我得检查一下啊，检查一下当前有没有。

我看一下我有没有这个命啊，哎，有是吧，就说明一个问题，什么问题。是不是我的那个脚手架的货，我已经全局安装过了呀，啊，这个我就不再去安装了，大家根据这个命令敲就行。好，那下面呢，我就在我这是我view的一个工作空间啊，View的工作空间就在这里。看一下就这啊，我准备在这个下面创建一个比的DEMO项目，我们看看怎么做啊。啊，其实非常简单，这个地方按照他的要求来去做就行，没有点什么呢，没有后面跟一个。好后面呢，啊，这个名字是固定的。嗯，是个什么意思呢？这个得去让大家去看一下这个它的。主页就这个脚手架。下面实际上是有说明的。他已经。我看一下啊。

他现在好像是是不是升级了，以前不是这样的，以前应该有一个比较详细的文档了。他现在没有一个详细的文档，我看一下他应该把文档放哪去了。以前应该是有文章的啊，看一下这个must。在这里。嗯，这个地方是一个什么意思呢，大家看到我们后面的名字可以有这几个可以写的。啊，View后面啊，跟一后面呢，跟一个名字啊，这个名称呢，我们称它为模板。也就是说，这个脚手架提供了12345，提供了六个模板项目。啊，可供我们选择。那我们去选的时候，其实选的最多的一个就这。就是我们这个脚手架，它的构建使用的什么呢？Onepa，那如果你选择这个，那它的构建使用的什么呢？啊一个东西叫啊OK以及其他的，这也是可以用来对项目进行打包的一个东西啊。

OK，那我们现在就选择这一个就行啊，外派你要知道啊，我们现在指定的这个命令里面的这一部分到底是一个什么样的意义。啊，它是一个模板的名称啊OK。那我们现在要做的事情就是要根据它啊写啊，这个不用背，大家只能参照写就行，View in指定我们的模板名称叫WiFi。后面指定是什么。我们项目的什么名称？能懂吧，下面的名称好了，我假设指定一个view啊，DEMO。可以吧，啊或者有可能我这个右边的都是大写的都可以啊，没问题啊，故意的写成大写都会看有个小问题。啊，他现在干嘛去了？其实很简单，Downloading什么意思？

下载模板是吧，其实下载模板项目。啊。好，等会他就会问你一些问题。啊，问你问题呢，需要确认大家知道一个项目必然会有一个文件叫什么啊，对啊，而这个节省里面是不是需要有一些配置选项啊，啊，其中有一个就是name。他问你的name用这个吗？你用就按键就行。啊，比如说我想用这个。Sorry，对不起啊，还挺客气是吧，说啥呀，说你这个里面吧，啊，不能包含大写，必须小写。那我就搞改一下呗，那没办法啦。那我就改呀。是不是view下划线代码啊，OK，好，接着问你的描述是不是这个啊。啊，就用他这个默认的，你也可以写一个自己的描述，其实这个都不太重要啊，有几个后面重要的，你的作者是不是这个啊，OK，确认一下还要。

好，接着你用不用root这个包暂时我们不用，因为还没学是吧，所以要输什么呢。N去漏嘛，好，问你用不用ES linkt啊，这一次我们要讲一下ES的使用，所以你可以按Y，也可以按T键，因为大写，大家看到现在Y是大写。看到吗？这说明当前是什么跟帮你选择Y，你确不确认，你确认N的键，你要不确认写个N啊，要不你也可以写个什么。WHY？啊，再按哪键啊，确认一下好下面这个啊，问你要不要用一个单元测试的库啊，我们这里面是都是基于功能来测试的，都是漏。嗯，这个也是啊，另外一个嗯，好。来说一下。这个里面啊，有几个需要注意的地方啊，第一个呢，是这个name。

啊，必须小写是吧，大家能看懂提示啊，啊接着几个都是确认确认就行，下面有一个。路由器现在不要。是吧，OK，接着两个，那个单元测试的包也不需要。啊，其他的默认就行，好接着问。你是要要用NPM下载吗？还是用Yan去下载。啊，还是说你要手动去下载什么意思，说明上面两个它都会自动帮你下。能懂吗？如果你选择第三个。那他马上就会结束。结束以后他会告诉你，哎，你应该怎么做呀。先进入。这个目录是吧，啊新中哎不是这个这个吧，啊接着干嘛。NPM你也可以或者使用什么一。

是跟NPM类似的一个，呃，一个下载的工具是吧，啊管理包的工具。好，这个呢就可以去下载，但是我刚才测验了一下，怎么着也要个十分钟。啊，我一直没跟大家讲，刚才很长时间都在那念，就是因为我一直没下载下来，等了半天了，都最后终于成功了啊那个。大家去下的时候呢，可能更慢，为什么呢？因为大家人多呀，是吧，所以我需要去，我已经下载好了一个啊，把依赖下载好了，我把这个呢给它压缩一下。啊，得发给你啊。大家都很聪明啊，这个压缩也很费劲，当然解压也费劲啊，其实它并不是有多大啊，就是那个文件个数吧。非常多。不看。啊，这个呢，我就不下了啊，因为太慢了。

好，那下载好了以后呢，我们可以做件事情来看一下啊。啊，相当于现在安装好了，下面是不是要打包运行呢，但是啊是开环境打包运行啊m PM run这里面有一个什么呢？D好，这个D是看的谁呢。啊，譬如说我们要运行这个它因为它已经下载依赖了嘛。NP让，为什么要让dev而不是让叉叉呀？对，你得知道要看的是什么pack JA，哎，这有一个D位，实际上我们可以n PM start。你看。不也是让地位吗？是吧，其实这两个命令是不是都可以用啊，都可以，只是这个start它可以简写是吧n start。啊，当然也可以run嘛。是不是让build啊，让build好，这是这个。

那也就是说现在呢，我们可以这么做啊，CDMPM让DV啊，现在呢，就可以将我们当前这个项目呢给他啊在。内存中进行打包。因为开发环境嘛，并且把项目运行起来。啊，第一次啊，稍微有点慢啊，接着呢，运行的那个账号是什么8080，它默认默认没帮你去启动。啊，默认没完成启动，你说老师我就想它自动启动怎么办是吧，那得改一下配置啊，现在我们看一下。啊，也就是说8080呗，我自己输一下先啊，来8080。不，这个吧。就可以啊，可以啊，没有问题。那后面呢，我们就是要基于它去写我们该写的一些代码，这里面有什么。

Component组件呗，现在它是不是有一个hello word组件，哎，这个组件文件名也比较特别，叫点什么view啊。啊，如果大家打开也能看到这个文件的结构，不过呢，这个大家其实应该是比RA的那个结构好看，为什么呢？因为它就是我们页面三要素，知道页面三要素的一个三个。啊，HTMCSS和什么GS，这一个部分写什么HTM，写模板的啊，OK，这一部分写什么script，写s style，写什么CSS，哎，这个他就管理的是相当好。就是写起来比较舒服。啊，不过呢，这些都得等到我们下午就开始做了啊行，我现在是不是已经。压缩压缩好了吧，应该得看一下，就这个是吧，哎，发给大家，大家别忘了解压啊，解压要点时间，大家解压一下就行。

嗯。好，下午呢，我们就基于这一个工程呢，去写模块化的项目啊。