从零开始搭建vue-node-webpack前端项目环境step4

承上,我们已经可以识别.vue类型文件了,那么我们现在就可以开始卷起袖子开始撸起代码,写我们的样式了。


从零开始搭建vue-node-webpack前端项目环境step4_第1张图片
从零开始搭建vue-node-webpack前端项目环境step4_第2张图片

我们兴高采烈的写好了dom结构和样式,然后执行npm run dev.发现报错了。像上文说过,webpack只支持js,对于css,webpack同样需要配置相对应的css-loader.在这里安装css-loader和vue-style-loader。然后再base.js里面配置如下:


从零开始搭建vue-node-webpack前端项目环境step4_第3张图片


重新编译过后,我们发现已经是能够成功编译,并且在我们页面上出现了样式


从零开始搭建vue-node-webpack前端项目环境step4_第4张图片

好,没问题了。嗯。继续扒拉扒拉敲着,但是敲着敲着大家就会感觉不对劲了。就是我们每次修改代码或者样式都要重新编译一下,这what fuck。这肯定不科学啊!


从零开始搭建vue-node-webpack前端项目环境step4_第5张图片

这时候,你脑袋灵光一闪,或许应该就联想到了vue里面最为方便,最为强大的热更新了。她能够实时检测代码的变化,然后帮我们编译打包。

在配置热更新之下,我们将app.js里面的内容移除到src/main.js下,将app.js作为以后我们node.js的入口文件,而main.js作为我们vue的入口文件,让代码目录更加的清晰。更改的时候,别忘了,在webpack.config.base.js将entry指明为main.js,此时项目的目录结构大致如下


从零开始搭建vue-node-webpack前端项目环境step4_第6张图片

要实现热更新,我们可以借助两个工具类webpack-dev-server和webpack-dev-middleware。一般的情况下,我们是选择webpack-dev-server.但是在这里我们选择webpack-dev-middleware。因为我们前端环境不单单只是包含前端而已,还包含了node,而webpack-dev-middlearea恰好是一个中间件,能够更好的与node相结合,这里webpack-dev-middleware参照官方介绍如下:


从零开始搭建vue-node-webpack前端项目环境step4_第7张图片

我们先执行安装express ,webpack-dev-middleware

cnpm i express -S cnpm  i webpack-dev-middleware webpack-hot-middleware -D 

接着,我们在app.js编写如下,启动我们的node服务


从零开始搭建vue-node-webpack前端项目环境step4_第8张图片

同样,我们可以设置一个快捷的配置命令,帮助我们启动nodejs


从零开始搭建vue-node-webpack前端项目环境step4_第9张图片

最终运行如下:


从零开始搭建vue-node-webpack前端项目环境step4_第10张图片

node服务正确搭建之后,我们开始配置webpack-dev-middleware.打开webpack-config.dev.js。在里面新增如下配置:


从零开始搭建vue-node-webpack前端项目环境step4_第11张图片


publicPath:先不详细赘述(好吧!其实暂时我也不太明白),然后在app.js里面新增如下:这些代码的主要作用就是引入webpack-dev-middleware和webpack-hot-middleware这两个中间件,然后监听我们webpack.config.dev.js里面配置的内容


从零开始搭建vue-node-webpack前端项目环境step4_第12张图片

重新运行npm run start ,可以看见我们node搭配webpack-dev-middleware的热更新没有报错的运行起来了。打开浏览器输入我们的localhost:6699,我们页面虽然运行起来了,但是现在由于变成服务端渲染,因此我们还要搭配服务端路由,类似于我们前期的index.html文件。

在这里我们使用html-webpack-plugin,这个插件的作用是当我们每次编译的时候可以动态的生成一个html文件,并且在该文件内她可以自动帮我们引入bundle.js等相关编译过后的脚本文件。


从零开始搭建vue-node-webpack前端项目环境step4_第13张图片


从零开始搭建vue-node-webpack前端项目环境step4_第14张图片

执行npm run start成功过后,我们在此访问浏览器,不过这次输入的是localhost:6699/index.html.可以看到我们新的index.html文件成功的显示了。并且里面的内容是我们app.vue组件的内容。也就是说我们已经初步成功的打通了node+webpack+vue的前端环境了。

在这里我们也可以随意的修改一下app.vue里面的样式文件了,我们的相应的修改样式,前端会相应的感知触发更新,我们再也不用手动的执行刷新了。


从零开始搭建vue-node-webpack前端项目环境step4_第15张图片

你可能感兴趣的:(从零开始搭建vue-node-webpack前端项目环境step4)