VUE教程（第二节）

上节课我们已经学习了怎么使用vue-cli搭建一个简易的vue项目，这节课我们就来看看搭建出来的项目的目录结构以及vue文件的结构，只有有全局的把握，才能更加系统的学习一项技能。废话不多说，开整！

让我们看看我们的文件夹里面都有什么。

项目目录结构.png

里面有6个文件夹和巴拉巴拉多个文件，我们一个个来介绍：

——》第一个文件夹是build，这个文件其实现在是不用管的，因为这是项目打包后文件放置的目录（我们用脚手架创建项目需要打包处理才能上线的哦，不同于直接编写html文件）；

——》第二个文件夹是config，顾名思义，这是配置目录，里面配置的是开发时候的一些参数设置，还记得上节我说的，如果项目没有自动在浏览器中打开，需要在这里找某某文件，改写某某参数吗？

——》第三个文件夹是node_modules，这个有点点长，是node的模块，这是啥东西呢？还记得安装时候我们在命令行里面输入npm install不咯？就是下载这部分的，这里面是项目依赖模块，比如你在项目中需要用到时间组件，可以使用npm install --save vue-datetime-picker（有广告嫌疑，请这个作者付一下广告费）安装对应模块，模块的文件就在这个文件夹里面。

——》第四个文件夹是src，这个文件夹就厉害了，为什么呢，因为我们在开发时候基本就是在这个文件里面编写代码的，这个我后面会详细介绍，这里就告诉你这是我们的源码目录。

——》第五个文件夹是static，翻译中文就是静止的意思，什么静止了呢？不是什么列车痴汉巴拉巴拉的静止（老司机都懂），是说这个文件夹放置的是静态文件，比如图片，字体之类的文件，都可以放置到这里，一般情况下，这里的文件在打包时候是不会修改的。

——》第六个文件夹是test，这是测试文件的文件夹，一般不用管，很少用到，甚至删除都可以的。

文件夹都介绍完了，现在开始介绍那些文件了：

——》.***长这样的文件，我们暂时忽略，因为他们都是一些配置文件，包括语法配置，git配置之类的，我们忽略它们即可。

——》index.html文件，一看就知道，这个肯定是启动页啦，也就是文件的入口页面。

——》package.json文件又是什么呢？其实这个是项目的配置文件，还记得我们用npm加载了很多模块之类的不？在这里就有记录，包括这个项目使用了什么模块，它属于什么时候使用的。（插句题外话，如果项目需要转移，或者发送给合作的团队成员或者上传到SVN之类的，一般情况下我们不会把node_modules文件夹一起打包过去，就算压缩也不会，直接放弃这个文件夹，因为这个文件夹在开发适合会有很多文件，几千个甚至上万个，发送给别人是很麻烦的，时间超级长，你只需要把剩余的文件夹发给别人，然后别人启动npm install就可以重新从网上根据package.json文件的配置下载好模块了，这是实际开发基本会遇到的问题）

——》README.md文件，也就是最后要介绍的文件，这个是项目的介绍文件而已，其实我们根本就不用管。

好了最外层的目录结构就已经介绍完了。

我把结构图发一下，也算是总结吧！

目录结构详细版.png

里面都详细的说了一下，敬请观摩；

文件之类的都说了，现在要说的就是vue文件里面都有什么，也就是我们要写什么样的代码，贴个HelloWorld.vue文件的图，这个文件在src->components文件夹里面，去找找这个小伙子吧（因为在sublime里面我不知道这么长截屏，所以我压缩了一下代码，只是展示了我觉得有必要的，其实是这个臭不要脸的又在打广告）

vue文件代码结构.png

大致可以分为三个结构，看得出来吧，三个标签template、script、style，只是这个三个标签有点点和以前的不一样啊，就是这样的，如果一样那我们还学什么呢，让我来介绍一下：

——》template标签：放置的是我们编写的标签结构，也就是我们写的html；

——》script标签里面，我们编写的是我们的逻辑结构，也就是我们写的js相关，但又不只是js，还有其他的，基本逻辑设置都是在这里完成；

——》style标签里面的是样式，也就是我们的css咯，这里看到一个新的参数scoped，这是什么意思，其实别人已经英语备注了，如果添加这个参数就说明这个样式只在这个组件有用，如果不加的话，那就是全局都共享的哦，一般编写的是reset样式文件那就肯定是全局共享的，如果是单个组件的，我个人建议还是要加的，要不然其他地方出了问题你是很难找到问题的点的，不要坑自己哦，可爱的程序员们。

好了，这节教程暂时写到这里，谢谢大家的观看，期待与你们一起进步。

题外知识：

在npm安装模块时候，我们是需要分开发环境，生产环境的，一般我们加后缀参数来设置，具体如下：

npm install：会下载dependencies和devDependencies中的模块；

npm install –save–dev：只需开发时依赖的模块devDependencies （例如我们在开发适合要将es6语法转成es5的，那就需要用到babel转码器，这个只在开发适合需要，生产已经转好了）；

npm install –save: 生产环境依赖的模块dependencies ；

哪些模块隶属于哪里，直接查看package.json文件，里面有你需要的，你懂得。