vue . js vue-CLI脚手架施工详解

与主流的angular和react前端框架相比，vue近年来变得非常热门。他吸收了前两者的优点，同时学习曲线也更加流畅。所以恶魔已经准备好要入坑了~ ~

让我们从vue的脚手架开始。

我不得不在这里呕吐。与mac和linux相比，window在软件开发、代码打包、环境构建等方面确实不方便。它就爆炸了~ ~.不过，嗯，这个恶魔用的是win10，嘿~

嗯，不用说，今天的任务是搭建脚手架。虽然过程不麻烦，但是npm真的可以不小心磨掉整个下午。您可以在这里使用命令行工具、Git Bash或WebStrom中的终端工具。

(1)检查节点版本

在安装vue环境之前，需要先安装NodeJS环境。可以使用node -v指令进行检查，需要确保安装了4.0版以上的nodeJS环境。

当然，如果没有安装，可以去Node.js官网下载，然后像傻子一样安装，非常方便。

Tips:来说说我踩过的一个坑。一开始我是从国外官网安装了最新版本的7.3.0，然后npm运行dev的时候报错了各种错误。最终的解决方案是将节点的版本回滚到6.2.0。因此，我们建议您安装NodeJs 4~6和6之间的版本。

(2)安装命令行界面

接下来，进入正题，在全球范围内安装vue-cli。

使用说明

Npm安装-g vue-cli，然后等待~ ~毕竟npm真的很慢。如果发现长时间卡在一个地方，可以通过ctrl c取消，然后重新执行。

另一个解决方案是使用淘宝的cnpm形象。

最终完成后，使用vue命令检查安装是否成功。如果成功，结果如下：

(3)初始化项目

首先将光盘放入要创建新项目的文件夹，然后使用vue init指令

Vue初始化模板类型项目名称

vue的模板有很多种，可以使用vue列表指令查看

我这里使用的是webpack模板，项目名是sell，说明如下：

Vue init webpack sell可以一路回溯。里面的选项大部分都可以用来确认项目名称、作者、描述信息、测试等，大家可以根据自己的需求进行选择。(这里卖的是我的项目名)

然后进入销售文件夹并运行npm安装。您会发现项目中有一个名为node_modules的额外文件夹，目录结构如下：

(4)运行虚拟环境

接下来，使用npm run dev命令运行项目环境，效果如下：

它显示端口8080已被监控，然后访问http://localhost:8080/

您将看到以下页面

证明项目已经开工，环境已经建设成功~ ~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。