基于NodeJs 的Vue安装和创建项目（简单易懂）

---

前言

Vue前端框架的环境搭建

---

一、Node.js的下载与安装

• 官方下载地址：官方链接
• 这里下载的是 64位window系统 的安装文件 node-v18.16.1-x64.msi ：教程链接
  

安装完之后，使用 window + R快捷键，启动 cmd命令行，验证 Node.js 是否安装成功

需要注意:我们在cmd中的操作都是需要管理员权限的
以管理员身份打开方式如下：

出现此面板后，直接 按住 Shift + Ctrl + Enter，就会弹出是否以管理员身份打开终端的确认弹窗，点击按钮 是，就可以了

出现以下情况，即表示安装成功

---

二、Node.js环境变量配置

• 在上面我们已经完成了 Node.js 的安装，即使不进行此步骤的环境变量配置也不影响Node.js的使用
• 但是，若不进行环境变量配置，那么在使用命令安装 Node.js全局模块 （如：npm install -g vue）时，会默认安装到C盘的路径 (C:\Users\用户名\AppData\Roaming\npm) 中
• 因此，我们需要配置 全局安装模块 node_global 以及 缓存目录 node_cache 的环境变量；

2.1、创建默认安装目录和缓存日志目录

比如，我希望将全模块所在路径和缓存路径，放在我 Node.js 安装的文件夹中，则在我安装的文件夹【F:\coding\NodeJs】下创建两个文件夹【node_global】及【node_cache】分别用来存放安装的全局模块和全局缓存信息。

2.2、创建完两个文件夹后，在cmd窗口中输入以下命令（两个路径即是两个文件夹的路径）：

  // 设置全局模块安装路径
  npm config set prefix "F:\coding\NodeJs\node_global"
  // 设置全局缓存存放路径
  npm config set cache "F:\coding\NodeJs\node_cache"

命令执行后，效果如图：

查看命令有以下：

// 查看npm全局安装包保存路径
npm config get prefix
// 查看npm装包缓存路径
npm config get cache
// 查看全局安装目录
npm list -global
// 查看所有npm 配置
npm config list

2.3、设置电脑环境变量

环境变量界面打开顺序：右键 “我的电脑”=》属性=》高级系统设置=》环境变量，进入环境变量对话框

1、在【系统变量】中新建环境变量 NODE_PATH，变量值为：F:\coding\NodeJs\node_global\node_modules，其中 F:\coding\NodeJs\node_global 是新创建的全局模块安装路径

2、在【系统变量】下的【Path】中添加上Node的路径【F:\coding\NodeJs\】

3、修改【用户变量】中的 【Path】 变量，将 C:\Users\用户名\AppData\Roaming\npm 修改为F:\coding\NodeJs\node_global

4、设置完用户变量后，一路点击确定，我们的电脑环境变量就完成了

注意：配置完，一定要重启，否则不生效

---

三、安装vue及脚手架

3.1、安装vue.js

在 cmd 窗口中输入以下指令 全局安装Vue模块

//	-g 表示全局安装
npm install vue -g

执行效果，如图所示：

查看安装的vue信息：npm info vue

查看安装的vue版本 npm list vue

3.2、安装webpack模板

在cmd中运行命令 npm install webpack -g，然后等待安装完成。

webpack 4x 以上，webpack将命令相关的内容都放到了 webpack-cli，
所以还需要安装 webpack-cli：npm install --global webpack-cli，
安装成功后可使用 webpack -v查看版本号。

3.3、安装脚手架vue-cli 2.x

在cmd窗口中输入命令：npm install vue-cli -g，执行效果如下：

可以用以下命令来检查其版本是否正确：

vue -V
vue --version

执行效果，如图所示：

这里再安装上Vue路由：vue-router

在cmd窗口中输入命令：npm install -g vue-router

可以看到现在我的安装目录如下：

3.4、vue-cli2创建运行vue项目

3.4.1、创建项目

在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端）

输入命令：vue init webpack 项目名（初始化一个完整版的项目），执行效果如图

注意：项目名不要取中文和大写字母。

配置详解：

• Project name（项目名称）：回车
• Project description（项目描述）：回车
• Author（作者名）：回车
• Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
• Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
• Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
• Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
• Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
• Should we run npm install for you after the project has been created? (recommended) ==> 安装依赖 npm install

最后结果如下，项目初始化成功

3.4.2、运行项目

按提示代码进入到项目目录下并运行 npm run dev，如图所示

按提示打开地址 http://localhost:8080， 打开网址如图所示

结束项目运行：Ctrl + C，选择 Y 即可停止项目的运行。

---

四、安装vue-cli 3.x

4.1、卸载旧版本

卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

4.2、安装新版本

默认安装的话是安装最新的版本：npm install @vue/cli –g

4.3、新建项目

4.3.1、输入命令：vue create 项目名，进入详细选择

因为默认 vue2 版本和默认 vue3 版本都是有 Eslint 和 Babel 的，Eslint 是代码规范的，Babel 是将 ES6 转化为 ES5 的。
所以新手不建议安装有 Eslint 的，所以选择自主配置 – 最后一种
(上下 方向键选择,空格键确定, Enter进入下一步)

（按空格键来进行是否选择，一般建议以上已勾选的选择）

Babel：es6 转 es5
Router：路由
Vuex：数据容器，存储共享数据
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验（一般情况下默认勾选了，记得取消！）

4.3.2、选择vue版本

4.3.3、是否选择history路由模式，（这里选择“N”）

4.3.4、选择css预处理器，一般选择Less

4.3.5、Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中
这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

4.3.6、是否将刚才的选择保存起来，下次可以直接用，一般选择N，可以根据自己需要选择

4.4、运行项目

cd 到我们的项目目录， 然后输入 npm run serve可以运行我们的项目
按提示打开 http://localhost:8080 就可以看到我们的运行的结果了，如图

4.5、cli3下拉取2.x模板

输入命令：npm install -g @vue/cli-init，执行效果如图

依然可以新建2.x的项目 vue init webpack 项目名