Vue 微信（二） | 搭建项目chat

昨天我们对项目所用的环境和框架工具进行安装。今天我们将利用这些工具构建我们的项目目录。

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

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

vueinitwebpackchat//chat就是项目的名字

在输入之后会出现许多配置项，一路enter就可以了。

但是其中的ESLint推荐不使用(运行的时候会检查代码规范，规范什么的太麻烦，毕竟是小demo)。

ESlint是可以配置规范的，在多人协作开发的过程中，代码的规范非常的重要。有一套良好的代码规范，对于项目的开发和维护都很友好。我这里不用，是因为配置麻烦，以及运行的时候总报错很影响心情。

下面对每个配置项做个注释：

?Projectnamechat

//项目名默认就是caht

?ProjectdescriptionAVue.jsproject

//文档描述，会在README.md文件上生成输入的内容，默认AVue.jsproject

?Author_****<****@**.com>

//作者，如果有git，就是读取git的User信息

?Vuebuildstandalone

//有两个选项，第一个选项写着recommendedformostusers果断选了（至于干什么用到并不知道）

?UseESLinttolintyourcode?Yes

//是否使用ESlint默认是

?PickanESLintpresetStandard

//选这一个ESlint类型

?SetupunittestswithKarma+Mocha?Yes

//使用单元测试工具karma和mocha默认是

?Setupe2etestswithNightwatch?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":"chat","version":"1.0.0",

"description":"A Vue.js project",

"author":"GGwujun <[email protected]>",

"private":true,

"scripts":{

    "dev":"node build/dev-server.js",//就是这里

      "build":"node build/build.js",

      "unit":"cross-env BABEL_ENV=test 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:6060（其实会自动弹出），就可以看到如下页面

我们这里把端口改成6060了，其实默认是8080，因为我本地8080端口被占用了

改端口就在下图所示文件

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