前端入门框架前的几个大坑（小白向）

入门前端？

说到入门前端我又想到了这张图，大如果比力实在的写照了吧哈哈哈



不晓得图片来历是哪（侵删）

实在图的前三个小图就是入门前真个部分，不外框架react和vue二选一就行了
可是呢，实在入门前真个进程在我了解里是这样的


这时辰估量有人就感觉差池了，中心为什么多出来一个node+npm的工具，这工具不是在vue以后学的吗？
我只能说，是的，这工具是应当在vue以后学，由于这些工具相对来说会比力复杂，可是这里就有一个很难熬的点了，由于
用vue写项目是建立在这两个工具的根本上的！！
所以说，vue入门前的一个大坑就是这两个工具的进修！！
有很多小白会在这内行足无措，举个例子

进修vue前的项目结构是这样的



进修vue前的项目结构

起头进修vue时的项目结构是这样的



进修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 "项目名"  天生的项目
首先先看这三个文件（文件夹）



npm相关

上面讲了npm是一个包治理器，那末我们安装此外人的包是怎样安装呢？一般用npm install “包名“就能安装了，安装后的包放在node_modules里面，安装了哪些包会在package.json里记录
那末package-lock.json是干什么的呢？简单来说它是为了避免你需要重新安装项目时，下的包版本纷歧样，这里记录了你下载的包的具体信息，锁住版本号，避免出现由于版本纷歧样带来的题目
接下来看src这个文件夹


src是source的简写，这里放的就是你写项目用的源码了，这里的内容就都是你写的而且和你项目相关的内容
这个src结构是vue天生的，main.js是这个项目标进口，看vue项目标话从这个进口起头看就行了，这里的main.js
components是放一些vue的组件，vue是用组件化的思惟来写页面的，也就是一个页面是由很多大巨细小的组件组合而成的
app.vue是项目标最外层组件，其他小组件写好了间接拼装到它肚子里便可以了（可以先这么简单了解）
assets是放一些静态资本，比如常用的图片
好了，现在大师能够差不多对这个目录结构有点印象了（没提到的想领会的可以去查查，和这篇文章主题没关系，不用领会也能写项目），可是能够还是不太了解阅读器怎样运转这个项目，别急，我现在说
这个复杂的项目结构阅读器是怎样运转的呢？

有人就很惊讶，app.vue是怎样运转的，这个项目又是怎样运转的，这么复杂又没有看到html文件，怎样翻开呢？
上面提过，利用node挪用操纵系统资本可以把这个项目编译成html，css，js文件对吧，现在就说说具体是怎样搞的
首先翻开package.json这个文件



package.json

这个script里的内容就是一些做项目比力常用的号令，npm run "号令"就能运转，比如npm run serve，重点是build和serve这两个号令
先说说build这个号令吧，履行build这个号令的时辰，就起头停止项目标编译了，履行需要一段时候，然后会在项目标根目录天生一个dist文件夹，这个文件夹就是你项目标精华地点了，你在项目中所写的一切工具都被打包进这个文件夹了



dist文件夹

翻开看看，这里面能否是就是你熟悉的html，js，css了呢？这个才是你阅读器应当翻开的内容
可是呢，每次对项目有一点点修改就天生这么一个文件明显是不方便开辟的，因而乎就有了serve号令
履行npm run serve，会打包编译出一份虚拟的html，css，js文件，放在内存里，而且对你的项目停止监听，项目有变更它就自动重新打包，这样能否是就方便多了~



履行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入门教程

你好，我可以跟你进修前端嘛？

膜大佬学长

真的很是感激！

大佬！

可以先私聊看适不合适～

你好，我可以跟你进修前端吗？

多谢大佬，正要来学Vue

maven的功用能否是跟npm一样呀大佬

嗯，都可以做包治理，maven主如果针对java的