入门前端？

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

不知道图片来源是哪（侵删）

其实图的前三个小图就是入门前端的部分，不过框架react和vue二选一就好了

但是呢，其实入门前端的过程在我理解里是这样的

这时候估计有人就觉得不对了，中间为什么多出来一个node+npm的东西，这东西不是在vue之后学的吗？

我只能说，是的，这东西是应该在vue之后学，因为这些东西相对来说会比较复杂，但是这里就有一个很难受的点了，因为

用vue写项目是建立在这两个东西的基础上的！！

所以说，vue入门前的一个大坑就是这两个东西的学习！！

有不少小白会在这里不知所措，举个例子

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

学习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的知识，看到了不理解的去查一查就好了，

原文链接：

作者：汪小黑