基于Express+Vue+Webpack的聊天室项目搭建

2016-09-20

最近突然想做一个聊天室项目,根据自己学习情况和项目特点,最终决定选择使用 Express、Vue 和 Webpack 来进行项目的搭建。顺便吐槽一下,现在想徒手搭一个前端项目真的比后端环境都难配置,下面记录我的搭建过程和踩坑之路。

首先贴上项目地址 https://github.com/w3cay/ChatGroup

项目托管在Github上,除了添加一些说明文档和版权信息外,首先进 行 Git 的相关配置,在项目的根目录添加了 .gitgnore 文件,忽略一些不需要提交变化的文件,主要是 node 生产环境产生的一些文件。
接着,添加一下编辑器的配置,这个主要是为了防止不同编辑器之间的差异,如果是一个人进行开发还好,但是如果需要协作开发的话最好配置一下。在根目录我还添加了一个 .gitattributes 文件,主要是优化 git diff的体验,忽略编译文件的变化,不然满屏的压缩代码。具体配置请参考 http://www.jianshu.com/p/8ec1b32f2e13

接下来,初始化node环境,使用 npm init 创建一个 package.json 文件,在这里进行node的包管理,然后开始安装部署 Express ,通过 Express 生成器生成项目的基本结构。

安装Express生成器

1
$ npm install express-generator -g

生成示例项目并将示例项目和当前项目目录进行整合

1
$ express demo

进入项目,安装依赖

1
2
$ cd Chatgroup
$ npm install

初次运行项目,通过 localhost:3000 来进行访问

1
$ DEBUG=Chatgroup:* npm start

基本结构定好了,但是发现很不爽的事情,node服务每次修改代码,并不能生效,每次都需要进行重启服务器。所有后来又加上了 nodemon 这个插件,可以在每次修改服务端代码的时候,自动重启服务器,节省了时间,但是感觉体验还不是很好,启动服务器中间还是有间隙的,不能马上生效,所以感觉还是写PHP爽啊!

安装了nodemon之后,启动Express服务器的命令变为

1
$ DEBUG=ChatGroup:* cross-env NODE_ENV=dev nodemon -i src ./bin/www

其中 cross-env 的作用是解决跨平台设置NODE_ENV的问题

到此,服务端的环境配好了,接下来我开始配置前端的工作流 ,前端开发使用 Vue 框架,JavaScript 采用 es6 语法,Css 使用 scss 语法预编译,使用 webpack 处理语法编译,并且打包。为了解放F5,我在 webpack 中配置了 BrowserSync 插件,通过 localhost:2333 进行访问,每次前端代码的改动都会刷新浏览器,这里没有使用webpack的热更新,以后再加上,配置详情直接访问GitHub查看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
// new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new ExtractTextPlugin('[name].css'),
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost',
port: 2333,
proxy: 'http://localhost:3000/'
}, // plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: true
}
)
]

到此,整个项目的前后端环境搭建的差不多了,数据库方面会采用 MongoDB,具体的配置这里就不赘述了,本篇文章不算是严谨的教程,项目并没有搭建的非常完美,此篇文章只是作为我的开发笔记,如有错误欢迎评论指出。☕️


写下你的想法({{list.length}}条)

{{item.attributes.nickname}} 回复 {{item.attributes.replyName}} {{item.attributes.nickname}}:
{{index + 1}}楼 回复
{{item.attributes.content}}

{{submitTip}}