对VUE项目实现的理解

直播间项目VUE文件目录

项目的效果：

首先看一下项目的目录：

简单说一下项目目录的作用：
1、bin文件夹：webpack配置文件
2、node_modules文件夹：npm加载的项目依赖模块
3、src 我们要开发的目录，基本上所有操作都在这里
components: 目录里放置组件文件，因为整个项目都比较vue，所以主要的内容都写在这个文件夹里。
images： 图片文件，项目所有图片的位置
static：放置不会变动的文件，因为在webpack打包的过程中，会改动一些文件的文件名和相对位置，放置在static文件夹下使用绝对路径，在打包完成后依然原封不动的存在
store： 一些封装起来的方法都在这个文件夹下
util：表情包的转换
4、index.html index.js index.scss:主入口文件
5、lock.html lock.js lock.scss :用户登陆的页面（登陆后进入主页面）
6、package.json:配置文件 READEME.md:项目的说明文档 其他：文件配置 文件说明 依赖包

在接下来的介绍中，lock文件没什么作用，就不做什么介绍。

我写了一会发现写起来比较容易 ，但是阅读起来需要来回的翻看，我画一张图来表示各个文件，各个文件夹之间的信息沟通。

这就是整个工程的代码信息交流，首先在小的文件夹中：
1、components：除了标红的app.vue,其余的全部是这样的模式：

<tempate>    //这里是html代码</template><script>      import { mapGetters, mapActions,    mapMutations } from 'vuex';      import Lightbox from 'vue-lightbox';      import $ from 'jquery';      import { faceToImg, contentToSend } from '../util/interaction.js';      import ChatEmoji from './ChatEmoji'      import '../static/jquery.from.js';      export default {         data(){return{...}},         componrents:{...},         computed:{...},         methods:{...},         update:{...},         watch:{...}     }    //js代码</script><style lang="scss" scoped>    //css代码</style>

在app.vue中将所有模块引入

  import Top from './Top'  import Left from './Left'  import Foot from './Foot'  import VideoMain from './Video'  import Chat from './chat'  import Teacher from './Teacher'  import Login from './Login'  import Class from './Class'  import Schedule from './Schedule'

这样app.vue就是这些模块的合集了，这里的每一个文件夹都是一个封装好的组件，有交谈的组件，展示的组件，聊天的组件。。。

store 是封装好的一些方法：
用户获取的验证码，动态渲染的一些信息。。。
就是处理后台数据的方法都是写在store里的

在store文件夹的index.js中，引入了store里所有的文件

import Vue from 'vue';import Vuex from 'vuex';import actions from './actions';import getters from './getters';import mutations from './mutations';

这样store里的index.js就是所有处理数据的方法合集了。

接下来在看一下上面的图片，就将所有信息联系起来了。

这就是这个项目文件夹，文件之间的信息传递组成。