vscode编译vue.js

看vue.js有几天了，之前也零零散散的瞅过，不过一直没有动手去写过demo，这几天后台事比较少，一直在讨论各种需求（其实公司对需求还是比较重视与严谨的，一个项目需求讨论就差不多一周了，这要搁之前，天哪。。。），于是就琢磨着把vue简单的过下，如下所讲只是个人一些理解，不到的地方还望园友指正，涉及到的东西有vue、vue-router、vuex、axios以及nodejs一些后台东西，废话不说了直接上菜吧。

一、vue.js

1、项目搭建使用vue-cli脚手架，首先必须安装vue、vue-cli：cnpm i vue vue-cli -g，全局安装完成之后我们便可以使用vue-cli脚手架进行项目结构搭建，具体如下：

vue init webpack frontend，如下：

这里我们环境部分选择“运行环境+编译环境”，这样，后面直接可以使用webpack进行编译后部署，十分方便，再继续：

一般每个团队都有自己的代码规范，这时候打开eslint，配置自己团队的代码规范就显得尤为重要，下面说下vscode编辑器下如何配置eslint，在之前项目基础上我们配置下eslint，首先是vscode安装eslint插件：

然后在用户设置栏配置具体的eslint规则：

依次打开vscode的“文件”->“首选项”->“用户设置”，在右侧编辑区输入我们定义好的eslint规则：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

{      "editor.fontSize" : 17,      "editor.tabSize" : 2,      "editor.formatOnSave" :  false ,      "files.associations" : {          "*.vue" :  "vue"      },      "eslint.validate" : [          "javascript" ,          "javascriptreact" ,          "html" ,          "vue" ,          {              "language" :  "html" ,              "autoFix" :  true          }      ],      "emmet.syntaxProfiles" : {          "vue-html" :  "html" ,          "vue" : [              "css" ,              "html" ,              "less"          ]      },      "editor.fontFamily" :  "Source Code Pro, 'Courier New', monospace" ,      "files.autoSave" :  "off" ,      "workbench.iconTheme" :  "vscode-icons" }

这里我们设置字体大小为17，tab缩进为2个空格，eslint的校验适用于js、html、vue，设置vscode图标为vscode-icons，其它规则可以参考下eslint官方说明。

2、项目结构

前面通过vue-cli生成的项目结构如下：

主要是src文件夹，我们对其进行了一些拓展，其中api文件夹用来存放前端各种请求api模块，components文件夹如下：

用来存放各种页面组件，其中base为公共组件，比如一些页头、页尾、分页组件等等，Home为主界面，该页面通过router路由来整合其它组件，Login为登录组件。mock文件夹用来进行mock.js配置，这样前端可以独立于后端接口开发，使用虚拟数据不依赖后端从而更加高效。router文件夹用来配置vue-router下的各种前端路由，vuex文件夹主要用来配置vuex状态管理相关：

其中modules文件夹用来存放各个vuex的module，分模块配置的话有个好处就是项目比较庞大的时候便于数据查看与管理，mutation.types.js用来存放各种vuex的mutation类型常量，关于vuex后面继续介绍。

3、关于vue.js一些知识点

1）、组件概念

组件这个比较好解释，简单理解就是一个个通过vue自己的方式注册的页面（可以是公有页面也可以是单个页面），组件化开发时通过template包裹的一系列部分功能页面都可以称作组件，比如我们的App.vue：

当然，每个组件都有属于自己作用域，组件下的各个数据及相关操作均写在当前组件下的script标签中，如下：

可以看到如上为App.vue组件的数据结构，这里通过ES6的export default导出当前vue实例，组件下包含很多东西，比如data（data是一个function，通过return一个数据对象来表示当前组件都有哪些数据实例）、components（组件是可以被其它组件导入使用的，components就是用来声明当前组件导入的子组件）、computed（计算属性，和data类似，本质返回的是一个数据对象）、watch（监听，主要是监听数据对象的变化，有变化则执行对应的function）、mounted（钩子函数，组件初始化时调用）、methods（用得最多，当前组件下的私有方法，可通过this.methodName调用）、events（事件，当前组件下的事件函数），这里还有很多，具体可以参考官网。

当然，每个组件都有属于自己的style样式，使用如下定义：

这里的scoped表示下方样式仅仅当前组件有效，否则全局有效，通过@import我们可以导入外来样式文件（这里公共资源我们一般定义在src的assets文件夹下，不用写在static文件夹下，因为assets被打包时会自动打包，为了统一还是放在assets下面）

2）、组件间的数据交换

首先是父子组件间的数据交换：

父组件好比我们这里的App.vue组件，子组件就好比我们import进来的那些组件，vue.js提供了我们很便捷的方式进行跨组件间的通信，对于父子组件那便是：子组件dispatch事件到父组件，父组件broadcast事件到下面的所有子组件，默认事件传输为冒泡传输。什么意思呢，就是说在App.vue里面我们可以直接通过dispatch方法向上派发事件，前提是父组件需要在methods或者events那里配置好改事件（只有配置了该事件才能接收到，推荐写在events里面），当然派发时可以传递一些数据，同理父组件也是通过broadcast广播事件到子组件。二是我们可以通过props属性进行，子组件在script标签中写明需要prop的哪些属性，父组件在调用子组件的地方直接写上该prop（如果添加v-bind:prop则为动态prop），那么该数据便直接从父组件传递到了子组件中三是我们可以通过全局的$emit进行事件通信，这个可以参考官网文档。

其次是任意无关系的组件如何通信：

这个时候需要使用中间组件进行数据传输，相当于搭建起一个中央数据总线，比如A组件需要和C组件进行通信，那么我们可以在定义一个空的组件为B，那么在A组件中导入B组件，