相互学习 共同进步

1. Vue环境搭建（Node）2. npm与yarn详细使用3. Vue介绍及其基本使用4. Vue指令（Directives）5. Vue修饰符（Modifier）6. Vue计算属性（computed）和侦听器（watch）7. webpack（module bundler，模块打包器）8. webpack基本使用9. webpack常用转换器（loader）与插件（plugin）10. Vue实例11. 模块管理规范（ES6、CommonsJs、AMD、CMD）

模块管理规范（ES6、CommonsJs、AMD、CMD）模块化其实是一种规范、一种约束，这种约束会大大提升开发效率。将每个js文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。按照js模块化的设想，一个个模块按照其依赖关系组合，最终插入到主程序中ES6、CommonJS、AMD、CMD指的都是一种规范原始JavaScript使用方法：<script>标签最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴

Vue实例创建Vue实例每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的var vm = new Vue({ // 选项})Vue虽然没有完全遵循MVVM模型，但是设计也受到了它的启发。因此在文档中经常会使用vm （ViewModel的缩写）这个变量名表示Vue实例当创建一个Vue实例时，可以传入一个选项对象。一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项

webpack的loader（装载机）webpack主要用来处理js代码，并且webpack会自动处理js之间相关的依赖。单在实际开发中不仅仅有基本的js代码，也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等webpack默认打开包除了js文件以外的所有文件，需要装不同的文件类型都需要安装对应的loader才可以加载，否则会报错loader使用过程（★）（1）通过npm安装需

Chunk是代码块的意思，webpack在执行构建的时候，会把多个模块合并为一个文件，该文件就称为Chunkwebpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关：（1）如果entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main（2）如果entry是一个object，就可能会出现多个Chunk，这时Chunk的名称是object键值对里键的名称。

webpack（module bundler，模块打包器）简介由来：由于前端之前js、css、图片等文件需要单独进行压缩和打包，这样团队人员处理很繁琐，Instagram团队就想让这些工作自动化，然后webpack应运而生webpack是一个模块打包器（module bundler），webpack视HTML、JS、CSS、图片等文件都是一种资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来webpack是前端的一

Vue计算属性（computed）和侦听器（watch）计算属性（computed）模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以不推荐在“{{ … }}”中放入太多逻辑<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个表达式中模板不再是简单的声明式逻辑。对于任何复杂逻辑，应当使用计算属性什么是计算机属性？计算机

Vue修饰符（modifier）修饰符（modifier）是以半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定<form v-on:submit.prevent="onSubmit">...</form>.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()事件修饰符事件修饰符描述.stop阻止冒泡（阻止事件向上级DOM元素继续传递）.prevent阻止默认事件的发生，事件不再

Vue指令（Directives）指令（Directives）是带有“v-”前缀的特殊attribute(属性)。指令attribute的值预期是单个JavaScript表达式（v-for是例外情况）v-bind属性称为指令。指令带有前缀v-以指示它们是Vue提供的特殊属性，它们将特殊的反应性行为应用于渲染的DOM指令职责：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM指令描述v-bind元素属性绑定，简写“:”v-text元素文本绑定v-html

Vue（渐进式框架）Vue（读音/vju:/，类似于view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动官方地址： https://cn.vuejs.org下载地址： https://cn.vuejs.org/v2/guide/installation.htmlVue基本使用

npm（Node Package Manager，包管理器）npm通常称为node包管理器，主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。Npm是基于couchdb一个数据库，详细记录了每个包的信息（作者、版本、依赖、授权信息等）为什么使用npm？npm是一个让JavaScript程序员分享和复用代码的工具。有了它，JS程序员能高效地管理和发布自己要分享的代码。但是进行分享，需要的依赖的代码越来越多，所以用一个工具把这些代码集中到一起来管理；买个服务器作为代码仓库（regi

Node.js基本介绍Node.js是一个可以让JavaScript运行在服务器端的平台。它是一个为实时Web应用开发而诞生的平台，它从诞生之初就充分考虑了在实时响应、超大规模数据要求下架构的可扩展性。这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路，而采用了单线程、异步I/O、事件驱动式的程序设计模式，其轻量又高效（基于Chrome V8引擎的JavaScript运行环境）（1）Node.js是一个基于Chrome V8引擎的JavaScript运行环境（2）Node.js使用了一个事件驱动、