在入坑兄弟vue.js的推荐下，发现自己不知道如何在GitHub上运行开源项目，非常尴尬。通过查阅在线教程，成功搭建了项目环境，同时对工程前期有模糊的认识，所以和大家分享了搭建环境的过程。

看看我的github:https://github.com/padipata,其中包含一些我学习和工作的vue项目。

言归正传~ ~

首先，列出我们需要的东西：

在node.js (npm包管理器)、vue-cli脚手架搭建工具、cnpm npm淘宝镜像安装的环境下，node.js从node.js官网下载安装node，安装过程非常简单，一路“下一步”就可以了(傻瓜安装)。安装完成后，打开命令行工具并输入node -v，如下所示。如果出现相应的版本号，则安装成功。

npm包管理器集成在节点中，直接输入npm -v会显示npm的版本信息，如下图所示。

好的！节点环境已经安装，npm包管理器已经安装。因为一些npm资源被屏蔽或者因为国外的资源，用npm安装依赖包经常会失败，所以我需要npm - cnpm的国内形象。

安装cnpm

在命令行上，输入npminstall-gcnpm-registry=http://registry.npm.taobao.org，然后等待。安装完成，如下所示

之后，我们可以用cnpm代替npm来安装依赖包。如果你想了解更多关于cnpm的信息，可以查看淘宝npm镜像官网。

安装vue-cli脚手架搭建工具

在命令行上运行命令cnpminstall-vue-cli，等待安装完成。(注意这里用cnpm代替npm，否则速度会太慢，导致卡在那里。)通过以上三个部分，我们需要准备的环境和工具都准备好了，然后我们开始使用vue-cli构建项目。

使用vue-cli构建项目

要使用vue-cli构建项目，我们必须首先选择目录，然后在命令行中将目录转移到所选目录。在这里，我选择了桌面来存储新项目，所以我们需要先将目录光盘到桌面，如下所示

在桌面目录下，在命令行上运行命令vue init webpack firstVue。解释这个命令，意思是初始化一个项目，其中webpack是构建工具，也就是说整个项目都是基于webpack的。FirstVue是整个项目文件夹的名称，会在你指定的目录下自动生成(在我的情况下，会在桌面上生成)，如下图所示。

运行初始化命令时，让用户输入几个基本选项，如项目名称、描述、作者等信息。如果不想填写，默认按回车即可。

打开firstVue文件夹，项目文件如下所示。

这是整个项目的目录结构，其中我们主要对src目录进行修改。这个项目只是一个结构框架，整个项目所需的依赖资源还没有安装，如下图所示。

安装项目所需的依赖关系

要安装项目所需的依赖项，首先将cd刻录到项目文件夹(firstVue文件夹)，然后运行命令cnpm install等待安装。

安装完成后，在我们项目目录的firstVue文件夹中会有一个额外的node_modules文件夹，我们项目所需的依赖包资源就在这个文件夹中。

安装依赖包后，可以运行整个项目。

运行项目

在项目目录中运行项目，并运行命令npm run dev，它将以热加载的方式运行我们的应用程序。热加载让我们可以实时看到修改后的效果，无需在修改代码后手动刷新浏览器。

这里简单介绍了npm run dev命令，其中“run”对应于package.json文件的scripts字段中的dev，这是node build/dev-server.js命令的快捷方式。项目运行成功后，浏览器会自动打开localhost:8080(如果浏览器没有自动打开，可以手动输入)。运行成功后，会看到如下界面。

如果看到此页面，则表示项目已成功运行。

以上就是边肖介绍的vue项目如何运行的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！