vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）

在上一篇《vue+vue-router+axios+element-ui构建vue实战项目之一（基础知识篇）》中，我简要的说明了一下前端开发目前的趋势，以及为什么选择vue框架等等情况。

接下来本篇文章，我们来了解下vue项目开始前，开发环境的搭建（windows环境）。

话不多说，开始咯。

安装 nodejs 环境

以前看到的nodejs 的安装方案，大多都是使用终端各种命令，太费事。明明有更简便的方式干嘛不用呢？今天就介绍傻瓜式的安装方案。 

 nodejs 官方网站下载安装包： https://nodejs.org/，然后进行安装。

在安装好了 nodejs 之后，我们在终端中输入以下两个命令：

如果能够正确显示版本号，证明我们的nodejs安装成功。

安装 vue-cli 脚手架工具

在终端输入：

npm install vue-cli -g 

简单的介绍下：

1. npm 是 nodejs 的官方包管理器。可以简单的理解为，用这个来管理所有的依赖包（虽然不仅仅是如此）。
2. install 命令表示执行安装操作（uninstall、update等）。
3. -g 是命令参数，代表，这个包将安装为系统全局的包（就是说，在任何地方都可以用这个包）。
4. vue-cli 是我们要安装的包。

安装完成后，终端输入：

注意：vue -V中，V是大写的。

也可以输入vue，查看相关信息，比如

基本的环境搭建完成了，接下来，我们正式创建一个vue项目

用 vue-cli 构建一个项目

首先，跳转到准备放项目的文件夹，然后shift+鼠标右键，选择‘在此处打开命令窗口’，在终端输入：

vue init webpack my-vue-project

vue就是我们刚刚安装的vue-cli脚手架的命令，init是初始化一个以webpack为模版、名字叫my-vue-project的项目（当然，init不止支持webpack模版，还有其他，请移步github查看更多vuejs-templates相关信息）。

当你输入命令后，按回车键，终端会提示你信息，如果不想设置，我们只需一直按回车即可。

不过，我还是要介绍一下里面提示的信息。

? Project name (my-vue-project)  --项目名称，如果不想改，直接回车

2 ? Project description(A Vue.js project)  --项目描述，如果不想改，直接回车

3 ? Author (24439...)  --项目作者，如果不想改，直接回车

4 ? Vue build (Use arrow keys) --是否需要安装编译器，我们选择安装，直接回车

5 ? Install vue-router (Y/n)  --是否需要安装vue-router路由管理，我们选择安装，直接回车

6 ? Use ESLint to lint your code? (Y/n)  --安装eslint检查语法，我选择不安装，按n，再按回车（如果安装，按回车）

7 ? Setup unit tests? (Y/n)  --安装单元测试，我选择不安装，按n，再按回车

8 ? Setup e2e tests with Nightwatch? (Y/n)  --还是关于测试，我选择不安装，按n，再按回车

所有操作完成后，得到如下图示结果，项目基础配置成功，接下来就是安装中

安装需要联网，如果npm被墙，请使用cnpm安装

安装方法：

npm install cnpm -g --registry=https://registry.npm.taobao.org

更多信息，请移步cnpm官网。

项目安装完成，如图：

按照提示，我们终端输入：

cd my-vue-project 

npm run dev

如图项目启动成功，我们在浏览器输入 http://localhost:8080 ，访问成功：

好了，我们nodejs和vue-cli工具已经顺利安装，并且成功搭建了一个vue项目。

下一篇，我将介绍这个init vue项目的基本信息。

 

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！