Vue.js是一个用于构建用户界面的渐进式框架。他不是一个全能的框架。——只关注视图层。因此，很容易学习并与其他库或现有项目集成。当与相关工具和支持库一起使用时，Vue.js还可以完美地驱动复杂的单页应用程序。

在配置环境之前，需要普及一些基本的东西。如果已经了解Vue.js，请点击配置步骤跳转到配置环境的阅读；否则，请耐心阅读。

首先介绍一下Vue.js的概念，他是做什么的？有必要配置vue的运行环境吗？

如上所述，Vue.js并不是一个万能的框架，因为它的作用只集中在视图层。可以理解，它是一个库和一个视图组件，提供尽可能简单的数据绑定和组合的API实现响应。Vue.js可以直接在html中引用，也就是说它的js文档(如下图)可以直接导入，vue.js指令可以添加到HTML文件中。

那么如果这么简单，所谓的运行环境配置是什么呢？嗯，npm的引入方便了包管理。如果你是一个初学者并且练习vue的使用，你不需要配置环境，因为导入js就足够了。但是，如果您想在将来将vue用于项目，就需要配置环境。当项目与后台链接时，会有很多文件需要导入，所以你不能导入任何你需要的东西！这就要用到Node.js前端自动化的概念了。简单来说，把你用的东西打包导入，我们只需要知道怎么用，剩下的让系统来做，这样前端开发就更过瘾了。

脚本类型=' text/JavaScript ' src=' http : js/vue . js '/脚本

其次，介绍Node.js的概念，他是做什么的？你为什么要安装他？

Node.js是一个运行Javascript的环境。实际上，它封装了Chrome V8引擎。Node是一个服务器端的JavaScript解释器，它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可扩展的应用程序，并编写可以同时处理与物理机器的数万个连接的代码。说白了，Node.js是服务器程序，作为后端技术，不能直接用于前端开发。但是前端的学习会更强大，会大大提升编程思路和代码效率。Node采用时间驱动实现异步开发，可以高效打通前端和后端，所以vue也将其作为配置环境，方便大型项目的开发。

那么，作为新手，如何搭建Vue.js的运行环境，请按照我的流程来。

Vue.js的运行环境配置主要分为三个步骤：

1.安装Node.js(JavaScript运行环境)2。安装Vue.js3构建Vue-cli以创建项目

然后现在开始正式安装。

(1)首先下载Node.js，请点击下载Node，根据需要的配置进行下载。一般来说，下载64位windows安装程序对我们的windows系统是有好处的。MSI)。下载后会有这样的图标

点击安装，那么就没有什么特别需要注意的了，直接进入下一步就可以了，但是要知道安装路径，养成良好的习惯。

安装完成后，打开命令行(Windows R)快捷键，打开cmd窗口，输入node -v V，如果出现版本号，说明安装成功！

(2)接下来安装vue.js因为国外安装NPM服务器比较慢，都是用淘宝镜像。请注意，此步骤需要网络。请保持网络畅通。

打开cmd命令框，输入npminstall-gcnpm-registry=https://registry.npm.taobao.org。

注意安装镜像需要1-2分钟左右，需要保持网络畅通，耐心等待。

出现下图时，表示该步骤已经完成。

然后在命令框中输入cnpm install vue，这也需要一点时间。出现下图时，安装成功。

如果这两步没有异常，vue的整个环境就搭建成功了。如果不成功，请重复上述操作。

(3)构建虚拟实验室

Vue-cli是Vue提供的命令行工具，可用于快速构建大型单页应用程序。该工具提供了构建工具的开箱即用配置，带来了现代化的前端开发流程。只需一分钟即可启动一个具有热过载、保存时静态检查和构建可用于生产环境的配置的项目。这里，我们提供了用vue-cli构建项目的简单步骤。

此时，您需要进入安装Vue.js的文件夹并创建一个新文件夹。这是可选的，只是不要用中文命名，比如VueTest。

这里可能有粗心大意找不到的朋友。您可以尝试在c盘和用户文件夹下的管理员或非管理员文件夹中找到它们。检查此node_modules是否有文件夹。找到它后，在命令行上单击到您的vue文件夹。

示例：cd myword/vue

这只是一个例子。你应该根据自己的文件目录打开它。强调最基本的命令行指令是必要的。cd表示在该级别打开目录。如果有兴趣，可以百度一下命令行说明。比如windows、Linux等操作系统，这些指令基本上有很大的不同。

建立文件夹后，进入我们的VueTest文件夹

安装webpack，打开命令行工具，然后输入：

npm安装webpack -g

如果您成功输入webpack -v，系统将提示您输入版本信息

在cmd命令框中输入cnpm install -g vue-cli

将出现以下界面

在命令框中键入vue，您将看到以下描述：

然后在命令行中输入vue init webpack项目的名称，将会有一个关于您的项目的配置的长列表，如图所示

Cd命令进入创建的项目目录，首先cd你自己项目的名称；

安装项目依赖：npm install，因为在自动构建过程中已经存在package.json文件，所以直接在这里安装依赖就可以了。

安装vue路由模块vue-router和网络请求模块vue-resource，输入：cnpm安装vue-router vue-resource-save。

要启动项目，请输入：npm run dev。服务成功启动后，默认情况下，浏览器将打开欢迎页面。

以上就是构建Vue.js项目的完整过程。如果有错误，希望朋友们指正。

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