Vue 2.0 开发聊天程序（一）: 初建项目

努力了，不必定能成功，可是不努力，感受好舒服啊
　　　　　　　　　　　　　　　　　　　——努训

没有了解过vue1.*，直接上手vue2.0；虽然有些吃力但仍是很愉快了学下来了。

一丶环境配置

• node.js
  使用6.2.2版原本开发
  我使用了nvm来管理个人node，nvm能够很方便的切换要使用的node版本

• npm 使用3.9.5版本
  npm配置了淘宝镜像

  npm config set registry https://registry.npm.taobao.org

• sublime-text 3
  这款编辑器很是好用，虽然没有webstorm那么全面，可是装多点插件也差很少啊
  装了如下好用的插件：

  1. Vue Syntax Highlight 这个必须的好嘛，没有这个.vue文件都不高亮

  2. Theme - Coffee 比较喜欢的一款配色

  3. ColorPicker 装了这款插件以后就能够愉快的编辑颜色了

  4. Emmet 能够自动拓展html和css代码的插件

  5. SublimeCodeIntel 代码提示了不全插件 支持不少语言

  6. Alignment 代码对齐插件 以前用2的时候安装了 如今3上面尚未安装

  7. SublimeEnhancements 这个插件给侧边栏增长了不少的拓展功能，好比新建文件或文件夹，用浏览器打开文件等

• webpack 安装版本 webpack@1.14.0
  webpack是一款前端资源模块化管理和打包工具，它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
  学习连接：http://blog.csdn.net/keliyxyz...
  确认安装webpack成功并查看安装的webpack版本

  webpack

  直接在命令行输入webpack？，对的。若是安装成功，就能看到一下的信息，第一行的1.14.0就是我安装的版本号o(∩_∩)o

  webpack 1.14.0
  Usage: https://webpack.github.io/docs/cli.html
  
  Options:
    --help, -h, -?
    --config
    --context
    --entry
    --module-bind
    --module-bind-post
    --module-bind-pre
    --output-path
    --output-file
    --output-chunk-file

• vue-cli 我安装的版本2.5.1
  vue-cli是一个用于生成vue项目的脚手架工具，不推荐新手直接用vue-cli，尤为是对 Node.js 构建工具不够了解的同窗。还好本身会点node，因而很不害臊的用了

  npm install -g vue-cli

  一样在命令行输入 vue -V 检测是否安装成功并查看安装的版本，注意是大写的V
  若是成功返回：

  C:\Users\59227\Desktop>vue -V
  2.5.1

• vuex 我安装的版本为2.1.1
  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
  能够理解为组件通讯的集中管理。
  安装和使用在以后的实践过程当中讲解。

• vue-router
  用于SPA实现单页路由，相似angular的angular-ui-router。
  安装和使用在以后的实践过程当中讲解。

2、开始搭建项目x-chat

搭建项目以前，去看了别人的文章，试着撸了一遍代码，也就是个重复造轮子的过程，感受没有意思，因此才萌生出写个本身的项目的想法，正好答应帮别人作一个npp聊天插件的前端，就拿来练手了。

直接开始：

前面提到了vue-cli脚手架工具，使用起来很简单，在你想建立项目的目录下输入cmd：

vue init webpack x-chat //x-chat就是项目的名字

在输入以后会出现许多配置项，一路enter就能够了。可是其中的ESLint推荐不使用(运行的时候会检查代码规范，规范什么的太麻烦，毕竟是小demo)，ESlint是能够配置规范的，在多人协做开发的过程当中，代码的规范很是的重要。有一套良好的代码规范，对于项目的开发和维护都很友好。我这里不用，是由于配置麻烦，以及运行的时候总报错很影响心情。。

下面对每一个配置项作个注释：

? Project name x-chat   //项目名默认就是x-caht
? Project description A Vue.js project // 文档描述，会在README.md文件上生成输入的内容，默认 A Vue.js project
? Author _**** <****@**.com> // 做者，若是有git，就是读取git的User信息
? Vue build standalone // 有两个选项，第一个选项写着recommended for most users果断选了（至于干什么用到并不知道）
? Use ESLint to lint your code? Yes// 是否使用ESlint 默认是
? Pick an ESLint preset Standard // 选这个一个ESlint类型
? Setup unit tests with Karma + Mocha? Yes //使用单元测试工具karma和mocha 默认是
? Setup e2e tests with Nightwatch? Yes // 使用e2e测试框架 NightWatch 默认是

打开咱们的项目，能够看到以下的目录结构：

• build：webpack打包配置文件夹

• config： 一样是打包配置的文件夹，只是职能不一样

• src：源码存放文件夹

• static： 静态文件存放位置

• test：测试代码存放位置，展开能够看到单元测试和e2e测试两个目录

• .babelrc ： babel的配置文件，有关babel可参见：http://www.ruanyifeng.com/blo...

• index.html: 单页应用的html文件，能够当作是一个窗口(window)

• package.json: npm的配置文件，配置项目信息，须要安装的模块之类

• README.md： 项目说明文档

目录分析完了，怎么启动这个项目呢？

在启动以前还须要安装咱们的依赖模块，也就是package.json里面的模块，在根目录下cmd：

npm install

这个过程有点久，建议将npm配置为国内镜像，好比我以前说得淘宝镜像
安装完了以后咱们的项目目录会多出一个node_modules目录，里面会有不少不少文件夹，贼大。

安装完以后就运行咱们项目了，在根目录下cmd：

npm run dev

这个命令能够在package.json中找到：

{
  "name": "x-chat",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ex_fulin <lin.fu@partner.midea.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js", //就是这里
    "build": "node build/build.js",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
    .....

而后浏览器中输入localhost:8080（其实会自动弹出），就能够看到以下页面

大功告成！！这一章就到这里了。