第一章：安装vuecli
首先我们需要安装nodejs
vuecli是基于webpack的，而webpack又是基于nodejs的。所以我们需要先在电脑上安装nodejs。
你可以到了nodejs的官方下载一个符合你系统的版本——nodejs下载
安装完毕以后，打开命令提示符，如果你找不到，直接搜索cmd。
搜索cmd
然后输入node -v
输入node -v查看版本号
看到版本号，说明安装成功！
接着我们安装vuecli启动器
好的，然后就在这个地方继续输入
npm install -g vue-cli
让我们全局安装vuecli启动器。
安装完毕以后输入 vue -V （v大写） 来查看vue-cli的版本
vuecli版本 2.9.6
看到版本号，说明安装成功！龙哥友情提示：现在vuecli官方的版本已经升级到了3，本文是基于2.9写的教程，
vuecli3和2的差异性再于，vuecli是基于webpack4的而vuecli是基于3的，如果你安装了vuecli3，那么启动的方法可能跟本文中的有区别，请自行百度解决方法。
好的，既然安装已经成功了，我们马上开始创建一个vue项目吧！
创建vue项目
这里，你需要现在你的硬盘上找个地方新建一个文件夹，这个文件夹就是你的项目文件夹（以后我们的html，css，img都要存放在这里面）。然后你文件夹上按住shift点右键。点击打开powerShell。当然前题是你是用的windows的电脑，如果你是苹果，请自行百度打开命令行的方法。
如果你用的是xhbuilder或者webstrom的话就更方便了，你先把刚才的文件夹添加到软件中，然后在这个项目上打开终端即可。
使用doc窗口打开
使用xhbuilder打开终端
这里以powerShell为例：在窗口中输入
vue init webpack my-project
注意最后这个my-project是你项目的名字。创建的时候，会有一些信息让你输入，你可以参考这张图片。
创建项目
创建完成后进入项目文件夹，安装依赖。注意：刚才我们的操作，在你选中的文件夹下面，又创建了一个新的文件夹，文件夹的名字就是你项目的名字。如果我们不cd进入目录，直接安装依赖，会报npm error的错误。
正确的做法是：继续输入
cd 你项目的名字
然后再输入：
npm install
安装依赖包
安装到此结束，
注意，我用的是cnpm，nodejs默认是不包含cnpm的，你这里使用npm即可。cnpm是淘宝镜像，下载速度会快一些。
然后输入
npm run dev
即可开始运行项目！
运行成功后，会提示你打开localhost:8080，打开后看到成功画面
成功画面
网友评论