vue + webpack 的项目初体验

2019独角兽企业重金招聘Python工程师标准>>>

       已经工作3年了，发现自己学习和工作的经历都没有什么记录，所以此时开始了我的第一篇博客，文字粗鄙，敬请见谅。闲话就不多说了，进入正片吧。
       webpack和vue各自的特点也应该不用我重复了吧，这里就根据我自己的在实际项目中的步骤来给大家呈现吧。
        1.环境的搭建
                在这里先声明下，我所用到的技术的版本可能都不是最新的版本，请大家斟酌。
                先安装node.js,然后建立项目和对应的文件夹。

                

        2.package.json的配置

                

                这里面主要的模块是babel,vue的常用loader模块以及webpack

        3.webpack-config.js的配置

                

                webpack的使用这里我就不多，这里推荐一篇webpack入门教程，我觉得不错http://www.jianshu.com/p/42e11515c10f#

                4.具体项目

                        js的编码风格我是es6和es5混合着用，因为对es6不够熟悉，大家见谅。

                         程序入口是main.js,

                    

                    先将需要的模块引入，这里我是用vue-router来处理路由的，并使用h5路由模式，使链接看上去更美观，但使用时要注意在tomcat或者nginx进行相关配置，不然会出现404

                    在项目中我是使用单文件模式来编辑vue的各个组件，这种方式我觉得非常不错，可以将组件与组件之间的耦合进一步减少，以及代码的维护也更方便。这是单文件组件的基本格式，非常清晰。

这里要注意如果使用单文件组件的形式，那么就必须在webpack中加入对.vue文件的处理。

项目大概的情况也向大家介绍完了，在做这项目的过程中也出现了不少阻碍和难点，请期待我后续更加深入的文章吧，之后我会详细介绍多个值得分享的环节，谢谢大家。首次码字，对内容和文字的掌握不太够，还望见谅。

转载于:https://my.oschina.net/u/3171278/blog/810764