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

文章目录

前言
一、Node.js的下载与安装
二、Node.js环境变量配置
- 2.1、创建默认安装目录和缓存日志目录
- 2.2、创建完两个文件夹后，在cmd窗口中输入以下命令（两个路径即是两个文件夹的路径）：
- 2.3、设置电脑环境变量
三、安装vue及脚手架
- 3.1、安装vue.js
- 3.2、安装webpack模板
- 3.3、安装脚手架vue-cli 2.x
- 3.4、vue-cli2创建运行vue项目
- - 3.4.1、创建项目
  - 3.4.2、运行项目
四、安装vue-cli 3.x
- 4.1、卸载旧版本
- 4.2、安装新版本
- 4.3、新建项目
- 4.4、运行项目
- 4.5、cli3下拉取2.x模板

前言

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 的环境变量；

比如，我希望将全模块所在路径和缓存路径，放在我 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 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：