node环境安装及vue-cli使用（一）

安装包：node-v8.11.1-x64.msi（windows）

检查是否安装：

1、           cmd

2、           node –version

Node.js 安装配置

本章节我们将向大家介绍在window和Linux上安装Node.js的方法。

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。

 

你可以根据不同平台系统选择你需要的Node.js安装包。

Node.js 历史版本下载地址：https://nodejs.org/dist/

Window 上安装Node.js

你可以采用以下两种方式来安装。

1、Windows 安装包(.msi)

本文实例以node-8.11.1版本为例，其他版本类似，安装步骤：

步骤 1 : 双击下载后的安装包 node-8.11.1，如下所示：

步骤 2 : 点击以上的Run(运行)，将出现如下界面：

步骤 3 : 勾选接受协议选项，点击 next（下一步）按钮 :

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\", 你可以修改目录，并点击next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装）开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。然后并点击next（下一步）：

安装过程：

点击 Finish（完成）按钮退出安装向导。

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd"=> 输入命令"path"，输出如下结果：

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;C:\Users\rg\AppData\Roaming\npm​

 

我们可以看到环境变量中已经包含了C:\ProgramFiles\nodejs\

检查Node.js版本

 

安装node其实是为了使用vue，vue是基于node的开发环境的

 

1、node -v 命令：查看node的版本，若出现相应的版本号，则说明你

 

安装成功了。

 

2、npm -v 命令：npm包管理器，是集成在node中的，所以安装了node

 

也就有了npm,直接输入 npm -v 命令，显示npm的版息。

 

3、npm install --global vue-cli : 全局安装vue-cli

 

  至此：安装vue完成。  开始加载自己的项

 

 

4、vue init webpack my-project 命令：  //my-project 写上自己的项目名     称  

1.项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。

Project name (my-project):

 

2.项目描述，如果不需要就直接回车。

Project description (A Vue.js project):

 

3.项目作者，默认计算机用户名

Author (xxx)：

 

 

4.构建方式（暂且这么解释）

两个选择（上下箭头选择，回车即为选定）建议选择 : Runtime + Compiler:recommended for most users这里推荐使用1选项，适合大多数用户的

 

 

5.安装vue的路由插件，需要就选y，否则就n

建议: Y

 

6.是否使用ESLint检测你的代码？

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
建议选择 ‘N’ 因为选择 ‘Y’ 在做调试项目时,控制台会有很多黄色警告 提示格式不规范,但其实并不影响项目

Use ESLint to lint your code?

 

7.是否安装单元测试(暂不详细介绍)

建议: N

8.是否安装E2E测试框架NightWatch（E2E，也就是EndTo End，就是所谓的“用户真实场景”。）

建议: N

 

9.项目创建后是否要为你运行“npm install”?这里选择包管理工具

选项有三个（上下箭头选择，回车即为选定）建议 : yes use npm

 

5、cd  my-project 

 

6、npm install

 

7、npm run dev

 

 

 

浏览器中访问  http://localhost:8081 即可访问我们创建好的vue项目了

 

 

目录结构：

 

 

 

下次我们讲解一下 vue-cli 模板的使用过程以及执行原理。
 

 

有兴趣的请关注我的微信公众账号