云裂变营销网

标题: 前端入门框架前的几个大坑(小白向) [打印本页]

作者: 匿名    时间: 2022-1-4 15:55
标题: 前端入门框架前的几个大坑(小白向)
入门前端?

说到入门前端我又想到了这张图,大概是比较真实的写照了吧哈哈哈

前端入门框架前的几个大坑(小白向)-1.jpg

不知道图片来源是哪(侵删)

其实图的前三个小图就是入门前端的部分,不过框架react和vue二选一就好了
但是呢,其实入门前端的过程在我理解里是这样的

前端入门框架前的几个大坑(小白向)-2.jpg
这时候估计有人就觉得不对了,中间为什么多出来一个node+npm的东西,这东西不是在vue之后学的吗?
我只能说,是的,这东西是应该在vue之后学,因为这些东西相对来说会比较复杂,但是这里就有一个很难受的点了,因为
用vue写项目是建立在这两个东西的基础上的!!
所以说,vue入门前的一个大坑就是这两个东西的学习!!
有不少小白会在这里不知所措,举个例子

学习vue前的项目结构是这样的

前端入门框架前的几个大坑(小白向)-3.jpg

学习vue前的项目结构

开始学习vue时的项目结构是这样的

前端入门框架前的几个大坑(小白向)-4.jpg

学习vue时的目录结构

普通小白到这步就会各种花式&螺旋懵逼好吗??
但是突然变成这么复杂的结构和vue并没有半毛钱关系,所以vue官方文档并没有提到这部分,所以很多人就更懵逼了
好的,这时候我可以明确的告诉你们,变成这样是node和npm造成的,下面我就具体说说入门vue前怎么跳出这个大坑
什么是node和npm?

首先,什么是node?
js这东西本来只是在浏览器中运行的一个玩意,但是用的人越来越多,有人就想,能不能给js做一个环境,让它来操控操作系统呢?答案当然是能,于是乎,node就诞生了,它的诞生也标志着js不再是单纯的js,其他的活也都能干了
然后,什么是npm呢?
npm是一个包管理器,那么什么叫包管理器呢?
是这样,大家写代码都不会从头开始写,就像你操作dom,会使用jquery,但是不会自己写一个jquery一样,这个叫站在巨人的肩膀上开发
但是久而久之,巨人越来越多,你如果要自己写代码,要安装很多别的大佬写的模块,总不能一个个的去下载吧,这多麻烦啊,这就是npm需要解决的问题,有一个集中的地方去收集大家写好的包,你只用敲一行简单的命令就把大家的包装到你这里了,直接可以使用,而且有一个统一的地方,你也能方便的去找到其他大佬写了什么模块,防止重复开发,好的,完美~
为什么入门框架的时候,项目结构变成了这个样子?

正因为出现了上面两个神器,前端开发开始不仅仅是前端开发了,为什么呢?
首先因为有node,我可以调用操作系统的资源,那我完全可以自己规定一些语法和文件,没必要去写html,css和js,最后调用操作系统的资源生成html,css就可以了呀~
其次因为有npm,我完全可以直接调用其他大佬写的模块,自己就不用每次在网上搜模块,下载,安装了呀~
所以前端项目结构就慢慢的演化成了上图那个样子,虽然极大的提升了开发的效率,但是对于小白而言,入门的门槛明显就变高了
了解了这些后,咱们来聊聊这个项目结构是怎么去理解
理解项目结构

看到这里时,首先要保证你的电脑上安装好了node和npm,建议用nvm安装管理
我这个项目结构是用vue-cli3 执行 vue create "项目名"  生成的项目
首先先看这三个文件(文件夹)

前端入门框架前的几个大坑(小白向)-5.jpg

npm相关

上面讲了npm是一个包管理器,那么咱们安装别的人的包是怎么安装呢?一般用npm install “包名“就能安装了,安装后的包放在node_modules里面,安装了哪些包会在package.json里记录
那么package-lock.json是干什么的呢?简单来说它是为了防止你需要重新安装项目时,下的包版本不一样,这里记录了你下载的包的详细信息,锁住版本号,防止出现因为版本不一样带来的问题
接下来看src这个文件夹

前端入门框架前的几个大坑(小白向)-6.jpg
src是source的简写,这里放的就是你写项目用的源码了,这里的内容就都是你写的并且和你项目相关的内容
这个src结构是vue生成的,main.js是这个项目的入口,看vue项目的话从这个入口开始看就好了,这里的main.js
components是放一些vue的组件,vue是用组件化的思想来写页面的,也就是一个页面是由很多大大小小的组件组合而成的
app.vue是项目的最外层组件,其他小组件写好了直接拼装到它肚子里就可以了(可以先这么简单理解)
assets是放一些静态资源,比如常用的图片
好了,现在大家可能差不多对这个目录结构有点印象了(没提到的想了解的可以去查查,和这篇文章主题没关系,不用了解也能写项目),但是可能还是不太理解浏览器怎么运行这个项目,别急,我现在说
这个复杂的项目结构浏览器是怎么运行的呢?

有人就很诧异,app.vue是怎么运行的,这个项目又是怎么运行的,这么复杂又没有看到html文件,怎么打开呢?
上面提过,使用node调用操作系统资源可以把这个项目编译成html,css,js文件对吧,现在就说说具体是怎么搞的
首先打开package.json这个文件

前端入门框架前的几个大坑(小白向)-7.jpg

package.json

这个script里的内容就是一些做项目比较常用的命令,npm run "命令"就能运行,比如npm run serve,重点是build和serve这两个命令
先说说build这个命令吧,执行build这个命令的时候,就开始进行项目的编译了,执行需要一段时间,然后会在项目的根目录生成一个dist文件夹,这个文件夹就是你项目的精华所在了,你在项目中所写的所有东西都被打包进这个文件夹了

前端入门框架前的几个大坑(小白向)-8.jpg

dist文件夹

打开看看,这里面是不是就是你熟悉的html,js,css了呢?这个才是你浏览器应该打开的内容
但是呢,每次对项目有一点点改动就生成这么一个文件显然是不方便开发的,于是乎就有了serve命令
执行npm run serve,会打包编译出一份虚拟的html,css,js文件,放在内存里,并且对你的项目进行监听,项目有变动它就自动重新打包,这样是不是就方便多了~

前端入门框架前的几个大坑(小白向)-9.jpg

执行npm run serve之后的显示

那么我们怎么去查看到这个虚拟的文件呢,执行这个命令的时候会有提示,项目在localhost:8080运行,对的,我们用浏览器打开这个地址就能看到我们的项目了,并且对项目的更改会实时的同步在这里~
有的人可能会有疑惑为什么执行npm run serve之后命令行像是卡住了一样没有接着出现输入的地方,
因为需要监听你的项目的改动是需要启动一个服务的,这个是正常现象,输入ctrl + c的话可以中断服务,但是localhost:8080也就没有任何显示了,如果需要重新启动服务就需要重新输入这个命令
好的这篇文章就到此为止了,这个大坑我大概也说完了,写vue项目的时候直接在src文件里写,然后用npm run serve来跑项目就好了,这就是一般的vue开发流程
写在最后的话

为什么没有提webpack,这个是入门的坑吗?
对于之前入门vue的人来说确实是,但是现在越来越提倡无配置编程,对于小白来说,不了解webpack是完全可以做简单的项目开发的,尤其是在使用vue-cli3的情况下,而且相关的配置也都隐藏起来了,这也是为什么vue-cli3创建的项目好像比vue-cli2创建的项目少几个文件夹的原因
为了避开前期webpack复杂配置的迷惑,创建vue项目最好使用vue-cli3,跟着vue-cli3的官方文档走
写vue项目的时候js文件里为什么有很多没见过的语法?
这些都是es6的知识,看到了不理解的去查一查就好了,建议参考阮一峰的es6入门教程
作者: 匿名    时间: 2022-1-4 15:56
你好,我可以跟你学习前端嘛?
作者: 匿名    时间: 2022-1-4 15:56
膜大佬学长
作者: 匿名    时间: 2022-1-4 15:57
真的非常感谢!
作者: 匿名    时间: 2022-1-4 15:58
大佬!
作者: 匿名    时间: 2022-1-4 15:58
可以先私聊看适不适合~
作者: 匿名    时间: 2022-1-4 15:59
你好,我可以跟你学习前端吗?
作者: 匿名    时间: 2022-1-4 16:00
多谢大佬,正要来学Vue
作者: 匿名    时间: 2022-1-4 16:00
maven的功能是不是跟npm一样呀大佬
作者: 匿名    时间: 2022-1-4 16:01
嗯,都可以做包管理,maven主要是针对java的
作者: 匿名    时间: 2022-1-4 16:01
这个太棒了,我就螺旋懵逼了一整天。。。
作者: 匿名    时间: 2022-1-4 16:01
近期我想学习前端,小白不知道去哪里学,学了到底好不好,能给些意见吗?
作者: 匿名    时间: 2022-1-4 16:02
当初学完HTML、CSS、JavaScript和jQuery后看了vue文档,感觉还好,然后用webstorm生成vue项目的那一瞬间我彻底懵了,然后就跑路去看python了。。。。。
作者: 匿名    时间: 2022-1-4 16:02
其实书的话还是比较推荐看JavaScript高级程序设计,虽然会比较枯燥,但是会把前端技术原理讲的比较透彻,我认为学技术最重要还是基础,基础好了,框架什么的就都很容易上手的
作者: 匿名    时间: 2022-1-4 16:03
前辈,求更,持续关注中!!
作者: 匿名    时间: 2022-1-4 16:03
膜拜!
作者: 匿名    时间: 2022-1-4 16:04
我是培训学的前端,不建议零基础去培训,先自己看点视频,私我联系方式我找找之前的视频发你看看
作者: 匿名    时间: 2022-1-4 16:05
救老命了大哥,万分感谢!!!再也不用螺旋懵逼!
作者: 匿名    时间: 2022-1-4 16:05
原来是老哥的图[害羞]  查看图片
作者: 匿名    时间: 2022-1-4 16:05
这个图还是很形象的




欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/) Powered by Discuz! X3.4