构建vue.js开发环境的最简单策略的详细说明

作为学习路上的小白，一开始对vue.js有一种莫名的好感。在知道vue.js也可以实现angular.js的双向绑定等一些功能后，我在学习前适当的把angular.js和node.js扔到了后面。在阅读了vue文档后，我首先必须构建一个开发环境。因为我太白了，看了一些搭建开发环境的博客，说技术术语太多，我还是看了看。

具体流程大致如下：

难以理解？没关系，我也不懂，跟着操作就行了，我就是窗口系统。

1.安装node.js

一开始我不明白。学完vue.js一定要掌握node.js吗？这无关紧要。NPM是NodeJS下的一个包管理工具，可以帮助你管理(可以简单理解为下载)各种前端框架或者插件，类似于PHP的composer和Twitter的Bower。使用Vue不需要安装NodeJS。这里下载NodeJS只是为了使用它内置的NPM工具，所以你不需要有任何NodeJS基础。您只需要运行npm install vue命令，就可以将最新版本的vue下载到node_modules文件夹中。如果只是想手动介绍Vue，只需要在“https://vuejs.org/js/vue.js”下载或者通过CDN介绍即可。

2.安装淘宝镜像

这里有一个问题，使用npm会导致网络速度变慢。对于大陆用户，建议将npm的注册表源设置为国产镜像，这样可以大大提高安装速度。

打开命令行并输入以下命令

npm安装-g cnpm -注册表=https://registry.npm.taobao.org

直接复制就可以了，下面会出现一串代码，表示正在安装，忽略。

3.在全球范围内安装vue-cli脚手架

继续在命令行输出以下命令：

cnpm安装web pack-g

-g代表全球。输出以上指令后，下面会出现一串代码，说明安装不需要注意。安装完成后，您可以进行检查。如果输出vue，将显示这种情况，表示安装成功。

4.安装网络包

继续在命令行输入以下命令：

vue init webpack my-first-vue-project基于web pack模板创建了一个新项目。下面的my-first-vue-project引用了这个项目的名称，你也可以把它改成另一个。

然后您将下载并安装这组模板，命令行上会有几个问题。您可以按照以下步骤回答这些问题。

？项目名称？项目描述？作者？使用ESLint来清理你的代码？(y/n)？用因果摩卡设置单元测试？(y/n)？用守夜人设置e2e测试？(y/n)第一行要求项目名称，第二行要求项目描述，第三行要求作者姓名，输入自己的名字就好。第四、五、六行都是直接跟NO，这个项目已经初始化了，你可以在电脑上查看。在当前目录中将有一个名为my-first-vue-project的附加文件夹，其中将包含一些文件。

5.使用光盘命令行查找并输入项目目录

6.安装依赖关系

在当前项目目录中输入命令行：

cnpm安装

安装完成后，回到计算机上的my-first-vue-project文件夹，其中还会有一个node_modules文件夹。

7.启动项目接下来，继续输入以下命令行：

国家预防机制运行开发

服务器成功启动后，下面会给出一系列指令告诉你：

在http://本地主机：8080监听然后去浏览器进入这个页面可以看到这样一个页面：

这意味着开发环境结束了。

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