这里是《Vue2.0 从零开始学系列?#22987;恰?#30340;第一篇博文,博主小呆是一名互联网非著名的半吊子前端,喜欢学习新技术,受到一些前辈的影响,多少也写过一些?#22987;?#21644;学习心得,但是很遗憾没有一个是成系列的╮(╯▽╰)╭,这次小呆下定决心了,不仅要写一个成品系列文章出来,而?#19968;?#35201;把之前没写完的坑补上,最近一直在学Vue2.0相关的东西,所以就拿它开?#35835;恕?/p>

小呆学习Vue2.0的时候,大大小小的教程也看了不少,官网API来来回回看了好多遍,可是真正动手写起来,还是一头雾水的。或许这就是理想与现实的差距吧,所以我决定自己写一点东西出来,学习并加深对Vue全家桶以及Es6的理解。

由于小呆自己也正处于学习阶段,此系列?#22987;?#21482;作为参考,不具有指导意义。所以知识点学习比较凌乱,属于用到啥,学啥的那种,所以喜欢教科书般学习的同学,还是推荐跟着官网教程学习

敌军还有五秒钟到达战场,兄弟们?#20064;傘?/p>


小呆在看网上一些教程的时候,要么比较浅,要么比较深。让小呆这种慢热型的人看起来很是吃力,而且各种教程所使用的项目结构差异很大。所以本系列?#22987;?#23558;使用(官方推荐的)Vue-cli来进行开发。关于node.js环境的安装这里不在赘述,童鞋们自行搜索即可。

安装Vue-cli

打开终端:

npm install -g vue-cli

创建vue-cli项目

用终端进入项目需要存放的地方(比如小呆存放到F:\MyCoding)创建项目:

vue init <template-name> <project-name>

这里我们使用webpack来进行开发,创建项目时需要输入一些项目名称,描述,作者之类的,嫌麻烦的可以一路回车,下面是截图:

创建好项目之后,我们来大概了解下项目的结构:

安装依赖

接着我?#21069;?#35013;依赖包:

#进入到我们刚才创建的app目录下
cd app
#执行安装依赖的命令
npm install
# 安装完成之后运行
npm run dev

安装过程中出现错误的话,有可能是github和npm被墙了,找梯子解决吧(梯子一般都收费,但是也不贵,为了学习小呆觉得这点支出是值得的)。

如果出现如下情况:

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...
  [----------------------------------------] 1%

卡主?#27426;?#20102;,ctrl+c+c 退出安装,在执行npm run dev,这个东西是用来做单元测试神马的,我们学习写vue,暂时用不到。

启动成功

启动成功后,看到了我们的欢迎页面,页面?#31995;?#38142;接都是与vue相关的资料和插件。


结语

这篇?#22987;?#20027;要记述了一下如何安装Vue-cli 来创建项目,以及项目的结构,并没有实际开发代码。可能很多童鞋到这里还是一头雾水,比如webpack那些东西怎么配,如何配,小呆刚学习的时候也是如此,这里建议大家记住重点,我们是来学习Vue2.0的,所以与Vue2.0无关的东西,我们通通先屏蔽掉,反正项目能启动嘛。一步一步来,不然你会陷入这样的循环(本来准备学习Vue2.0——过程中发现用到webpack——跑去学webpack——学webpack发现用到node.js——跑去学node.js——最后一个都没学会,而你的本意其实只是学习Vue2.0)