【二】安装Node.js
【 1 】下载
# https://nodejs.org/en/download/
# 下载并安装Node.js
choco install nodejs-lts --version=“20.12.2"
# 验证环境中的Node.js版本是否正确
node -v # 应打印 'v20.12.2'
# 验证环境中的 NPM 版本是否正确
npm -v # 应打印 '10.5.0'
【 2 】 安装
检查是否安装成功
# 下载并安装Node.js
choco install nodejs-lts --version=“20.12.2"
# 验证环境中的Node.js版本是否正确
node -v # 应打印 'v20.12.2'
# 验证环境中的 NPM 版本是否正确
npm -v # 应打印 '10.5.0'
- 创建两个文件夹下创建两个文件夹【node_global】及【node_cache】
5、环境配置(很重要!)
配置环境变量是为了在计算机系统中指定特定的路径或设置,这样可以让系统知道在哪里可以找到特定的可执行文件、库文件或其他资源。配置环境变量可以提高系统的灵活性和可维护性,因为它们可以在系统范围内全局生效,而不需要在每次使用特定应用程序或命令时都手动指定路径。
# npm
- 这是
npm
(Node 包管理器)的帮助信息,它列出了npm
支持的一系列命令和用法。
【 3 】搭建vue环境
第一步 安装包
# npm install -g @vue/cli #
'''或者'''
# 装cnpm 这个包---》淘宝提供的--》以后有了它--》装模块 cnpm替代npm
# npm install -g cnpm --registry=https://registry.npmmirror.com
### 解决方案1:
// 1. 清空缓存
npm cache clean --force
// 2. 关闭SSL验证
npm config set strict-ssl false
// 3. 安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )
### 解决方案2:
// 1. 清空缓存
npm cache clean --force
// 2. 切换新源
npm config set registry https://registry.npmmirror.com
// 3. 查看源是否设置成功
npm config get registry
// 4. 安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )
第二步安装vue脚手架
- 我这里安装的是npm 所以我要安
npm install -g @vue/cli
# cnpm install -g @vue/cli
# 或者
# npm install -g @vue/cli
安装完成后,可以再次运行以下命令验证 Node.js 和 npm 的版本:
node -v
npm -v
如果你遇到了 Node.js 和 npm 版本不正确的问题,需要采取以下步骤:
-
卸载旧版本的 Node.js 和 npm:
-
首先,打开控制面板或使用命令行卸载已安装的 Node.js。
-
在控制面板中,找到已安装的 Node.js 并卸载它。
-
或者,在命令行中运行以下命令(Windows):
npm uninstall -g vue-cli npm uninstall -g @vue/cli
-
-
安装最新版本的 Node.js:
- 前往 Node.js 官方网站 下载最新的稳定版 Node.js 安装程序。
- 下载后运行安装程序,按照提示完成 Node.js 的安装。
-
安装 Vue CLI:
-
安装完 Node.js 后,在命令行中运行以下命令安装 Vue CLI:
npm install -g @vue/cli
-
-
验证安装:
-
安装完成后,可以再次运行以下命令验证 Node.js 和 npm 的版本:
node -v npm -v
-
-
创建 Vue 项目:
- 安装完成后,再次尝试运行
vue create myfirstvue
来创建 Vue 项目。
- 安装完成后,再次尝试运行
【 三 】vue基本运行
# npm create vue@latest
npm install
是 Node.js 中用于安装项目依赖包的命令。当你在一个 Node.js 项目中运行npm install
命令时,它会查找项目中的package.json
文件,并安装该文件中列出的所有依赖包及其对应的版本。这通常用于在开始一个新项目或在已有项目中添加新依赖时使用。
# npm run dev 运行脚本文件
PS D:\vue\today01\app01> npm run dev
> app01@0.0.0 dev
> vite
VITE v5.2.10 ready in 3804 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
这个就是运行本地脚本文件
使用 Vite 作为开发服务器,在本地运行了 npm run dev
或 npm run start
(由于你的输出中没有显示实际的命令,只显示了 vite
,但通常是运行 vite
的)。Vite 是一个现代化的前端构建工具,用于快速构建现代化的 Web 应用。在你的输出中,Vite 已经成功启动,你可以通过访问 http://localhost:5173/
来访问你的应用程序。
npm run serve
【三】常见的问题
cnpm install --save vue-router@3.5.3
- 这个错误通常是因为在
HomeView.vue
组件中使用了未定义的Vue
对象。通常情况下,在 Vue.js 单文件组件中是不需要显式引入Vue
的,因为 Vue 已经在全局范围内注册了。可能是在HomeView.vue
组件中的某个地方尝试使用了Vue
,但是却没有正确引入或者 Vue 实例化之前就使用了。
在该vue文件中写入
-
确保正确引入 Vue: 在
HomeView.vue
的<script>
标签中,确保正确引入 Vue,例如:import Vue from 'vue';
-
检查代码逻辑: 确保在使用
Vue
对象的地方,它已经被正确实例化。通常情况下,Vue 实例是在入口文件(如main.js
)中创建的,然后在组件中通过import Vue from 'vue'
引入。 -
避免在 Vue 实例化之前使用 Vue: 确保任何需要使用 Vue 的代码都是在 Vue 实例化之后执行的。如果有一些初始化逻辑需要在 Vue 实例化之前执行,可以考虑将它们放在
created
生命周期钩子中。