超级详细的Vue-cli3使用教程

  如果在电脑上已经安装了如果想要把其替换成的话需要先卸载原有的版本。
 
  卸载完成之后就直接安装就好了
 
  检测是否安装成功
 
  通过上面的步骤就可完成的安装。
 
  在使用创建项目的时候,直接使用这样工具就可以轻松创建一个项目,也是一样的,但是既然版本不同了,那么自然而然的会有一些新的选项。当然安装之后还是可以使用脚手架的,创建项目方法还是一样的。
 
  创建方法的命令是不一样的,需要和进行区分,使用的命令是:
 
  笔者觉得这样才更加的像一个脚手架,在通过命令创建项目的时候不会显得那么的繁琐。
 
  输入完命令以后在窗口中可以看到有关项目的一些配置选项。
 
  如果选择则会直接创建项目,创建项目包括这些工具,比如等其他依赖需要自己手动安装。
 
  如果选择则会进入下一步选项:(这里推荐大家进行手动配置)
 
  一般项目开发只需要选择、、就足够了。
 
  下面简单说一下选择不同的配置项会出现的不同的情况:
 
  TypeScript
 
  这里询问的是,如果在项目中想要保持使用的风格的话,建议大家选择。
 
  使用与一起用于自动检测的填充?这里一定要选择
 
  Router
 
  路由是否使用模式?如果项目中存在要求就使用(即:y),但是一般还是推荐大家使用模式,毕竟模式需要依赖运维。
 
  CSS Pre-processors css
 
  选择一种预处理类型,这个需要根据各个项目的要求使用那种编译处理了。
 
  Linter / Formatter
 
  只有在选择时才会存在。
 
  选择校验时机,一般都会选择保存时校验,好及时做出调整,如果代码风格和校验风格差不多的话,或者比较自信比较帅的情况下,可以考虑选择提交时校验。唯唯诺诺的我,选择了第一项。
 
  Unit Testing
 
  选择单元测试解决方案,普遍用到最多的时,这里就不多说了。
 
  E2E Testing E2E(End To End)
 
  选择端对端测试的类型。
 
  额外选项
 
  选择, 等自定义配置的存放位置。这里建议大家选择第一个,
 
  是否保存当前选择的配置项,如果当前配置是经常用到的配置,建议选择存储一下当前配置项。如果只是临时使用的话就不需要存储了,根据自己情况而定啦。
 
  选择之后则会直接开始创建项目了,选择之后则会输入一个存储当前配置项的名称:
 
  下次再创建项目的时候就会看到,自己所存储的这个名字啦。
 
  可以使用安装所需要的依赖,出了这个他还提供了一个其他的方法方法。
 
  既然可以使用安装为什么还要使用安装呢?官方文档中是这样说明:
 
  使用了一套基于插件的架构。如果你查阅一个新创建项目的,就会发现依赖都是以开头的。插件可以修改的内部配置,也可以向注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。
 
  基于插件的架构使得 Vue CLI 灵活且可扩展。
 
  通过上面的说明可以看出想要让脚手架工具变的更加的灵活,所以为我们添加了的插件,这些插件在安装时会修改里面配置(不是所有插件),而且还会在现有项目里面添加一些已经写好的范例文件(当然也是个别),但是有一点需要注意的是,这些命令会更改现有项目里面的内容。尤其是在使用或是效果还是蛮明显的。
 
  然而使用来安装的项目根本就不会帮我们做这些事情。虽然现在知道了官方提供了很多插件,但是应该从哪里看到呢?人性化的怎么可能会忽略这个问题呢?
 
  当我们在控制台输入上面命令之后稍等一会就会看到浏览器打开了一个新的页面,当然了,我们需要在电脑中找到我们的项目,导入进去。
 
  看到这个页面后点击导入,然后会看到一些文件夹,具有的项目会做出特殊的标识,找到对应项目点击进去。
 
  找到对应的项目,下面的按钮就可以使用了。页面也会同样的发生变化,就会变成下图这个样子
 
  插件标签下面展示的是当前项目都安装了哪些插件,依赖标签下则展示的是所有的插件,可以明确的看出,对于的依赖还有插件进行细致的划分。
 
  当我们想要新增依赖或者插件的话,进入到对应的页签下面,在右上角点击安装依赖(安装插件),这里就只说明一下安装依赖,插件安装相同。点击按钮后会发现当前所有的依赖,找到对应的依赖点击安装即可。是不是超级舒服。
 
  其他页签下面的内容,大家可以自行研究一下,我这里就不多赘述了。
 
  虽让已经推出很久了,但是网上一直没有一个比较好的教程,毕竟用的人也是蛮多的。的推出让脚手架更加容易上手了,并且还提供了图形解面以供使用,简直不要太舒服。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61723.shtml

张贴在2