关于萌新初识VUE的那些事（目录结构介绍）

这次的开头依然不正经，在步入正题前还是聊一些题外话。虽然在踏入这个行业之前，程序员自黑与他黑的话听过不少，但是从真正进入这个行业开始，我觉得我们只是过于低调罢了，因此外界人对我们产生了很大的一些误解。就大家所知，网上黑程序员相亲的段子屡见不鲜，但是在这里我要为我们程序员发个声，我们只是不善于打扮而已（或者说有的人甚至会觉得这会浪费时间？）。处在这个技术的行业中，真正钻研技术的人都是一些十分单纯的人，在他们这里没有什么职场上的钩心斗角，没有所谓的甩锅，相比于外面社会上的那些打打闹闹，在这样的环境中，大家只是普普普通做着自己该做的事，努力提升自己的技术能力而已。这样的人，更加专一，更加单纯。虽然外表很重要，但是处在这样的社会大潮流之中还能如此单纯的人，遇到他们，我觉得这更是你的一种小幸运。（严谨一点，人在职场上，什么样的人都会存在，并不代表着我们这个行业没有讨厌的人，但是，我只是想说，就目前我所认识的人，他们温柔，单纯。因此，在这个行业，那种讨厌的人，我觉得只是会少一点而已）

那么接下来进入正题环节。依旧是如果不太喜欢我的风格的同学就不要勉强自己再看下去了。

目录结构

在这里已经可以看到我们之前已经建立好的工程了。

build（webpack所相关的一些配置文件，这里面会有一些约束，同时如果你需要进行一些代理服务时可以在这里面配置你的服务器地址，还有配置你的项目打包地址（也可以在config中进行配置，根据个人的喜好）等一些基本配置，需要用到的时候大家可以做一些针对性的查询）

config（vue的一些配置书写在这里面，比如配置监听的端口号，项目运行时是否自动弹出页面等一些基本配置）

node_modules（你的项目的一些依赖包，很大，转移项目或者上传项目的时候要注意）

src（项目的核心文件，assets一般存放一些静态文件比如css或者一些外部文件，当然用不习惯的话可以把他删掉改成自己熟悉的名称，比如style什么的，怎么舒服怎么来。components存放一些公共组件，划重点这个很重要，如果利用好vue组件化的特性，会使你的代码更加简洁方便。剩下的一些，比如路由的配置大家可以自行建立router文件夹里面进行路由的配置，common文件夹去存放公共工具方法，这一类的根据自身项目的需求与方便进行配置，总之需要什么就建立什么。App.vue是根组件，也就是一开始给你作为案例所使用的根页面，可以修改名称，但是并不推荐，根据个人需求进行修改。main.js是入口文件，在这里可以进行一些全局的配置）

static（这里会存放一些静态文件，例如图片）

.babelrc（babel编译参数，Babel是一个转码器可以将ES6代码转为ES5代码在本地环境下执行，百度上有很多的教程，好奇的朋友可以在网上自行阅览）

.editorconfig（代码格式配置）

.gitignore（在往github上传时需要忽略的文件配置）

.postcssrc.js（转换CSS的工具）

index.html（主页面，在一些没有提供npm引入方式的插件上，可以在这个页面使用cdn的方式进行引入。）

package-lock.json（锁定安装时包的版本号）

package.json（记录所引入的依赖包的大版本号）

在这边引用知乎上@周载南的回答：

根据官方文档，这个package-lock.json 是在 `npm install`时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

它有什么用呢？因为npm是一个用于管理package之间依赖关系的管理器，它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本
这里举个例子：
"dependencies": {
 "@types/node": "^8.0.33",
},

这里面的 向上标号^是定义了向后（新）兼容依赖，指如果 types/node的版本是超过8.0.33，并在大版本号（8）上相同，就允许下载最新版本的 types/node库包，例如实际上可能运行npm install时候下载的具体版本是8.0.35。

大多数情况这种向新兼容依赖下载最新库包的时候都没有问题，可是因为npm是开源世界，各库包的版本语义可能并不相同，有的库包开发者并不遵守严格这一原则：相同大版本号的同一个库包，其接口符合兼容要求。这时候用户就很头疼了：在完全相同的一个nodejs的代码库，在不同时间或者不同npm下载源之下，下到的各依赖库包版本可能有所不同，因此其依赖库包行为特征也不同有时候甚至完全不兼容。

因此npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。

简单来说就是当我们在进行一次依赖导入的时候，会将大的版本号记录在package.json中，我们每次cnpm install的时候都会去下载该大版本下的最新的小版本，这样有时会导致版本不一样的问题导致程序出现莫名其妙的错误，很烦，所有这时候出现了package-lock.json，去记录我们所用的这个小版本，每一次更新会根据这个锁定的值去进行更新，保证了版本的一致性。所以在进行github上传时大家要将package-lock.json进行上传，保证大家的版本号是一致的。

根据下图帮助大家进行深刻理解，这是在package.json中的版本

而这是在package-lock.json中的版本

README.md（是对项目的说明）

那么目录的结构说明就到此为止了，如果有什么问题或者笔者说明拥有的错误，希望大家可以在下面提出来，笔者只是想将自己学到的知识进行分享，但是并不想误人子弟，希望大家可以多多指教。