看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规则：

{ "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样式，使用如下定义：