用了一段时间的vue，感觉十分不错，具体的好处在此不多赘述，毕竟说的没有大牛好，在这简单说下webpack模板创建项目的方法

官方文档在这

看这篇文章的话估计对vue是什么已经有了解，中文文档撸一遍的话其实就可以写一些简单的应用了。之前我用的是引入的方式，虽然也算好用，不过后来发现利用vue独立组件和开发组件的话还是用vue-cli更方便，另外也有不少其他好处。
另外关于编辑器，最近觉得微软的visual studio code真是良心之作，插件也很丰富，mac版最近还更新了touch bar支持，大家可以去尝试一下，毕竟sublime一份要几百大洋，免费的VS code性能完全胜任。

安装环境

现在npm集成在nodejs里，配置环境很方便了，win用户直接下载安装即可，其他平台的话用包管理也很方便，想知道怎么安装可以看我之前的文章。
装好npm后需要添加国内镜像源，因为直连的话下载可能失败导致环境缺少依赖，推荐淘宝镜像，以后安装和升级命令可以cnpm。其实因为设置等效了一直用cnpm也是可以的，但是少打一个字母也是提升效率嘛= =

下一步是安装webpack，需要全局安装，因为以后也用的上
$ cnpm install webpack -g
然后安装脚手架，以后引用别人组件比较方便
cnpm install vue-cli -g
装好后现在其实就可以创建基本应用了，以后八成还会引入新的依赖项，到时候再通过cnpm install即可

创建项目

vue init webpack   proj            //proj为你的项目目录文件夹名称，项目名称可以再改 
vue init webpack-simple   proj //作用同上，简单项目       

确认选项时注意装带编译器这个，除非你已经开发已经比较上手了。其他参数按需求就好，比如路由不用的话装不装都无所谓，ESlint不会用的话反而麻烦不少，最后几项测试用的新手的话建议最好弄清楚是啥再装就行。

image.png

确认选项时注意装带编译器这个，除非你已经开发已经比较上手了

建好后文件目录如下，其中src文件夹即为开发目录，图片资源或者单文件组件等可以放在此目录下方便管理。通过模板创建的项目webpack.config.js中file-loader之类已经配置好了，不过以后根据开发进度可能需要调整，注意备份一下比较好

image.png

至此应用创建已经完成，下一步就是发挥无限的创作力以及debug了(￣▽￣)~*。chrome的dev-tool一定不要忘记安装，如果没有梯子的话可以去github打包作为开发者模式添加。不得不说vue还有人性化的一点就是报错返回的不是代码而是贴心的告诉你错误信息，忍不住再赞一个。

新建项目如果出现报错很有可能是环境依赖缺失，在目录下执行npm install或者npm update也许会解决问题。网上有教程说一定要从npm安装其实不妥，cnpm也是十分钟一抓镜像，其实没啥区别。我之前有几个插件只在cnpm下才能装上，速度还可以。接下来我打算把封装单文件组件讲一下，顺便把自己写的几个分享一下