前端初学vue理解篇和安装篇

刚刚开始学习vue模块,首先接触的是vue安装,之前本来利用的webstorm里面的html进行写的,但是还是利用这个博客来记录一下自己的学习历程,以防自己忘了。

  • 首先先简单的说一下有关于前端框架和库之间的区别,说实话,到现在为止干程序员也干了快两年了,算上实习的一年内已经是三年了,实习的一年没有接触到项目,之后第一次做项目就是用的bootstrap的框架,当时觉得框架的东西就是比较简单,直接用,不用自己写很方便,之后虽然在之后的项目里面前后端都在写,java框架,springboot,springmvc,直到现在使用的微服务,后台连接数据库用的是mybatis,jfinal,之后自己写sql语句,mysql和oracle数据库之间方言(每个数据库有自己特殊的函数或者是方法)的使用,觉得自己还是比较擅长前端的一些东西,可能是前端是看得见摸得着的,所以在做出东西的时候有点成就感,说的多了,还是回归正题。就是前端框架和库有什么区别,库比如就是引入一个js的文件,之后利用这些成型的方法,简便开发,那么框架呢,其实也是一个概念,只不过框架功能更多,比如简易的dom的操作,发送请求,模板引擎,路由功能,这些都是集成的比较成熟的方面了,所以用着方便,而且同一,代码看着整齐,有利于代码的观看。
  • 好了说了这么多那么vue是怎么回事呢,其实是一种有着自身行为的框架,我总结是需要四步,1、它需要初始化,2、自身行为(就是执行你所编写的代码),3、销毁资源,4、释放资源​。大致是这几个步骤,当然vue里面有着自己的生命周期,下面就是vue的生命周期,虽然到现在我还不是特别熟悉。

  • 接下来终于要说道安装了,​​​​​网上安装的例子有很多,这个我就自己写了一个以便于自己的学习,

  • 第一先安装npm,这个在cmd里面打出命令,npm -v则可以看到npm的版本,npm自己去查询怎么安装;

  • 第二利用 npm install -g vue-cli 全局安装vue脚手架

  • 之后利用vue命令是否出现vue信息

出现了vue的一些信息,这个时候可以使用vue的命令进行初始化建立一个项目了

这个时候我出现了一个错误,查询了一个解决方法就是先要清除一些缓存,之后首先,先要检查一些脚手架是否安装了

分别查看是否安装了这三个,要是都存在对应的版本号,则正确

node -v(小写v) ;如果没有显示node版本,先去官网下载安装node

vue -V(大写V) ;如果没有显示vue版本,npm i vue-cli -g安装

webpack -v(小写v); 如果需要重新安装,就用 npm install webpack -g

如果都正常,则可以使用命令进行清除缓存之后在进行项目的初始化 清除缓存命令:npm cache clean --force 建立项目的命令:vue init webpack projectName,之后一路回车就会出现了以下情况

会出现以下目录结构,之后在webstorm里面的Terminal里面在项目的文件夹里面,my-vue(我自己起的),进行项目的初始化,npm install,之后在进行 npm run dev ,则复制出来的localhost:8080(有的时候不是这个啊,需要根据自己的情况而定),在浏览器里面就会出现vue项目的欢迎页面了,今天就到这了,算是给自己一个记录,说的有不对的地方,欢迎大家批评,要是有什么不清楚或者是有疑问的可以添加我的qq1029273212大家一起学习。

猜你喜欢

转载自blog.csdn.net/qq_34237136/article/details/83743575
今日推荐