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

努力了，不一定能成功，但是不努力，感觉好舒服啊
　　　　　　　　　　　　　　　　　　　——努训

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

一丶环境配置

二、开始搭建项目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 默认是

打开我们的项目，可以看到如下的目录结构：

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

在启动之前还需要安装我们的依赖模块，也就是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 ","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（其实会自动弹出），就可以看到如下页面

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