前端VUE学习之初识vue-cli(脚手架)

2021/7/15 23:18:02

本文主要是介绍前端VUE学习之初识vue-cli(脚手架),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

        前端的学习又进入一个新的篇章——vue-cli,感觉学习的难度有亿点点提高,所以写一些笔记来巩固对vue-cli的学习。

一、了解vue-cli

        vue-cli又称脚手架,说白了就是一个便捷开发项目的家伙,因为vue-cli可以自动构建出一个项目的骨架,以及配置一些复杂的webpack文件配置,在这里,如果深入了解过webpack这个玩意的话,会深刻体会这个玩意是多么复杂(至少我是这么觉得的,webpack安转这个配置那个,晕...),所以啊,感谢大佬发明vue-cli,确实省去了一些构建项目的困难

二、安装vue-cli

        对于vue-cli的安装来说,这到不是个难事儿,首先,你嘚安装Node,然后,你嘚有npm,再而,你的Node和npm嘚达到一定的版本,这样就直接通过电脑的cmd输入命令

npm install -g @vue/cli

 这个是在你电脑进行全局安装,这不用像那个webpack用局部安装较好,vue-cli直接用全局安装就挺好,这样安装后,没出啥大问题的话,就会直接装好最新版的vue-cli(我自己安装的时候,用npm没啥反应,实在是太慢了,就换了那个淘宝镜像cnpm,cnpm真的挺好用的,强烈推荐!!!)

        在我们装好vue-cli之后,因为它不是最新版的嘛,我们学习总要从最前边开始了解(就像之前html,css到h5,c3一样)现在最新的vue-cli到了4的版本,但不慌,我们可以通过

npm install -g @vue/cli-init

就这串代码,同样是在你电脑里边cmd上,全局配置拉取2.x的老版本,这样你想用啥版本用啥版本(上头的安装我同样是用cnpm     yyds!!!)

三、用vue-cli初始化一个项目的过程

        前边咱安装好了vue-cli之后,现在就要对这个vue-cli来try a try看看到底有多么方便,下面就来先看看vue-cli 2.x这个老家伙的初始化。

        这个首先,你嘚创建它,就像下面这样(我用的是vscode,也挺好用的)

vue init webpack test

后边那个test就是个名字,也可以随便取,问题不大,创建好后,就开始了初始化的一大堆问题。

 先问你名称(这个推荐和上面一样,反正就你项目的名字,想咋取咋取)。

然后,这段,是想请你写一段对你项目的描述,没干正经开发的时候,也可以随便写,默认就是这个(A Vue.js project)。

 然后,这个是问作者,一般都写自己名儿,或者你自己喜欢的代号。

 接着,这个就比较关键的一个家伙,它有俩选择,其实也就是问你构建项目的方式,上边那个是Runtime + Compiler的方式推荐给大多数使用者,下边那个是Runtime-only的方式,他们都有优缺点,但还是下边那个比较好用,so,我们一般选下边那个(我也没有研究二者的区别,嘿嘿)

 接下来,这个是问,需不需要安装路由,这个和后边的vue全家桶有关,反正在这个初体验之中,就不选了。

 这个问的是,要不要添加一个规范你代码格式的东西,这个也是非常的银新华,只要你不按着他的规范来,诶,他就给你报错,如果你选了Y,那么它会弹出两种规范,这也是看需求选择,但,咱还是对自己写的代码比较的有自信啊,就选n好了。

  后边这俩有关测试的配置,不关咱啥事,就都选n。

 这是最后一个选项,问是用npm来安装还是用yarn,我想,对于咱来说,npm绝对熟悉,但这个yarn就挺陌生了,不过问题不大,反正俩家伙作用大同小异,就选咱熟悉的npm(其实在npm发展成熟之前,还是yarn用的多)。

         最后就是一顿安装,然后就出现了一个满满内容的文件夹。(大概步骤就是这样)

写博客主要是为了自己无聊的时候巩固复习,若是看到,那可不就是有缘人,哈哈哈。



这篇关于前端VUE学习之初识vue-cli(脚手架)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程